精致js代码

未来持续更新ing

1. 箭头函数 => 返回 map 对象

1
2
3
4
5
6
7
// 一般的写法
const makeMap = () => {
return {key: 'value'};
};

// 简洁的写法
const makeMap = () => ({key: 'value'});

2. 对象属性名不确定,需要动态的传入

1
2
3
4
5
6
7
8
9
// 一般的写法
const makeMap = (key, value) => {
const obj = {};
obj[key] = value;
return obj;
};

// 简洁的写法
const makeMap = (key, value) => ({[key]: value});

3. 复制一个对象,并重写其中的一些属性

1
2
3
4
5
6
7
8
const source = {hello: 'hello', hi: 'hi'};

// 一般的写法
const target = Object.assign({}, source);
target.hello = 'hello everyone';

// 简洁的写法
const target = {...source, hello: 'hello everyone'};

4. 数组解构为函数参数

1
2
3
4
5
6
7
8
const arr = [1, 2, 3];
const plus = (...args) => args.reduce((a, b) => a + b);

// 一般的写法
plus(arr[0], arr[1], arr[2], 4, 5);

// 简洁的写法
plus(...arr, 4, 5);

5. 向一个数组添加另一数组的所有元素

1
2
3
4
5
6
7
8
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 一般的写法
arr1 = arr1.concat(arr2);

// 简洁的写法
arr1.push(...arr2);

6. 回调函数简写

1
2
3
4
5
6
7
// 一般的写法
promise.catch(e => {
console.log(e);
});

// 简洁的写法
promise.catch(console.log);

7. 多级箭头函数 =>

1
2
3
4
5
6
7
8
9
// 一般的写法
const makeTimesFunc = times => {
return value => {
return value * times;
};
};

// 简洁的写法
const makeTimesFunc = times => value => value * times;

8. 从右向左函数复式调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 // 不确定元素个数,举例 3 个
const fnCollection = [str => `${str} | fisrt`, str => `${str} | second`, str => `${str} | third`];

// 一般的写法
const addManySuffixes = str => {
let result = str;
for(let i = fnCollection.length - 1; i > -1; i -= 1)
result = fnCollection[i](result);

return result;
};

// 简洁的写法
const addManySuffixes = fnCollection.reduce((a, b) => str => a(b(str)));
// 可以把 str 参数扩展成任意参数
const addManySuffixes = fnCollection.reduce((a, b) => (...args) => a(b(...args)));