优化 JS 条件语句及JS 数组常用方法， ---- 看完绝对对日后开发有用

前言： 日常所说的优化优化、最后我们到底优化了哪些，不如让我们从代码质量开始；个人觉得简洁简化代码其实觉得存在感挺强烈的QAQ

1. 获取URL中 ？后的携带参数； 这是我见过最简洁的了，若有更简洁的请及时留言并附上代码怼我

// 获取URL的查询参数

let params={}

location.search.replace(/([^?&=]+)=([^&]+)/g, (_,k,v) => parmas[k] = v);

cosnole.log(params)  // ?a=b&c=d&e=f  => {a: "b", c: "d", e: "f"}

2. 对多个条件筛选用 Array.includes

// 优化前

function test(fruit) {

  if (fruit == 'apple' || fruit == 'strawberry') {

    console.log('red');

  }

}

// 优化后

function test(fruit) {

  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (redFruits.includes(fruit)) {

    console.log('red');

  }

}

3. 更少的嵌套，尽早返回

// 优化前

function test(fruit, quantity) {

  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (!fruit) throw new Error('No fruit!');

  if (redFruits.includes(fruit)) {
　　if (quantity > ) {

      console.log('big quantity');

    }

  }

}

// 优化后

function test(fruit, quantity) {

  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];

  if (!fruit) throw new Error('No fruit!'); // condition 1: throw error early

  if (!redFruits.includes(fruit)) return; // condition 2: stop when fruit is not redif (quantity > ) {

    console.log('big quantity');

  }

}

4. 使用默认的函数参数和解构

//  优化前

function test(fruit，quantity ) {

 const q = quantity || ;

 console.log ( );

  if (fruit && fruit.name)  {

    console.log (fruit.name);

  } else {

    console.log('unknown');

  }

}

// 优化后

function test({name} = {}，quantity = ) {

  console.log (name || 'unknown');

  console.log (quantity );

}

5. 选择 Map 或对象字面量，而不是 Switch 语句 或者 if else

// 优化前

function test(color) {

  switch (color) {

    case 'red':

      return ['apple', 'strawberry'];

    case 'yellow':

      return ['banana', 'pineapple'];

    case 'purple':

      return ['grape', 'plum'];

    default:

      return [];

  }

}

// 优化后  方式1

  const fruitColor = {

    red: ['apple', 'strawberry'],

    yellow: ['banana', 'pineapple'],

    purple: ['grape', 'plum']

  };

function test(color) {

  return fruitColor[color] || [];

}

// 优化后  方式2

  const fruitColor = new Map()

    .set('red', ['apple', 'strawberry'])

    .set('yellow', ['banana', 'pineapple'])

    .set('purple', ['grape', 'plum']);

function test(color) {

  return fruitColor.get(color) || [];

}

// if... if else... else... 优化方法

const actions = new Map([

  [, () => {

    // ...

  }],

  [, () => {

     // ...

  }],

  [, () => {

     // ...

  }]

])

actions.get(val).call(this)

6.数组 串联（每一项是否都满足）使用 Array.every ； 并联（有一项满足）Array.some   过滤数组   每项设值

// 每一项是否满足

[,,].every(item=>{return item > }) // false

// 有一项满足

[,,].some(item=>{return item > }) // true

// 过滤数组

[,,].filter(item=>{return item > }) // [3]

// 每项设值

[,,].fill(false)  // [false,false,false]

7. 数组去重

Array.from(new Set(arr))

[...new Set(arr)]

8.数组合并

[,,,].concat([,])  // [1,2,3,4,5,6]

[...[,,,],...[,]]  // [1,2,3,4,5,6]

[,,,].push.apply([,,,],[,])  // [1,2,3,4,5,6]

9.数组求和

[,,,].arr.reduce(function (prev, cur) {

return prev + cur;

},) //

10.数组排序

[,,,].sort(); // [1, 2,3,4],默认是升序

[,,,].sort((a, b) => b - a); // [4,3,2,1] 降序

11.数组 判断是否包含值

[,,].includes() //false

[,,].indexOf() //-1 如果存在换回索引

[, , ].find((item)=>item===)) //3 如果数组中无值返回undefined

[, , ].findIndex((item)=>item===)) //2 如果数组中无值返回-1

12.类数组转化为数组

Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)

Array.prototype.slice.apply(arguments)

Array.from(arguments)

[...arguments]

13.对象和数组转化

Object.keys({name:'张三',age:}) //['name','age']

Object.values({name:'张三',age:}) //['张三',14]

Object.entries({name:'张三',age:}) //[[name,'张三'],[age,14]]

14.扁平化n维数组

[,[,]].flat() //[1,2,3]

[,[,,[,]].flat() //[1,2,3,4,5]

[[,,[,[...]].flat(Infinity) //[1,2,3,4...n]

结语： 有不懂或有错误之处欢迎留言指正；希望看后对大家有用

文章部分参考：http://blog.jobbole.com/114671/

优化 JS 条件语句及JS 数组常用方法， ---- 看完绝对对日后开发有用的相关教程结束。