ES6中的几个常用代码

1.属性的简写:

有时候你可能会用到这么一个方法，听说这是ES5的写法，具体会在什么情况下使用，看个人项目中如何使用

function test(a, b) {
  return {a: a,b: b}
}

但是在ES6当中是可以这么优化的。

function test(a, b) {
  return {a,b}
}

2.操作符的使用：(根据数据量大小选择采用)

有时候可能会遇到这样的代码，有这么两个数组

let arr = ['a','b','c','d']
let arr1 = ['e','f']

需要把arr1数组添加到arr当中，方法有很多，其一：循环遍历(循环的方式有多种，就不一一列举了)

arr1.forEach( n => {
   arr.push(n)
})
console.log(arr)

结果：['a','b','c','d','e','f']

其二：还有这种简单的操作，这种就是...操作符的使用了，把两个数组合并为一个新数组。

arr = [...arr,...arr1]

看过大佬的解释说这种数组合并是进行过底层的封装，其释义为babel转译的结果，仔细看过程并不难理解：

function _toConsumableArray(arr) {
　　if (Array.isArray(arr)) { 
　　　　for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { 
　　　　　　arr2[i] = arr[i]; 
　　　　}
　　　　return arr2; 
　　} else { 
　　　　return Array.from(arr); 
　　}
}
arr = [].concat(_toConsumableArray(arr), arr1);

其三：就是通过push使用...操作符

arr.push(...arr1);

这种写法就相当于

arr.push.apply(arr, arr1);

 

基本上操作符的使用方法就是这样子的，但是有一个缺点：

当数据量比较大时，处理能力就较差耗时较长，过于庞大时会发生堆栈溢出，所以选择使用时要注意。

 

有一个相对好的处理方法，就是使用数组合并concat()方法：

arr = arr.concat(arr1)

这种方法在数据量比较小的情况下，与...操作符差异不大，但是数据量比较大的时候就体现出来了它的性能比较好了。

关于concat与...操作符性能比较

 

3.数组中蛮有用的几个方法

假如有这么一个数组：

let arr = [{id:1,num:5},{id:2,num:6},{id:3,num:11},{id:4,num:15},{id:5,num:23}]

3.1 find() -- 查找元素，找不到为undefined

let res = arr.find(item => item.id === 3)
console.log(res)
结果：{id: 3, num: 11}

let res = arr.find(item => item.id === 6)
console.log(res)
结果：undefined

 

3.2 findIndex() -- 查找元素下标索引

let res = arr.findIndex(item => item.id === 2) 
console.log(res,'res')
结果：1

 

some() -- 查找其中一项是否为真

let res = arr.some(item => item.num > 20) 
console.log(res)
结果：true

 

every() -- 查找每一项是否为真

let res = arr.every(item => item.num > 20) 
console.log(res)
结果：false


let res = arr.every(item => item.num > 0) 
console.log(res)
结果：true

 

includes() --查找是否包含某项

let arr = [1,2,3,4,5]
let res = arr.includes(3)
console.log(res)
结果：true