关于javascript:前端见外20个JS简写小技巧助你高效敲代码

原作者：Amitav Mishra
原文链接：20 JavaScript Shorthand Techniques that will save your time
译者：难堪风流
集体翻译，转载请注明出处

The shorthand techniques of any programming language help you to write more clean and optimized code and lets you achieve your goal with less coding. Let’s discuss some of the shorthand techniques of JavaScript one by one.

任何一种编程语言的简写小技巧都是为了帮忙你写出更简洁、更欠缺的代码，让你用更少的编码实现你的需要。接下来让咱们逐个讨论一下 JavaScript 中的一些简写小技巧。

1. 申明多个变量

// 惯例写法
let x; 
let y = 20; 

// 简写
let x, y = 20;

2. 为多个变量赋值

We can assign values to multiple variables in one line with array destructuring.

咱们能够应用 数组解构赋值，仅用一行代码实现为多个变量赋值。

// 惯例写法 
let a, b, c; 
a = 5; 
b = 8; 
c = 12;
 
// 简写
let [a, b, c] = [5, 8, 12];

3. 失当应用三元运算符

We can save 5 lines of code here with ternary (conditional) operator.

咱们能够在这里用三元运算符（也称条件运算符）节俭 5 行代码。

// 惯例写法
let marks = 26; 
let result; 
if(marks >= 30){result = 'Pass';}else{result = 'Fail';} 
// 简写
let result = marks >= 30 ? 'Pass' : 'Fail';

4. 指定默认值

We can use OR(||) short circuit evaluation to assign a default value to a variable in case the expected value found falsy.

咱们能够应用「OR (||) 短路求值」的逻辑，来给定一个默认值。当 || 咱们的期望值是一个「falsy」值的时候，整个表达式的值便会取到咱们给定的默认值。

// 惯例写法
let imagePath; 
let path = getImagePath(); 
if(path !== null && path !== undefined && path !== '') {imagePath = path;} else {imagePath = 'default.jpg';} 

// 简写
let imagePath = getImagePath() || 'default.jpg';

5. AND(&&)短路求值

If you are calling a function only if a variable is true, then you can use AND(&&) short circuit as an alternative for this.

如果你只在一个变量为真的状况下才调用某个函数，那么你能够用「AND(&&)短路求值」的逻辑来代替。

// 惯例写法
if (isLoggedin) {goToHomepage(); 
} 

// 简写
isLoggedin && goToHomepage();

The AND(&&) short circuit shorthand is more useful in React when you want to conditionally render a component. For example:

在 React 中，当你想有条件地渲染某个组件时，能够尝试应用 AND(&&)这种简写形式。例如上面这个例子👇

<div> {this.state.isLoading && <Loading />} </div>

译者注：表达式的值为 0 这种非凡的 falsy 值时，请审慎思考应用

6. 替换两个变量的值

To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.

当咱们想替换两个变量的值时，常常会采取引入第三个变量的办法。其实咱们能够通过数组解构赋值轻松地替换两个变量。

let x = 'Hello', y = 55; 

// 惯例写法，引入第三个变量
const temp = x; 
x = y; 
y = temp; 

// 简写，应用数组解构赋值
[x, y] = [y, x];

7. 善用箭头函数

// 惯例写法
function add(num1, num2) {return num1 + num2;} 

// 简写
const add = (num1, num2) => num1 + num2;

参考「箭头函数」

8. 模板字符串

We normally use + operator to concatenate string values with variables. With ES6 template literals we can do it in a more simple way.

咱们通常应用 + 运算符来连贯字符串和其余类型的变量。有了 ES6 模板字符串，咱们能够用更简略的形式来组合字符串。

// 惯例写法 
console.log('You got a missed call from' + number + 'at' + time); 

// 简写
console.log(`You got a missed call from ${number} at ${time}`);

9. 多行字符串

For multiline string we normally use + operator with a new line escape sequence (\n). We can do it in an easier way by using backticks (`)

对于多行字符串，咱们通常应用 + 操作符和一个新的换行符（\n）拼接实现。其实咱们能够通过应用反引号（`）来更简略地实现。

// 惯例写法
console.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.' ); 

// 简写
console.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.`);

10. 多条件查看

For multiple value matching, we can put all values in array and use indexOf() or includes() method.

对于多值匹配，咱们能够把所有的值放在数组中，应用数组提供的 indexOf() 或includes()办法来简写。

// 惯例写法
if (value === 1 || value === 'one' || value === 2 || value === 'two') {// 执行一些代码} 

// 简写 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {// 执行一些代码}
// 简写 2
if ([1, 'one', 2, 'two'].includes(value)) {// 执行一些代码}

11. 对象属性调配

If the variable name and object key name is same then we can just mention variable name in object literals instead of both key and value. JavaScript will automatically set the key same as variable name and assign the value as variable value.

如果变量名和对象的属性名雷同，那么咱们能够在对象的中只写变量名，而不必同时写出属性名和属性值（变量的值）。JavaScript 会主动将属性名设置为与变量名雷同，并将属性值调配为变量值。

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 

// 惯例写法 
let obj = {firstname: firstname, lastname: lastname}; 

// 简写 
let obj = {firstname, lastname};

12. 字符串（String）转为数字（Number）

There are built in methods like parseInt and parseFloat available to convert a string to number. We can also do this by simply providing a unary operator (+) in front of string value.

有一些内置办法，如 parseInt 和 parseFloat，能够将字符串转换为数字。咱们也能够通过简略地在字符串值后面提供一个一元运算符 + 来实现。

// 惯例写法
let total = parseInt('453'); 
let average = parseFloat('42.6'); 

// 简写
let total = +'453'; 
let average = +'42.6';

13. 多次重复一个字符串

To repeat a string for a specified number of time you can use a for loop. But using the repeat() method we can do it in a single line.

要将一个字符串反复指定的次数，你能够应用 for 循环。但应用 repeat()办法，咱们能够在一行中实现。

// 惯例写法
let str = ''; 
for(let i = 0; i < 5; i ++) {str += 'Hello';} 
console.log(str); // Hello Hello Hello Hello Hello 

// 简写
'Hello'.repeat(5);

Tip: Want to apologize to someone by sending 100 times“sorry”? Try it with repeat() method. If you want to repeat each string in a new line, then add \n to the string.

想对某人说 100 次对不起？试试 repeat() 办法吧。如果你心愿每一个字符串占一行，那么就在字符串结尾增加换行符（\n）。

// 想跟你说 100 声道歉！'sorry\n'.repeat(100);

14. 幂的力量！

We can use Math.pow() method to find the power of a number. There is a shorter syntax to do it with double asterik (**).

咱们能够应用 Math.pow() 办法来求一个数字的幂。有一个更简洁的语法，那就是双星号（**）。

// 惯例写法
const power = Math.pow(4, 3); // 64 

// 简写
const power = 4**3; // 64

15. 双 NOT 位运算符（~~）？

The double NOT bitwise operator is a substitute for Math.floor() method.

双 NOT 位运算符（~~）是 Math.floor() 办法的替代品。

// 惯例写法
const floor = Math.floor(6.8); // 6 

// 简写
const floor = ~~6.8; // 6

Improvement from comment by Caleb:
The double NOT bitwise operator approach only works for 32 bit integers i.e (231)-1 = 2147483647. So for any number higher than 2147483647, bitwise operator (~~) will give wrong results, so recommended to use Math.floor() in such case.

** 感激 Caleb 的揭示：
双 NOT 位运算符办法 只实用于 32 位整数 ，即(2**31)-1=2147483647。所以对于任何大于 2147483647 的数字，位运算符(~~) 会给出谬误的后果，所以倡议在这种状况下应用 Math.floor()。

16. 找出数组中的最大最小值

We can use for loop to loop through each value of array and find the max or min value. We can also use the Array.reduce() method to find the max and min number in array.

咱们能够应用 for 循环来遍历数组，找到最大值或最小值。也能够应用 Array.reduce()办法来寻找数组中的最大和最小值。

But using spread operator we can do it in a single line.

然而应用开展操作符（...）咱们能够，咱们能够用一行代码就实现这个需要。

// 简写
const arr = [2, 8, 15, 4]; 
Math.max(...arr);  // 最大值 15 
Math.min(...arr);  // 最小值 2

17. 对于 For 循环

To loop through an array we normally use the traditional for loop. We can make use of the for…of loop to iterate through arrays. To access the index of each value we can use for…in loop.

要遍历一个数组，咱们通常应用传统的 for 循环。咱们能够利用 for...of 的形式来遍历一个数组。如果要拜访数组每个值的索引，咱们能够应用 for...in 循环。

let arr = [10, 20, 30, 40]; 

// 惯例写法，for 循环
for (let i = 0; i < arr.length; i++) {console.log(arr[i]); 
} 

// 简写

// for...of 循环
for (const val of arr) {console.log(val); 
} 

// for...in 循环
for (const index in arr) {console.log(`index: ${index} and value: ${arr[index]}`); 
}

We can also loop through object properties using for…in loop.

咱们还能够应用 for...in 循环来遍历对象的属性。

let obj = {x: 20, y: 50}; 
for (const key in obj) {console.log(obj[key]); 
}

参考：JavaScript 中遍历对象和数组的几种不同的形式

18. 合并数组

let arr1 = [20, 30]; 

// 惯例写法
let arr2 = arr1.concat([60, 80]); 
// [20, 30, 60, 80] 

// 简写
let arr2 = [...arr1, 60, 80]; 
// [20, 30, 60, 80]

19. 多层次对象的深拷贝

To deep clone a multi-level object, we can iterate through each property and check if the current property contains an object. If yes, then do a recursive call to the same function by passing the current property value (i.e. the nested object).

要对一个多层次的对象实现深拷贝，咱们能够遍历其每个属性，查看以后属性是否蕴含一个对象。如果是，则递归调用同一个函数，并将以后属性值（即嵌套对象）作为函数的参数传递进去。

We can also do it by using JSON.stringify() and JSON.parse() if our object doesn’t contains functions, undefined, NaN or Date as values.

如果咱们的对象不蕴含 函数 、undefined、NaN 或Date等值，咱们也能够应用 JSON.stringify() 和 JSON.parse() 来实现。

If we have single level object i.e no nested object present, then we can deep clone using spread operator also.

如果咱们的对象是单层对象，即没有嵌套对象，那么咱们也能够应用开展操作符（...）进行深拷贝。

let obj = {x: 20, y: {z: 30}}; 

// 惯例写法，递归
const 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); 

// 非凡状况下 (对象中属性值没有函数、undefined 或 NaN 的状况下) 的简写
const cloneObj = JSON.parse(JSON.stringify(obj));

// 单层对象（无嵌套对象）状况下的简写
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

Improvement from comment:
The shorthand technique (JSON.parse(JSON.stringify(obj))) doesn’t work if your object property contains function, undefined or NaN as value. Because when you JSON.stringify the object, the property containing function, undefined or NaN as value gets removed from the object.
So use JSON.parse(JSON.stringify(obj)) when your object contains only strings and numbers.

感激评论区中的揭示：
如果你的对象属性中蕴含 函数 、undefined 或NaN作为属性值时，JSON.parse(JSON.stringify(obj)) 这种简写将会生效。因为当你对对象进行 JSON.stringify 时，蕴含函数、undefined 或 NaN 作为值的属性会从对象中被删除。
所以当你的对象只蕴含字符串和数字时，才能够应用 JSON.parse(JSON.stringify(obj))。

参考：JSON.parse() 和 JSON.stringify()

20. 获取字符串中的某个字符

let str = 'jscurious.com'; 

// 惯例写法
str.charAt(2); // c 

// 简写
str[2]; // c

Some of these shorthand techniques may not seems relevant to use in project but it’s not bad to know some extra techniques.
这些简写小技巧中的一些仿佛不太适宜在我的项目中应用，但晓得总比不晓得强。

Happy coding!

好编码，编好码，编码好！

【附】专有名词总结：