js的幾個牛逼操作

 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時維度為無限大

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