ES6数组Array整理:比ES5更推荐的使用方法和技巧

原文链接: https://dsx2016.com/?p=692

微信公众号: 大师兄2016

ECMAScript

ECMA Script是ECMA-262标准化的脚本语言的名称。

尽管JavaScript和JScript与ECMAScript兼容，但包含超出ECMA Script的功能。

以下表格按照四个模块分类:

• ECMAScript 1st Edition (ECMA-262)对应初版和ES5之前的版本(仅本文)

• ECMAScript 5.1 (ECMA-262)对应ES5

• ECMAScript 2015 (6th Edition, ECMA-262)对应ES6

• ECMAScript Laster对应ES7/ES8/ES9/ES10等

篇幅所致,Array.prototype.map()简写为map(),以此类推.

ES 1st	ES5	ES6	ES Laster
Array.length	Array.isArray()	Array.from()	includes()
unshift()	indexOf()	Array.of()
concat()	lastIndexOf()	findIndex()
join()	every()	find()
pop()	some()	fill()
push()	forEach()	copyWithin()
reverse()	map()	entries()
shift()	filter()	flat()
slice()	reduce()	flatMap()
sort()	reduceRight()	includes()
splice()		keys()
toLocaleString()		values()
toString()

删除数组的重复项

ES6的使用,有两种方式,都需要先使用创建Set数据结构来去除重复值

let fruits=[`banana`,`orange`,`apple`,`pear`,`grape`,`apple`];

第一种方式,使用Array.from()

let deduplicationFruits=Array.from(new Set(fruits))

第二种方式,使用...扩展运算符(推荐)

let deduplicationFruits=[...new Set(fruits)]

判断数组中是否有给定的值

ES5的使用Array.prototype.indexOf()

let arr=[1,2,NaN]
if (arr.indexOf(1) !== -1) {
  // ...
}
// 注意
[NaN].indexOf(NaN) // -1

ES6的使用Array.prototype.includes() (推荐)

let arr=[1,2,NaN]
arr.includes(1) // true
[NaN].includes(NaN) // true

检测是否为数组

ES5的使用Array.isArray() (推荐),其他方法就不描述了

const arr = [];
const obj = {};
Array.isArray(arr);//true
Array.isArray(obj);//false

浅拷贝和深拷贝

浅拷贝

ES6使用...扩展运算符

注意: 此方法是浅拷贝

let arr1=[1,2,3,{a:123}];
let arr2=[...arr1] 
arr2[0]=5 // arr1[1,2,3,{a:123}] arr2[5,2,3,{a:123}];
arr2[3].a=456 // arr1[1,2,3,{a:456}] arr2[5,2,3,{a:456}];

深拷贝

使用JSON序列化,JSON.parse(JSON.stringify(arr))这种方法比较简单,能够满足一般的场景.

此方法不兼容对象的复杂属性，如set，get，Function等,只兼容JSON格式支持的数据类型.

对于正则表达式类型、函数类型等无法进行深拷贝,并且会直接丢失对应的值

let arr1=[1,2,3,{a:123}]
let arr2=JSON.parse(JSON.stringify(arr1))