js语句简写大全

• 取整（不四舍五入）

~~a
或
a|0
1
2
3

• 取整（四舍五入）

a+.5|0
1

• 布尔值

!0 // true

!!0  // false
1
2
3

• 字符串连接

''.concat(a, b, c)
1

• 展平数组（在使用嵌套数组时，这是一项非常有用的技术）

const flattenedArray = [].concat(...array);
1

• 日期转数值

let time = +new Date();
1

• 条件判断给变量赋布尔值

if (name === 'XX') {
    flag = true;
} else {
    flag = false;
}

// 等价于
flag = name === 'XX';
1
2
3
4
5
6
7
8

• 三元表达式

if (name === 'XX') {
    age = 20;
} else {
    age = 18;
}

// 等价于
age = name === 'XX' ? 20 : 18;
1
2
3
4
5
6
7
8

• 判断长度不为0

if (arr.length !== 0) {}

// 等价于
if (arr.length) {}
1
2
3
4

• 判断长度为0

if (arr.length === 0) {}

// 等价于
if (!arr.length) {}
1
2
3
4

• includes简化同一条件多种结果判断（个人比较喜欢用）

if (a === 1 || a === 2 || a === 3 || a === 4) {}

// 等价于
if ([1, 2, 3, 4].includes(a)) {}
1
2
3
4

• || 短路运算符设置默认值

let name = person.name || 'XX'
1

• && 短路运算符防止对象不存在报错

let name = person && person.name;

// 等价于
let name = person?.name;
1
2
3
4

• 结构赋初始值

function setData({ a, b = 2 }) {
    this.a = a;
    this.b = b;
}
1
2
3
4

• Object.keys()获取对象键名

let obj = {
    a: 1,
    b: 2
};

let keys = Object.keys(obj); // ['a', 'b']
1
2
3
4
5
6

• Object.values()获取对象键值

let obj = {
    a: 1,
    b: 2
};

let keys = Object.values(obj); // [1, 2]
1
2
3
4
5
6

• forEach()方法遍历数组，不返回新数组

arr.forEach((item, index) => {
    item.name = 'XX';
});
1
2
3

• filter()过滤数组，返回新数组

   let newArr = arr.filter((item, index) => index > 2);
1

• map()对数组中的所有元素批量处理，返回新数组

let newArr = arr.map(item => {
    return Object.assign({}, item, { name: 'XX' });
})
1
2
3

• some()是否有满足条件的元素，返回布尔值

let flag = arr.some((item, index) => item.name === 'XX');
1

• every()数组中的每项是否都满足条件，返回布尔值

let flag = arr.every((item, index) => !!item.name);
1

• reduce()对数组中的每一项执行提供的reducer函数，最后返回汇总结果

let sum = [1, 2, 3, 4, 5].reduce((acc, current) => {
    return acc + current;
}, 0);
1
2
3

• 条件判断语句

// before method
if (color === 'red') {
    switchRedColor();
} else if (color === 'grey') {
    switchGreyColor();
} else if (color === 'yello') {
    switchYellowColor();
} else if(color === 'white') {
    switchWhiteColor();
}

// after method1
switch(color) {
    case 'red':
        switchRedColor();
        break;
    case 'grey':
        switchGreyColor();
        break;
    case 'yello':
        switchYellowColor();
        break;
    case 'white':
        switchWhiteColor();
        break;
}

// after method2
const colors = {
    'red': switchRedColor,
    'grey': switchGreyColor,
    'yellow': switchYellowColor,
    'white': switchWhiteColor
};

for (color in colors) {
    colors[color]();
}

// after method3
const colors = new Map([
    ['red', switchRedColor],
    ['grey', switchGreyColor],
    ['yellow', switchYellowColor],
    ['white', switchWhiteColor]
]);

for (color in colors) {
    colors[color]();
}
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

• 检查对象是否有某属性

let obj = {
    name: 'kingX'
};

if (obj[name]) {}

obj.hasOwnProperty('name');  // true
'name' in obj  // true

obj.hasOwnProperty('valueOf')  // false
'valueOf' in obj  // true
1
2
3
4
5
6
7
8
9
10
11

• 使用indexOf实现contains功能

arr.indexOf(text) > -1

// 等价于
arr.includes(text)

// 等价于
~~!arr.indexOf(text)
1
2
3
4
5
6
7

• 获取DOM元素在父类中的索引

<ul>
    <li></li>
    <li onclick="getIndex()"></li>
</ul>
1
2
3
4

function getIndex(ev) {
    let ev = ev || event;
    let target = ev.target;
    return [].indexOf.call(document.querySelectorAll('li'). target); // 1
}
1
2
3
4
5