[譯]7個ES6程式設計小技巧

smallbone發表於2018-05-20
程式設計

1. 交換變數

使用陣列解構來交換變數的值

let a = 'world', b = 'hello';
[a, b] = [b, a];
console.log(a);  // hello
console.log(b); // world
複製程式碼

2. Async/Await和解構

將陣列解構和async/await以及promise結合可以使複雜的資料流變得簡單

const [user, account] = await Promise.all([
	fetch('/user'),
	fetch('/account')
]);
複製程式碼

3. Debugging

console.log更酷的使用方法：

const a = 5, b = 6, c = 7;
console.log({a, b, c});
// 輸出
//{
//	a: 5,
//	b: 6,
//	c: 7
//}
複製程式碼

4. 一行解決

對於某些陣列操作，可以使用更為簡潔的語法

//找出最大值
const max = (arr) => Math.max(...arr);
max([123, 321, 23]); //輸出 321

//陣列求和
const sum = (arr) => arr.reduce((a, b) => (a + b), 0);
sum([1, 2, 3, 4]); //輸出 10
複製程式碼

5. 陣列合並

擴充套件操作符可以用來代替concat：

const one = ['a', 'b', 'c'];
const two = ['d', 'e', 'f'];
const three = ['g', 'h', 'i'];

//常規方法1
const result = one.concat(two, three);

//常規方法2
const result = [].concat(one, two, three);

//新方法
const result = [...one, ...two, ...three];
複製程式碼

6. 克隆

const obj = { ...oldObj };
const arr = [ ...oldArr ];
複製程式碼

注：以上方法建立的是一個淺克隆

7. 命名引數

通過使用解構操作符讓函式更易讀：

const getStuffNotBad = (id, force, verbose) => {
	...
}
const getStuffAwesome = ({ id, name, force, verbose } => {
	...
})

//這種方法讓人一時不知道這個幾個參數列示的是什麼
getStuffNotBad(150, true, true);

//引數意思一目瞭然
getStuffAwesome({ id: 150, force: true, verbose: true });
複製程式碼

閱讀原文

相關文章