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时维度为无限大

//二维数组
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)  // ['张三','李四','王五']

将数组转换未对象

var arr=['a','b','c']

var obj={...arr}

console.log(obj) // {0: "a", 1: "b", 2: "c"}

未完待续