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

This article mainly explains "what are the JavaScript shorthand skills to improve efficiency". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the JavaScript shorthand skills to improve efficiency"?

Shorthand skills

When multiple variables are declared at the same time, it can be simplified into one line

/ / Longhandlet x y = 20; / / X, y = 20

Using deconstruction, multiple variables can be assigned at the same time.

Skillfully using Ternary operators to simplify if else

/ / Longhand let marks = 26; let result; if (marks > = 30) {result = 'Pass';} else {result =' Fail';} / / Shorthand let result = marks > = 30? 'Pass': 'Fail'

Use the | | operator to assign a default value to a variable

In essence, it makes use of the characteristics of the | operator. When the result of the previous expression is converted to a Boolean value of false, the value is the result of the later expression.

/ / Longhandlet imagePath;let path = getImagePath (); if (path! = = null & & path! = = undefined & & path! = ='') {imagePath = path;} else {imagePath = 'default.jpg';} / / Shorthandlet imagePath = getImagePath () | |' default.jpg'

Simplify if statements using the & & operator

For example, a function is called when a condition is true, which can be abbreviated.

/ / Longhandif (isLoggedin) {goToHomepage ();} / ShorthandisLoggedin & & goToHomepage ()

Use deconstruction to exchange the values of two variables

Let x = 'Longhandconst temp = let x = y Tipy = temp;//Shorthand [x, y] = [y, x]

Applicable arrowhead function simplified function

/ / Longhandfunction add (num1, num2) {return num1 + num2;} / / Shorthandconst add = (num1, num2) = > num1 + num2

We should pay attention to the difference between arrowhead function and ordinary function.

Simplify code using string templates

Use template strings instead of original string concatenation

/ / Longhandconsole.log ('You got a missed call from' + number +'at'+ time); / / Shorthandconsole.log (`You got a missed call from ${number} at ${time} `)

Multiline strings can also be simplified using string templates

/ / Longhandconsole.log ('JavaScript, often abbreviated as JS, is a\ n' +' programming language that conforms to the\ n' + 'ECMAScript specification. JavaScript is high-level,\ n' +' often just-in-time compiled, and multi-paradigm.'); / / Shorthandconsole.log (`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi- paradigm.`)

For multi-valued matching, all values can be put in an array and abbreviated by the array method

/ / Longhandif (value = 1 | | value = = 'one' | | value = 2 | | value =' two') {/ / Execute some code} / / Shorthand 1if ([1, 'one', 2,' two'] .indexOf (value) > = 0) {/ / Execute some code} / / Shorthand 2if ([1, 'one', 2,' two'] .indexOf (value)) {/ / Execute some code}

Skillfully using the concise syntax of ES6 objects

For example, when the attribute name is the same as the variable name, it can be directly abbreviated to a

Let firstname = 'Amitav';let lastname =' Mishra';//Longhandlet obj = {firstname: firstname, lastname: lastname}; / / Shorthandlet obj = {firstname, lastname}

Use the unary operator to simplify the conversion of strings to numbers

/ / Longhandlet total = parseInt ('453'); let average = parseFloat (' 42.6'); / / Shorthandlet total = + '453' leading average = + '42.6'

Use the repeat () method to simplify repeating a string

/ / Longhandlet str =''; for (let I = 0; I

< 5; i ++) { str += 'Hello ';}console.log(str); // Hello Hello Hello Hello Hello// Shorthand'Hello '.repeat(5);// 想跟你说100声抱歉！'sorry\n'.repeat(100); 使用双星号代替Math.pow() //Longhandconst power = Math.pow(4, 3); // 64// Shorthandconst power = 4**3; // 64 使用双波浪线运算符（~~）代替Math.floor() //Longhandconst floor = Math.floor(6.8); // 6// Shorthandconst floor = ~~6.8; // 6 需要注意，~~仅适用于小于2147483647的数字 巧用扩展操作符（...）简化代码 简化数组合并 let arr1 = [20, 30];//Longhandlet arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]//Shorthandlet arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80] 单层对象的拷贝 let obj = {x: 20, y: {z: 30}};//Longhandconst makeDeepClone = (obj) =>

{let newObject = {}; Object.keys (obj) .map (key = > {if (typeof obj [key] = 'object') {newObject [key] = makeDeepClone (obj [key]);} else {newObject [key] = obj [key];}}); return newObject;} const cloneObj = makeDeepClone (obj); / / Shorthandconst cloneObj = JSON.parse (JSON.stringify (obj)) / / Shorthand for single level objectlet obj = {x: 20, y: 'hello'}; const cloneObj = {... obj}

Find the maximum and minimum values in the array

/ / Shorthandconst arr = [2,8,15,4]; Math.max (.arr); / / 15Math.min (.arr); / / 2

Use for in and for of to simplify normal for loops

Let arr = [10,20,30,40]; / / Longhandfor (let I = 0; I < arr.length; iIndex +) {console.log (arr [I]);} / / Shorthand//for of loopfor (const val of arr) {console.log (val);} / / for in loopfor (const index in arr) {console.log (arr);}

Simplify getting a character in a string

Let str = 'jscurious.com';//Longhandstr.charAt (2); / / c//Shorthandstr [2]; / / c

Remove object properties

Let obj = {x: 45, y: 72, z: 68, p: 98}; / / Longhanddelete obj.x;delete obj.p;console.log (obj); / / {y: 72, z: 68} / / Shorthandlet {x, p,... newObj} = obj;console.log (newObj); / / {y: 72, z: 68}

Use arr.filter (Boolean) to filter out the value falsey of array members

Let arr = [12, null, 0, 'xyz', null,-25, NaN,', undefined, 0.5, false]; / / Longhandlet filterArray = arr.filter (function (value) {if (value) return value;}); / / filterArray = [12, "xyz",-25,0.5] / / Shorthandlet filterArray = arr.filter (Boolean) / / filterArray = [12, "xyz",-25,0.5] Thank you for your reading, these are the contents of "what are the JavaScript shorthand skills to improve efficiency?" after the study of this article, I believe you have a more profound understanding of what JavaScript shorthand skills to improve efficiency have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.