Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of how to use the parameters of the JavaScript function object, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will have something to gain after reading this article on how to use the parameters of the JavaScript function object. Let's take a look.

Object parameters are deconstructed using

If you want the function to take many arguments (if more than two), you should use objects. On this basis, you can use deconstruction syntax to extract the required parameters.

Common writing method

Const greet = (obj) = > {return `${obj.greeting}, ${obj.firstName} ${obj.lastName}`;}

Rewrite

Const greet = ({greeting, firstName, lastName}) = > {return `${greeting}, ${firstName} ${lastName}`;}

Using deconstruction will be more elegant, and we can write a lot less repetitive things, and the naming will be clearer.

Named callback function

Good naming makes it easier to read the code, as does the naming of callback functions.

Common writing method

Const arr = [1,2,3] .map (a = > a * 2)

Rewrite

Const double = a = > a * 2bot Const arr = [1,2,3] .map (double)

By naming separately, you can better see the meaning of the code at a glance, as shown above: it is obvious from the name that the callback function is used to double each element of the original array.

Make conditional sentences descriptive

For complex conditional judgments, we can use functions alone to express them, which will make conditional statements more descriptive.

Common writing method

If (score = 100 | | remainingPlayers = 1 | | remainingPlayers = 0) {quitGame ();}

Rewrite

Const winnerExists = () = > {return score = 100 | | remainingPlayers = 1 | | remainingPlayers = 0} if (winnerExists ()) {quitGame ();}

According to the original way of writing, we have a long expression in parentheses, but it is not easy to see what it is judging. After rewriting, we put it in a naming function, and we can roughly see the meaning of the expression according to the name.

Replace switch statements with Map or Object

When your switch statement is very long, it means you should simplify your code

Common writing method

Const getValue = (prop) = > {switch (prop) {case "a": {return 1;} case "b": {return 2;} case "c": {return 3;} const val = getValue ("a")

Object rewriting

Const obj = {a: 1, b: 2, c: 3} const val = obj ["a"]

We use switch to nest multiple blocks with multiple return statements, just to get the return value of a given propvalue, we can use only one object to achieve the same effect.

Map rewriting

Const map = new Map ([["a", 1], ["b", 2], ["c", 3]]) const val = map.get ("a")

When using Map, the code is also much shorter. By passing an array, each item in the array contains keys and values. Then, we only use the get method of the Map instance to get the value from the key. One of the advantages of Map over objects is that we can use other values such as numbers, Boolean values, or objects as keys. An object can only have a string or symbol as a key.

Use Object.assign to set default properties

Common writing method

Const menuConfig = {title: null, body: "Bar"}; function createMenu (config) {config.title = config.title | | "Foo"; config.body = config.body | | "Bar";} createMenu (menuConfig)

Rewrite

Const menuConfig = {title: "Order", body: "Send"}; function createMenu (config) {config = Object.assign ({title: "Foo", body: "Bar"}, config); / / config: {title: "Order", body: "Bar"} / /.} createMenu (menuConfig); remove duplicate code, merge similar functions; delete deprecated code

A bad way of writing

Var paging = function (currPage) {if (currPage = totalPage) {currPage = totalPage; jump (currPage); / / Jump} else {jump (currPage); / / Jump}}

Rewrite

Var paging = function (currPage) {if (currPage = totalPage) {currPage = totalPage;} jump (currPage); / / separate jump function}; refine function

If a function is too long and has to be annotated to make it easier to read, it is necessary to ReFactor these functions.

If there is a piece of code in a function that can be separated, then we'd better put that code into a separate function.

Example

For example, in a function responsible for obtaining user information, we also need to print the log related to the user information.

Var getUserInfo = function () {ajax ("http:// xxx.com/userInfo", function (data) {console.log ("userId:" + data.userId); console.log ("userName:" + data.userName); console.log ("nickName:" + data.nickName);});}

Rewrite

We can encapsulate the statement of printing log in a separate function.

Var getUserInfo = function () {ajax ("http:// xxx.com/userInfo", function (data) {printDetails (data);});} var printDetails = function (data) {console.log ("userId:" + data.userId); console.log ("userName:" + data.userName); console.log ("nickName:" + data.nickName);} This is the end of the article on "how to use the parameters of the JavaScript function object". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use the parameters of the JavaScript function object". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.