开发人员的生活总是在学习新事物。作为前端开发人员必须知道一些使我们的代码如何更优雅，工作更轻松的技巧。
也许你已经进行了很长时间的JavaScript开发，但有时你可能没有使用不需要解决或编写一些额外代码即可解决问题的最新功能。 这些技术可以帮助你编写干净且优化的JavaScript代码。
1. 多个条件判断
1// long 2if( x === 'a' || x === 'b' || x === 'c' || x === 'd'){ 3 // logic 4} 5 6// short 7if(['a', 'b', 'c', 'd'].includes(x)){ 8 // logic 9}
2. 三目运算符
当我们仅使用一些一对if/esle条件判断时, 可以简单地使用三元运算符来实现.
若有多对if/else条件判断,则不建议使用
1// long 2let flag 3if(x > 10){ 4 flag = true 5}else { 6 flag = false 7} 8 9// short 10let flag = x > 10 ? true : false
3. 变量声明
当我们要声明两个具有共同值或共同类型的变量时,可以使用此简写形式
1// long 2let var1 3let var2 = 1 4 5// short 6let var1, var2 = 1
4. 空/未定义检查和分配默认值
当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为null或未定义, 可以考虑如下实现:
1// long 2if(test1 !== null || test1 !== undefined || test1 !== ""){ 3 let test2 = test1; 4}else { 5 let test2 = '' 6} 7 8// short 9let test2 = test1 || ''
5. 给多个变量赋值
当我们处理多个变量并希望将不同的值分配给不同的变量时，此法非常有用。
1//long 2let test1, test2, test3; 3test1 = 1; 4test2 = 2; 5test3 = 3; 6 7//Short 8let [test1, test2, test3] = [1, 2, 3];
6. 赋值运算符的简写
我们在编程中处理很多算术运算符。这是将运算符分配给JavaScript变量的有用技术之一
1// long 2test1 = test1 + 1; 3test2 = test2 - 1; 4test3 = test3 * 20; 5 6// short 7test1++; 8test2--; 9test3 *= 20;
7. 真值判断
1// long 2if (test1 === true) 3 4// short 5if (test1)
8. 多条件的与/或运算
1//long 2if (test1) { 3 callMethod(); 4} 5 6//short 7test1 && callMethod();
9. forEath
1// long 2for (var i = 0; i < testList.length; i++) 3 4// short 5testList.forEach(item => console.log(item))
10. 比较返回值
1// long 2let test; 3function checkReturn() { 4 if (!(test === undefined)) { 5 return test; 6 } else { 7 return callMe('test'); 8 } 9} 10var data = checkReturn(); 11console.log(data); //output test 12function callMe(val) { 13 console.log(val); 14} 15 16// short 17function checkReturn() { 18 return test || callMe('test'); 19}
11. 箭头函数
1//long 2function add(a, b) { 3 return a + b; 4} 5//short 6const add = (a, b) => a + b;
12. 短函数调用
1// long 2function test1() { 3 console.log('test1'); 4}; 5function test2() { 6 console.log('test2'); 7}; 8var test3 = 1; 9if (test3 == 1) { 10 test1(); 11} else { 12 test2(); 13} 14 15// short 16(test3 === 1? test1:test2)();
13. switch
我们可以将条件保存在键值对象中，并可以根据条件使用。
1// long 2switch (data) { 3 case 1: 4 test1(); 5 break; 6 7 case 2: 8 test2(); 9 break; 10 11 case 3: 12 test(); 13 break; 14 // And so on... 15} 16 17// short 18var data = { 19 1: test1, 20 2: test2, 21 3: test 22}; 23 24data[something] && data[something]();
14. 默认参数
1//long 2function add(test1, test2) { 3 if (test1 === undefined) 4 test1 = 1; 5 if (test2 === undefined) 6 test2 = 2; 7 return test1 + test2; 8} 9 10//short 11add = (test1 = 1, test2 = 2) => (test1 + test2); 12add() //output: 3
15. 参数必传校验
1// long 2function hello(obj){ 3 let {name, age} = obj 4 if(!name){ 5 console.warn('name is null, pls check!') 6 return '' 7 } 8 if(!age){ 9 console.warn('age is null, pls check!') 10 return '' 11 } 12 return `${name}: ${age}` 13} 14 15// short 16function hello(obj){ 17 let {name = required('name'), age = required('age')} = obj 18 return `${name}: ${age}` 19} 20 21function required(key){ 22 console.warn(`${key} is null, pls check!') 23}
16. 扩展运算符
1//long 2const data = [1, 2, 3]; 3const test = [4 ,5 , 6].concat(data); 4 5//short 6const data = [1, 2, 3]; 7const test = [4 ,5 , 6, ...data]; 8console.log(test); // [ 4, 5, 6, 1, 2, 3]
对于克隆, 我们也可以使用扩展运算符
1//long 2const test1 = [1, 2, 3]; 3const test2 = test1.slice() 4 5//short 6const test1 = [1, 2, 3]; 7const test2 = [...test1];
17. 模板字符串
如果您厌倦了在单个字符串中使用+来连接多个变量，可以考虑用这种方式
1//long 2const welcome = 'Hi ' + user + ' ' + name + '.' 3 4//short 5const welcome = `Hi ${user} ${name}`;
18. 对象属性赋值
1let test1 = 'a'; 2let test2 = 'b'; 3//Long 4let obj = {test1: test1, test2: test2}; 5 6//short 7let obj = {test1, test2};
19. 字符串转换成数字
1//Long 2let test1 = parseInt('123'); 3let test2 = parseFloat('12.3'); 4 5//Short 6let test1 = +'123'; 7let test2 = +'12.3';
20. Array.find
当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时，find方法确实很有用。
1const data = [{ 2 type: 'test1', 3 name: 'abc' 4 }, 5 { 6 type: 'test2', 7 name: 'cde' 8 }, 9 { 10 type: 'test1', 11 name: 'fgh' 12 }, 13] 14// long 15function findtest1(name) { 16 for (let i = 0; i < data.length; ++i) { 17 if (data[i].type === 'test1' && data[i].name === name) { 18 return data[i]; 19 } 20 } 21} 22 23//shorthand 24filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh'); 25console.log(filteredData);
21. 多条件判断
如果我们有代码来检查类型，并且基于类型需要调用不同的方法，我们可以选择使用多个else if或进行切换，有没有更好的呢？
1// long 2if (type === 'test1') { 3 test1(); 4} 5else if (type === 'test2') { 6 test2(); 7} 8else if (type === 'test3') { 9 test3(); 10} 11else if (type === 'test4') { 12 test4(); 13} else { 14 throw new Error('Invalid value ' + type); 15} 16 17// short 18const types = { 19 test1: test1, 20 test2: test2, 21 test3: test3, 22 test4: test4 23}; 24 25let func = types[type]; 26(!func) && throw new Error('Invalid value ' + type); func();
22. 索引查找
当我们迭代数组以查找特定值时，我们确实使用indexOf()方法，如果我们找到更好的方法呢？让我们看看这个例子。
1//long 2if(arr.indexOf(item) > -1) { // item found 3} 4if(arr.indexOf(item) === -1) { // item not found 5} 6 7//short 8if(~arr.indexOf(item)) { // item found 9} 10if(!~arr.indexOf(item)) { // item not found 11}
按位~运算符将返回非-1的真实值。取反就像做~一样简单。另外，我们也可以使用include()函数：
1if (arr.includes(item)) { 2// true if the item found 3}
24. Object.entries()
此功能有助于将对象转换为对象数组
1const data = { test1: 'abc', test2: 'cde', test3: 'efg' }; 2const arr = Object.entries(data); 3console.log(arr); 4/** ouput 5 6[ [ 'test1', 'abc' ], 7 [ 'test2', 'cde' ], 8 [ 'test3', 'efg' ] 9] 10 11**/
24. Object.values()
1const data = { test1: 'abc', test2: 'cde' }; 2const arr = Object.values(data); 3console.log(arr); 4/** Output: 5 6[ 'abc', 'cde'] 7 8**/
25. 重复一个字符串多次
要一次又一次地重复相同的字符，我们可以使用for循环并将它们添加到同一循环中，但是如果我们有一个简写方法呢？
1//long 2let test = ''; 3for(let i = 0; i < 5; i ++) { 4 test += 'test '; 5} 6console.log(str); // test test test test test 7 8//short 9'test '.repeat(5);
26. 在数组中查找最大值和最小值
1const arr = [1, 2, 3]; 2Math.max(…arr); // 3 3Math.min(…arr); // 1 4