1. 刪除數(shù)組尾部元素
一個簡單方法就是改變數(shù)組的length值:
const?arr?=?[11,?22,?33,?44,?55,?66];
// truncanting
arr.length?=?3;
console.log(arr);?//=> [11, 22, 33]
// clearing
arr.length?=?0;
console.log(arr);?//=> []
console.log(arr[2]);?//=> undefined
2. 使用對象解構(gòu)(object destructuring)來模擬命名參數(shù)
如果需要將一系列可選項作為參數(shù)傳入函數(shù),你很可能會使用對象(Object)來定義配置(Config)虚青。
doSomething({?foo:?'Hello',?bar:?'Hey!',?baz:?42?});
function?doSomething(config)?{
??const?foo?=?config.foo?!==?undefined???config.foo?:?'Hi';
??const?bar?=?config.bar?!==?undefined???config.bar?:?'Yo!';
??const?baz?=?config.baz?!==?undefined???config.baz?:?13;
??// ...
}
不過這是一個比較老的方法了,它模擬了 JavaScript 中的命名參數(shù)。
在 ES 2015 中,你可以直接使用對象解構(gòu):
function?doSomething({?foo?=?'Hi',?bar?=?'Yo!',?baz?=?13?})?{
??// ...
}
讓參數(shù)可選也很簡單:
function?doSomething({?foo?=?'Hi',?bar?=?'Yo!',?baz?=?13?}?=?{})?{
??// ...
}
3. 使用對象解構(gòu)來處理數(shù)組
可以使用對象解構(gòu)的語法來獲取數(shù)組的元素:
const?csvFileLine?=?'1997,John Doe,US,john@doe.com,New York';
const?{?2:?country,?4:?state?}?=?csvFileLine.split(',');
4. 在 Switch 語句中使用范圍值
可以這樣寫滿足范圍值的語句:
function?getWaterState(tempInCelsius)?{
??let?state;
??switch?(true)?{
????case?(tempInCelsius??0):
??????state?=?'Solid';
??????break;
????case?(tempInCelsius?>?0?&&?tempInCelsius??100):
??????state?=?'Liquid';
??????break;
????default:
??????state?=?'Gas';
??}
??return?state;
}
5. await 多個 async 函數(shù)
在使用 async/await 的時候护戳,可以使用 Promise.all 來 await 多個 async 函數(shù)
await?Promise.all([anAsyncCall(),?thisIsAlsoAsync(),?oneMore()])
6. 創(chuàng)建 pure objects
你可以創(chuàng)建一個 100% pure object代嗤,它不從Object中繼承任何屬性或則方法(比如constructor, toString()等)
const?pureObject?=?Object.create(null);
console.log(pureObject);?//=> {}
console.log(pureObject.constructor);?//=> undefined
console.log(pureObject.toString);?//=> undefined
console.log(pureObject.hasOwnProperty);?//=> undefined
7. 格式化 JSON 代碼
JSON.stringify除了可以將一個對象字符化,還可以格式化輸出 JSON 對象
const?obj?=?{
??foo:?{?bar:?[11,?22,?33,?44],?baz:?{?bing:?true,?boom:?'Hello'?}?}
};
// The third parameter is the number of spaces used to
// beautify the JSON output.
JSON.stringify(obj,?null,?4);
// =>"{
// =>????"foo": {
// =>????????"bar": [
// =>????????????11,
// =>????????????22,
// =>????????????33,
// =>????????????44
// =>????????],
// =>????????"baz": {
// =>????????????"bing": true,
// =>????????????"boom": "Hello"
// =>????????}
// =>????}
// =>}"
8. 從數(shù)組中移除重復(fù)元素
通過使用集合語法和 Spread 操作缭付,可以很容易將重復(fù)的元素移除:
const?removeDuplicateItems?=?arr?=>?[...new Set(arr)];
removeDuplicateItems([42,?'foo',?42,?'foo',?true,?true]);
//=> [42, "foo", true]
9. 平鋪多維數(shù)組
使用 Spread 操作平鋪嵌套多維數(shù)組:
const?arr?=?[11,?[22,?33],?[44,?55],?66];
const?flatArr?=?[].concat(...arr);?//=> [11, 22, 33, 44, 55, 66]
不過上面的方法僅適用于二維數(shù)組,但是通過遞歸循未,就可以平鋪任意維度的嵌套數(shù)組了:
function?flattenArray(arr)?{
??const?flattened?=?[].concat(...arr);
??return?flattened.some(item?=>?Array.isArray(item))??
????flattenArray(flattened)?:?flattened;
}
const?arr?=?[11,?[22,?33],?[44,?[55,?66,?[77,?[88]],?99]]];
const?flatArr?=?flattenArray(arr);
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
希望這些小技巧能幫助你寫好 JavaScript?