1、 带有多个条件的 if 语句
把多个值放在一个数组中，然后调用数组的 includes 方法。
//longhand
if(x ==='abc'|| x ==='def'|| x ==='ghi'|| x ==='jkl') {//logic}
//shorthand
if(['abc','def','ghi','jkl'].includes(x)) {//logic}
2、简化 if true...else
对于不包含大逻辑的 if-else 条件，可以使用下面的快捷写法。我们可以简单地使用三元运算符来实现这种简化。
// Longhand
let test: boolean;
if(x > 100) {test=true;}else{test=false;}
// Shorthand
let test= (x > 10) ?true:false;//或者我们也可以直接用let test= x > 10;console.log(test);
如果有嵌套的条件，可以这么做。
let x =300,
test2 = (x >100) ?'greater than 100': (x <50) ?'less 50':'between 50 and 100';
console.log(test2);// "greater than 100"
3、声明变量
当我们想要声明两个具有相同的值或相同类型的变量时，可以使用这种简写。
//Longhand
let test1;
let test2 =1;
//Shorthand
let test1, test2 =1;
4、null、undefined 和空值检查
当我们创建了新变量，有时候想要检查引用的变量是不是为非 null 或 undefined。
JavaScript 确实有一个很好的快捷方式来实现这种检查。
// Longhand
if(test1 !==null|| test1 !==undefined|| test1 !=='') {let test2 = test1;}
// Shorthand
let test2 = test1 ||'';
5、 null 检查和默认赋值
let test1 =null,
test2 = test1 ||'';
console.log("null check", test2);// 输出 ""
6、 undefined 检查和默认赋值
let test1 =undefined,
test2 = test1 ||'';
console.log("undefined check", test2);// 输出 ""
一般值检查
let test1 ='test',
test2 = test1 ||'';
console.log(test2);// 输出: 'test'
另外，对于上述的 4、5、6 点，都可以使用?? 操作符。
如果左边值为 null 或 undefined，就返回右边的值。默认情况下，它将返回左边的值。
const test=null??'default';
console.log(test);// 输出结果: "default"
const test1 =0??2;
console.log(test1);// 输出结果: 0
7、给多个变量赋值
当我们想给多个不同的变量赋值时，这种技巧非常有用。
//Longhand
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
//Shorthand
let [test1, test2, test3] = [1, 2, 3];
8、简便的赋值操作符
在编程过程中，我们要处理大量的算术运算符。这是 JavaScript 变量赋值操作符的有用技巧之一。
// Longhand
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 20;
// Shorthand
test1++;
test2--;
test3 *= 20;
9、 if 判断值是否存在
这是我们都在使用的一种常用的简便技巧，在这里仍然值得再提一下。
// Longhand
if(test1 ===true)or if(test1 !=="")or if(test1 !==null)// Shorthand //检查空字符串、null或者undefined
if(test1)
注意：如果 test1 有值，将执行 if 之后的逻辑，这个操作符主要用于 null 或 undefinded 检查。
10、 用于多个条件判断的 && 操作符
如果只在变量为 true 时才调用函数，可以使用 && 操作符。
//Longhand
if(test1) { callMethod(); }
//Shorthand
test1 &&callMethod();
11、for each 循环
这是一种常见的循环简化技巧。
// Longhand
for(vari =0; i < testData.length; i++)
// Shorthand
for(letiintestData) or for(letioftestData)
遍历数组的每一个变量。
function testData(element, index, array){console.log('test['+ index +'] = '+ element);}
[11,24,32].forEach(testData);// logs: test[0] = 11, test[1] = 24, test[2] = 32
12、比较后返回
我们也可以在 return 语句中使用比较，它可以将 5 行代码减少到 1 行。
// Longhand
let test;functioncheckReturn(){
if(!(test ===undefined)) {returntest;}else{returncallMe('test'); }}
var data = checkReturn();
console.log(data);//output test
functioncallMe(val){console.log(val);}
// Shorthand
function checkReturn(){returntest || callMe('test');}
13、 箭头函数
//Longhand
function add(a, b){returna + b;}
//Shorthand
const add =(a, b) =>a + b;
更多例子：
function callMe(name){console.log('Hello', name);}
callMe =name=>console.log('Hello', name);
14、简短的函数调用
我们可以使用三元操作符来实现多个函数调用。
// Longhand
function test1(){console.log('test1');};
functiontest2(){console.log('test2');};
var test3 =1;
if(test3 ==1) { test1();}else{ test2();}
// Shorthand(test3 ===1? test1:test2)();
15、switch 简化
我们可以将条件保存在键值对象中，并根据条件来调用它们。
// Longhand
switch (data) {
case 1: test1();
break;
case 2: test2();
break;
case 3: test();
break;
// ...}
// Shorthand
var data = {
1: test1,
2: test2,
3: test};
data[something] && data[something]();
16、隐式返回
通过使用箭头函数，我们可以直接返回值，不需要 return 语句。
//longhand
function
calculate(diameter){
return Math.PI * diameter
}
//shorthand
calculate =diameter=>(Math.PI * diameter;)
17、 指数表示法
// Longhand
for(vari =0; i <10000; i++) { ... }
// Shorthand
for(vari =0; i <1e4; i++) {
18、默认参数值
//Longhand
function add(test1, test2){
if(test1 ===undefined)
test1 =1;
if(test2 ===undefined)
test2 =2;
return test1 + test2;
}
//shorthand
add =(test1 =1, test2 =2) =>(test1 + test2);
add()//输出结果: 3
19、延展操作符简化
//longhand
// 使用concat连接数组
const data= [1,2,3];
const test = [4,5,6].concat(data);
//shorthand
// 连接数组
const data= [1,2,3];
consttest = [4,5,6, ...data];
console.log(test);// [ 4, 5, 6, 1, 2, 3]
我们也可以使用延展操作符进行克隆。
//longhand
// 克隆数组
const test1 = [1,2,3];
const test2 = test1.slice()
//shorthand//克隆数组
const test1 = [1,2,3];
const test2 = [...test1];
20、模板字面量
如果你厌倦了使用 + 将多个变量连接成一个字符串，那么这个简化技巧将让你不再头痛。
//longhand
const welcome ='Hi '+ test1 +' '+ test2 +'.'
//shorthand
const welcome =`Hi${test1}${test2}`;
21、跨行字符串
当我们在代码中处理跨行字符串时，可以这样做。
//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`
22、对象属性赋值
let test1 ='a';
let test2 ='b';
//Longhand
let obj = {test1: test1,test2: test2};
//Shorthand
let obj = {test1, test2};
23、将字符串转成数字
//Longhand
let test1 =parseInt('123');
let test2 =parseFloat('12.3');
//Shorthand
let test1 = +'123';
let test2 = +'12.3';
24、解构赋值
//longhand
const test1 =this.data.test1;
const test2 =this.data.test2;
const test2 =this.data.test3;
//shorthand
const{ test1, test2, test3 } =this.data;
25、数组 find 简化
当我们有一个对象数组，并想根据对象属性找到特定对象，find 方法会非常有用。
const data= [{
type:'test1',name:'abc'
}, {
type:'test2',name:'cde'
}, {
type:'test1',name:'fgh'
},]
function findtest1(name) {
for(let i =0; i data.type ==='test1'&&data.name ==='fgh');
console.log(filteredData);
// { type: 'test1', name: 'fgh' }
26、条件查找简化
如果我们要基于不同的类型调用不同的方法，可以使用多个 else if 语句或 switch，但有没有比这更好的简化技巧呢？
// Longhand
if(type==='test1') {
test1();
}else if(type==='test2') {
test2();
}elseif(type==='test3') {
test3();
}elseif(type==='test4') {
test4();
}else{
thrownewError('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();
27、indexOf 的按位操作简化
在查找数组的某个值时，我们可以使用 indexOf() 方法。但有一种更好的方法，让我们来看一下这个例子。
//longhand
if(arr.indexOf(item) >-1) {
// item found
}
if(arr.indexOf(item) ===-1) {
// item not found
}
//shorthand
if(~arr.indexOf(item)) {
// item found
}
if(!~arr.indexOf(item)) {
// item not found
}
按位 ( ~ ) 运算符将返回 true（-1 除外），反向操作只需要!~。另外，也可以使用 include() 函数。
if(arr.includes(item)) {//如果找到项目，则为true}
28、Object.entries()
这个方法可以将对象转换为对象数组。
const data= { test1:'abc', test2:'cde', test3:'efg'};
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ ['test1','abc'],['test2','cde'],['test3','efg']
]
**/
29、Object.values()
这也是 ES8 中引入的一个新特性，它的功能类似于 Object.entries()，只是没有键。
const data = {test1:'abc',test2:'cde'};
const arr =Object.values(data);
console.log(arr);
/** Output:[ 'abc', 'cde']**/
30、双重按位操作
// Longhand
Math.floor(1.9) ===1// true
// Shorthand
~~1.9===1// true
31、重复字符串多次
为了重复操作相同的字符，我们可以使用 for 循环，但其实还有一种简便的方法。
//longhand
lettest='';
for(let i = 0; i < 5; i ++) {
test+='test ';
}
console.log(str); //test test test test test
//shorthand
'test '.repeat(5);
32、查找数组的最大值和最小值
const arr = [1,2,3];
Math.max(…arr);// 3
Math.min(…arr);// 1
33、获取字符串的字符
let str ='abc';
//Longhand
str.charAt(2);// c
//Shorthand
str[2];// c
34、 指数幂简化
//longhand
Math.pow(2,3);// 8
//shorthand
2**3// 8
本文完~
