1.條件語句的優化
// 根據顏色找出對應的水果 // bad function test(color) { switch (color) { case 'red': return ['apple', 'strawberry']; case 'yellow': return ['banana', 'pineapple']; case 'purple': return ['grape', 'plum']; default: return []; } } test('yellow'); // ['banana', 'pineapple']
// good const fruitColor = { red: ['apple', 'strawberry'], yellow: ['banana', 'pineapple'], purple: ['grape', 'plum'] }; function test(color) { return fruitColor[color] || []; }
// better const fruitColor = new Map() .set('red', ['apple', 'strawberry']) .set('yellow', ['banana', 'pineapple']) .set('purple', ['grape', 'plum']); function test(color) { return fruitColor.get(color) || []; }
2.浮點數轉整數
如果希望將浮點數轉換為整數，可以使用Math.floor()、Math.ceil()或Math.round()。但是還有一種更快的方法可以使用|(位或運算符)將浮點數截斷為整數。
console.log(23.9 | 0); // Result: 23 console.log(-23.9 | 0); // Result: -23
|的行為取決於處理的是正數還是負數，所以最好只在確定的情況下使用這個快捷方式。
如果n為正，則n | 0有效地向下舍入。如果n為負數，則有效地向上舍入。更准確地說，此操作將刪除小數點后面的任何內容，將浮點數截斷為整數。
你可以使用~~來獲得相同的舍入效果，如上所述，實際上任何位操作符都會強制浮點數為整數。這些特殊操作之所以有效，是因為一旦強制為整數，值就保持不變。
3.es6數組去重
const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // Result: [1, 2, 3, 5]
此技巧適用於包含基本類型的數組：undefined，null，boolean，string和number。（如果你有一個包含對象，函數或其他數組的數組，你需要一個不同的方法！）
4.扁平化n維數組
[1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]]].flat(3) //[1,2,3,4,5] [1,[2,3,[4,5]]].toString() //'1,2,3,4,5' [1[2,3,[4,5[...]]]].flat(Infinity) //[1,2,3,4...n]
Array.flat(n)是ES10扁平數組的api,n表示維度,n值為Infinity時維度為無限大
//二維數組
const arr = [1, 2, [3, 4]]; var newArr = [].concat(...arr); // [1, 2, 3, 4]
5.排序
[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默認是升序 [1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序
sort是js內置的排序方法,參數為一個函數
最大值
Math.max(...[1,2,3,4]) //4 Math.max.apply(this,[1,2,3,4]) //4 [1,2,3,4].reduce( (prev, cur,curIndex,arr)=> { return Math.max(prev,cur); },0) //4
Math.max()是Math對象內置的方法,參數是字符串;reduce是ES5的數組api,參數有函數和默認初始值;- 函數有四個參數,
pre(上一次的返回值),cur(當前值),curIndex(當前值索引),arr(當前數組)
求和
[1,2,3,4].reduce(function (prev, cur) { return prev + cur; },0) //10
合並
[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6] [...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6] [1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]
判斷是否包含值
[1,2,3].includes(4) //false [1,2,3].indexOf(4) //-1 如果存在換回索引 [1, 2, 3].find((item)=>item===3)) //3 如果數組中無值返回undefined [1, 2, 3].findIndex((item)=>item===3)) //2 如果數組中無值返回-1 includes(),find(),findIndex()是ES6的api
類數組轉化
Array.prototype.slice.call(arguments) //arguments是類數組(偽數組) Array.prototype.slice.apply(arguments) Array.from(arguments) [...arguments]
- 類數組:表示有
length屬性,但是不具備數組的方法 call,apply:是改變slice里面的this指向arguments,所以arguments也可調用數組的方法Array.from是將類似數組或可迭代對象創建為數組...是將類數組擴展為字符串,再定義為數組
對象和數組轉化
Object.keys({name:'張三',age:14}) //['name','age']
Object.values({name:'張三',age:14}) //['張三',14]
Object.entries({name:'張三',age:14}) //[[name,'張三'],[age,14]]
Object.fromEntries([name,'張三'],[age,14]) //ES10的api,Chrome不支持 , firebox
從數組中刪除虛值
在某些情況下， 我們想從數組中刪除虛值。 虛值是 JavaScript 中的值為FALSE的值。 JavaScript 中只有六個虛值，它們是：
- undefined
- null
- NaN
- 0
- '' (空字符)
- false
過濾這些虛值的最簡單方法是使用下面的函數：
myArray.filter(Boolean) [1,'',2,0,null,NaN,3,false].filter(Boolean) //[1, 2, 3]
合並多個對象
實際需求中，我們經常需要合並多個對照，快速的做法可以像下面這么做：
const user = { name: 'John Ludwig', gender: 'Male' } const college = { primary: 'Mani Primary School', secondary: 'Lass Secondary School' } const skills = { programming: 'Extreme', swimming: 'Average', sleeping: 'Pro' } const summary = {...user, ...college, ...skills}
取數組對象中的某個屬性值
var arr = [ {name:'張三',age:10}, {name:'李四',age:20}, {name:'王五',age:30}, ] var obj = Array.from(arr,({name})=>name) console.log(obj) // ['張三','李四','王五']
//第二種
let arr2 = arr.map(item => {
return item.name
})
console.log(arr2) // ['張三','李四','王五']
將數組轉換未對象
var arr=['a','b','c'] var obj={...arr} console.log(obj) // {0: "a", 1: "b", 2: "c"}
未完待續