多条件If 在数组中存储多个值,使用数据的includes方法。
1 2 3 4 5 6 7 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl' ) { } if (['abc' , 'def' , 'ghi' , 'jkl' ].includes(x)) { }
检查 null/undefined/空 当我们创建新的变量时,有时候需要检查我们引用变量的值是否为null
或是undefined
,js本身就有一种缩写法能实现这个功能
1 2 3 4 5 6 if (test1 !== null || test1 !== undefined || test1 !== '' ) { let test2 = test1; } let test2 = test1 || '' ;
Nullish合并操作符??
如果左边为null或undefined
,则返回右边值。否则,返回左边的值。
1 2 3 4 5 6 const test= null ?? 'default' ;console .log(test);const test1 = 0 ?? 2 ;console .log(test1);
给多个变量赋值 1 2 3 4 5 6 7 8 let test1 = 1 ;let test2 = 2 ;let test3 = 3 ;let test1 = 1 , test2 = 2 , test3 = 3 ;let [test1, test2, test3] = [1 , 2 , 3 ];
判断是否false/null/空/undefined 这是我们工作中常用的缩写表达方式之一,如今它仍然值得被提起。
1 2 3 4 if (test1 === true ) or if (test1 !== "" ) or if (test1 !== null ) or if (!(test1 === undefined ))if (test1)
通过与运算符(&&
)调用函数 如果我们只在变量为true的时候调用函数,那么我们就可以运用&&
运算符。 Tips: 和 &&
原理一样,通过 ||
或者! &&
可以做到变量为false时调用
1 2 3 4 5 6 if (test1) { callMethod(); } test1 && callMethod();
比较结果的返回 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let test;function checkReturn ( ) { if (!(test === undefined )) { return test; } else { return callMe('test' ); } } let data = checkReturn();console .log(data); function callMe (val ) { console .log(val); } function checkReturn ( ) { return test || callMe('test' ); }
利用三元运算符调用函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function test1 ( ) { console .log('test1' ); }; function test2 ( ) { console .log('test2' ); }; let test3 = 1 ;if (test3 === 1 ) { test1(); } else { test2(); } (test3 === 1 ? test1:test2)();
switch缩写 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 switch (data) { case 1 : test1(); break ; case 2 : test2(); break ; case 3 : test(); break ; } let data = { 1 : test1, 2 : test2, 3 : test }; data[1 ] && data[1 ]();
十进制指数形式 1 2 3 4 5 for (let i = 0 ; i < 10000 ; i++) { ... }for (let i = 0 ; i < 1e4 ; i++) { ... }
默认参数值 如同C#
1 2 3 4 5 6 7 8 9 10 11 12 13 14 function add (test1, test2 ) { if (test1 === undefined ) test1 = 1 ; if (test2 === undefined ) test2 = 2 ; return test1 + test2; } function add (test1 = 1 , test2 = 2 ) { return test1 + test2; } add = (test1 = 1 , test2 = 2 ) => (test1 + test2);
扩展运算符 拼接数组 1 2 3 4 5 6 const data = [1 , 2 , 3 ];const test = [4 ,5 , 6 ].concat(data);const data = [1 , 2 , 3 ];const test = [4 ,5 , 6 , ...data];
复制数组 1 2 3 4 5 6 const test1 = [1 , 2 , 3 ];const test2 = test1.slice()const test1 = [1 , 2 , 3 ];const test2 = [...test1];
文本模板 如同C#,C#中使用$"{变量} {变量}"
的,js中使用`${变量} ${变量}`
1 2 3 4 const welcome = 'Hi ' + test1 + ' ' + test2 + '.' const welcome = `Hi ${test1} ${test2} ` ;
当我们在处理代码中的多行字符串问题时,同样可以使用文本模板 它只会在读取到`
时才结束。当然,内容中可以使用\`
来转义
1 2 3 4 5 6 const data = 'abc abc abc abc abc abc\n\t' + 'test test,test test test test\n\t' const data = `abc abc abc abc abc abc test test,test test test test`
ES6对象赋值缩写 属性缩写(同名的话直接取变量名作为键了) 1 2 3 4 5 6 let test1 = 'a' ; let test2 = 'b' ;let obj = {test1 : test1, test2 : test2}; let obj = {test1, test2};
方法缩写 1 2 3 4 5 6 7 8 9 10 11 12 let obj = { test :function (params ) { } } let obj = { test (params ) { } }
字符串转成数字 1 2 3 4 5 6 let test1 = parseInt ('123' ); let test2 = parseFloat ('12.3' ); let test1 = +'123' ; let test2 = +'12.3' ;
解构赋值缩写法 Destructuring Assignment Shorthand
1 2 3 4 5 6 const test1 = this .data.test1;const test2 = this .data.test2;const test2 = this .data.test3;const { test1, test2, test3 } = this .data;
Array.find 当我们有一个数组,并且我们需要根据对象的属性来查找特定的对象时,这个方法非常有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 const data = [ { type : 'test1' , name : 'abc' }, { type : 'test2' , name : 'cde' }, { type : 'test1' , name : 'fgh' }, ] function find (type,name ) { for (let i = 0 ; i < data.length; ++i) { if (data[i].type === type && data[i].name === name) { return data[i]; } } } let filteredData = find('test1' ,'fgh' )let filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh' );
根据类型执行不同方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 if (type === 'string' ) { test1(); } else if (type === 'number' ) { test2(); } else if (type === 'boolean' ) { test3(); } else { throw new Error ('Invalid value ' + type); } let types = { 'string' : test1, 'number' : test2, 'boolean' : test3, }; let func = types[type];(!func) && throw new Error ('Invalid value ' + type); func();
按位非和indexOf缩写法 1 2 3 4 5 6 7 8 9 10 if (arr.indexOf(item) > -1 ) { } if (arr.indexOf(item) === -1 ) { } if (~arr.indexOf(item)) { } if (!~arr.indexOf(item)) { }
除了-1以外使用bitwise(~)
操作符都可以返回true
。我们也可以用includes()
函数来替代它。
1 2 if (arr.includes(item)) { }
Object.keys()和Object.values() 没什么好说的,就是取键和值
1 2 3 const data = { test1 : 'abc' , test2 : 'cde' };const arr1 = Object .keys(data); const arr2 = Object .values(data);
Object.entries() 对象转数组MDN上的详解
1 2 3 4 5 6 7 8 9 10 const data = { test1 : 'abc' , test2 : 'cde' , test3 : 'efg' };const arr = Object .entries(data);
遍历时候就可以使用
1 2 3 for (const [key, value] of Object .entries(data)) { console .log(`${key} : ${value} ` ); }
双按位运算符 (仅适用于32位整数)
1 2 3 4 Math .floor(1.9 ) === 1 ~~1.9 === 1
多次重复一个字符串 .repeat() 做实体类转换器 的时候用到过,非常实用!
1 2 3 4 5 6 7 8 let test = '' ; for (let i = 0 ; i < 5 ; i ++) { test += 'test ' ; } console .log(str); 'test ' .repeat(5 );
获取数组中的最大最小值 1 2 3 const arr = [1 , 2 , 3 ]; Math .max(…arr); Math .min(…arr);
从字符串中获取字符 1 2 3 4 5 let str = 'abc' ;str.charAt(2 ); str[2 ];
两者的区别 使用string[index]
的方式,对于超出字符index范围的,会返回undefined 而使用charAt(index)的方式,对于超出范围的会返回一个空的字符串。 兼容性问题:string[index]
的方式在 IE6~8 下也会返回undefined
, 也就是 IE6~8不兼容此方法 。
指数幂函数的简略表达方式