多条件If

在数组中存储多个值,使用数据的includes方法。

1
2
3
4
5
6
7
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
//logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
//logic
}

检查 null/undefined/空

当我们创建新的变量时,有时候需要检查我们引用变量的值是否为null或是undefined,js本身就有一种缩写法能实现这个功能

1
2
3
4
5
6
// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
let test2 = test1;
}
// Shorthand
let test2 = test1 || '';

Nullish合并操作符??

如果左边为null或undefined,则返回右边值。否则,返回左边的值。

1
2
3
4
5
6
const test= null ?? 'default';
console.log(test);
// 将会输出: "default"
const test1 = 0 ?? 2;
console.log(test1);
// 将会输出: 0

给多个变量赋值

1
2
3
4
5
6
7
8
// Longhand
let test1 = 1;
let test2 = 2;
let test3 = 3;
// Longhand-
let test1 = 1, test2 = 2, test3 = 3;
// Shorthand
let [test1, test2, test3] = [1, 2, 3];

判断是否false/null/空/undefined

这是我们工作中常用的缩写表达方式之一,如今它仍然值得被提起。

1
2
3
4
// Longhand
if (test1 === true) or if (test1 !== "") or if (test1 !== null) or if (!(test1 === undefined))
// Shorthand
if (test1)

通过与运算符(&&)调用函数

如果我们只在变量为true的时候调用函数,那么我们就可以运用&&运算符。
Tips: 和 && 原理一样,通过 || 或者! && 可以做到变量为false时调用

1
2
3
4
5
6
//Longhand
if (test1) {
callMethod();
}
//Shorthand
test1 && callMethod();

比较结果的返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Longhand
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe('test');
}
}
let data = checkReturn();
console.log(data); //output test
function callMe(val) {
console.log(val);
}
// Shorthand
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');
};
// Longhand
let test3 = 1;
if (test3 === 1) {
test1();
} else {
test2();
}
// Shorthand
(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
// Longhand
switch (data) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
}

// Shorthand
let data = {
1: test1,
2: test2,
3: test
};
//进行检查 调用
data[1] && data[1]();

十进制指数形式

1
2
3
4
5
// Longhand
for (let i = 0; i < 10000; i++) { ... }

// Shorthand
for (let i = 0; i < 1e4; i++) { ... }

默认参数值

如同C#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Longhand
function add(test1, test2) {
if (test1 === undefined)
test1 = 1;
if (test2 === undefined)
test2 = 2;
return test1 + test2;
}
// Shorthand
function add(test1 = 1, test2 = 2) {
return test1 + test2;
}
// 使用lambda表达式
add = (test1 = 1, test2 = 2) => (test1 + test2);

扩展运算符

拼接数组

1
2
3
4
5
6
// Longhand
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);
// Shorthand
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];

复制数组

1
2
3
4
5
6
// Longhand
const test1 = [1, 2, 3];
const test2 = test1.slice()
// Shorthand
const test1 = [1, 2, 3];
const test2 = [...test1];

文本模板

如同C#,C#中使用$"{变量} {变量}"的,js中使用`${变量} ${变量}`

1
2
3
4
// Longhand
const welcome = 'Hi ' + test1 + ' ' + test2 + '.'
// Shorthand
const welcome = `Hi ${test1} ${test2}`;

当我们在处理代码中的多行字符串问题时,同样可以使用文本模板
它只会在读取到`时才结束。当然,内容中可以使用\`来转义

1
2
3
4
5
6
//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`

ES6对象赋值缩写

属性缩写(同名的话直接取变量名作为键了)

1
2
3
4
5
6
let test1 = 'a'; 
let test2 = 'b';
// Longhand
let obj = {test1: test1, test2: test2};
// Shorthand
let obj = {test1, test2};

方法缩写

1
2
3
4
5
6
7
8
9
10
11
12
// Longhand 
let obj = {
test:function (params) {
//...
}
}
// Shorthand
let obj = {
test(params) {
//...
}
}

字符串转成数字

1
2
3
4
5
6
// Longhand 
let test1 = parseInt('123');
let test2 = parseFloat('12.3');
// Shorthand
let test1 = +'123';
let test2 = +'12.3';

解构赋值缩写法

Destructuring Assignment Shorthand

1
2
3
4
5
6
// Longhand 
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
// Shorthand
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'
},
]
// Longhand
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')
//Shorthand
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
// Longhand
if (type === 'string') {
test1();
}
else if (type === 'number') {
test2();
}
else if (type === 'boolean') {
test3();
}
else {
throw new Error('Invalid value ' + type);
}
// Shorthand
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
// Longhand
if(arr.indexOf(item) > -1) { // 存在
}
if(arr.indexOf(item) === -1) { // 不存在
}
// Shorthand
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); //[ 'test1' , 'test2']
const arr2 = Object.values(data); //[ 'abc', 'cde']

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);

/** 输出
[
[ 'test1', 'abc' ],
[ 'test2', 'cde' ],
[ 'test3', 'efg' ]
]
**/

遍历时候就可以使用

1
2
3
for (const [key, value] of Object.entries(data)) {
console.log(`${key}: ${value}`);
}

双按位运算符

(仅适用于32位整数)

1
2
3
4
// Longhand
Math.floor(1.9) === 1 // true
// Shorthand
~~1.9 === 1 // true

多次重复一个字符串 .repeat()

实体类转换器的时候用到过,非常实用!

1
2
3
4
5
6
7
8
// Longhand 
let test = '';
for(let i = 0; i < 5; i ++) {
test += 'test ';
}
console.log(str); // test test test test test
// Shorthand
'test '.repeat(5);

获取数组中的最大最小值

1
2
3
const arr = [1, 2, 3]; 
Math.max(…arr); // 3
Math.min(…arr); // 1

从字符串中获取字符

1
2
3
4
5
let str = 'abc';
// Longhand
str.charAt(2);
// Shorthand
str[2];

两者的区别
使用string[index]的方式,对于超出字符index范围的,会返回undefined
而使用charAt(index)的方式,对于超出范围的会返回一个空的字符串。
兼容性问题:
string[index]的方式在 IE6~8 下也会返回undefined, 也就是 IE6~8不兼容此方法

指数幂函数的简略表达方式

1
2
3
4
// Longhand 
Math.pow(2,3); // 8
// Shorthand
2**3 // 8