Shulou(Shulou.com)06/03 Report--

This article is to share with you about the skills of JavaScript, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Many people have five years of JavaScript experience, but in fact it may only be one year's experience that has been reused five times. To complete the same logic and function, some people can write spaghetti-like code, while others can do it with two or three lines of concise and clear code. Concise code is not only easy to read, but also reduces the possibility of complex logic and errors.

1. Simplified conditional expression

It is often encountered that regular logical expressions can be very long to determine whether a variable is a specified value. What I do is put these values in an array:

/ / too long logical expression if (x = 'abc' | | x = =' def' | | x = 'ghi' | | x =' jkl') {/ / other logic} / / abbreviated if (['abc',' def', 'ghi',' logic] .logic (x)) {/ / other logic}

two。 Simplify if... Else

If...else is so common that many people forget that there are other ways to judge conditions. For example, for a simple variable assignment, there is no need to use such a lengthy statement, and one-line expression is done:

/ / novice let test= boolean; if (x > 100) {test= true;} else {test= false;} / / abbreviated expression let test= (x > 10)? True: false; / / more direct let test = x > 10; console.log (test)

Ternary expressions can make complex conditional bifurcation judgments, but at the expense of some readability:

Let x = 300, let test2 = (x > 100)? 'greater 100': (X

< 50) ? 'less 50' : 'between 50 and 100'; console.log(test2); // "greater than 100" 3. 判空并赋默认值 Code Review 的时候我经常看到这样的代码，判断变量不是null，undefined，''的时候赋值给第二个变量，否则给个默认值： if (first !== null || first !== undefined || first !== '') { let second = first; } // 简写 let second = first || ''; 4. 简写循环遍历 for 循环是最基本的，但是有点繁琐。可以用for...in、for...of或者forEach代替： // Longhand for (var i = 0; i < testData.length; i++) // Shorthand for (let i in testData) or for (let i of testData) 数组遍历： function testData(element, index, array) { console.log('test[' + index + '] = ' + element); } [11, 24, 32].forEach(testData); // 打印输出: test[0] = 11, test[1] = 24, test[2] = 32 4. 简化 switch 这个技巧也很常用，把switch 转换成对象的key-value形式，代码简洁多了： // Longhand switch (data) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; // And so on... } // Shorthand var data = { 1: test1, 2: test2, 3: test }; data[anything] && data[anything](); 5. 简化多行字符串拼接 如果一个字符串表达式过长，我们可能会拆成多行拼接的方式。不过随着 ES6 的普及，更好的做法是用模板字符串： //longhand const data = 'abc abc abc abc abc abc\n\t' + 'test test,test test test test\n\t' //shorthand const data = `abc abc abc abc abc abc test test,test test test test` 6. 善用箭头函数简化 return ES6 的箭头函数真是个好东西，当函数简单到只需要返回一个表达式时，用箭头函数最合适不过了，return都不用写： Longhand: //longhand function getArea(diameter) { return Math.PI * diameter } //shorthand getArea = diameter =>

(Math.PI * diameter;)

7. Simplified branch conditional statement

It's you again, if...else if...else! Similar to switch, it can be simplified in the form of key-value:

/ / Longhand if (type = 'test1') {test1 ();} else if (type =' test2') {test2 ();} else if (type = 'test3') {test3 ();} else if (type =' test4') {test4 ();} else {throw new Error ('Invalid value' + type);} / / Shorthand var types = {test1: test1, test2: test2, test3: test3, test4: test4}; var func = types [type] (! func) & & throw new Error ('Invalid value' + type); func ()

8. Repeat the string N times

Sometimes a string needs to be repeated N times for some purpose, and the stupidest way is to use for loop concatenation. In fact, an easier way is to use repeat:

/ / longhand let test =''; for (let I = 0; I < 5; I + +) {test + = 'test';} console.log (str); / / test test test test test / / shorthand 'test' .repeat (5)

9. Exponential operation

Save as much as you can, low carbon and environmental protection.

/ / longhand Math.pow (2 and 3); / 8 / / shorthand 2 / 3 / / 8

10. Numeric separator

This is a relatively new syntax proposed by ES2021. The literal amount of numbers can be separated by underscores, which improves the readability of large numbers:

/ / Old Grammar let number = 98234567 / / New Grammar let number = 98 "234" 567 are the skills of JavaScript. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.