ES6中的数组方法扩展

上一篇文章小编简单介绍了在ES6中，一些常用的方法和一些简单的应用，在这篇文章中，小编将针对ES6中数组常用方法进行扩展，相信经过这篇文章之后，每一位小伙伴下班时间会有所提前，就算从原来的996变成995.9也好。大家也可以关注我的微信公众号，蜗牛全栈。

一、伪数组/类数组：不是真正意义上的数组，含有length属性，不具有数组的方法

let oDiv = document.getElementsByTagName("div")
console.log(oDiv); // HTMLCollection

let oDiv2 = document.getElementsByClassName("xx")
console.log(oDiv2); // HTMLCollection

let oDiv3 = document.querySelectorAll(".xx")
console.log(oDiv3); // NodeList

console.log(oDiv3 instanceof Array); // false
// Uncaught TypeError: oDiv3.push is not a function
// 因为oDiv3不是真正意义上的数组，不能调用数组的push方法
oDiv3.push(123) 

function foo(){
    console.log(arguments) // Arguments(3) [1, "666", true, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    console.log(arguments instanceof Array) // false
}
foo(1,"666",true)

二、将类数组/伪数组转换为数组

1、es5

let oDiv3 = document.querySelectorAll(".xx")
let arr = Array.prototype.slice.call(oDiv3) 
console.log(arr) // 此时arr已经是真正数组，具有push方法
arr.push(123)
console.log(arr) // [123]

2、es6

let arrLike = {
    0:"es6",
    1:"es7",
    2:"es8",
    length:3
}
let arr = Array.from(arrLike)
console.log(arr) // ["es6", "es7", "es8"]
console.log(arr instanceof Array) // true
arr.push("es9")
console.log(arr) // ["es6", "es7", "es8", "es9"]

三、Array.of

let arr = new Array(1,2)
console.log(arr) // [1, 2]
let arr = new Array(3) // 传递一个参数的时候，表示的是数组的个数
console.log(arr) // [empty × 3]

// 实现传递一个参数的时候，直接将该参数作为数组的元素
let arr = Array.of(1,2)
console.log(arr) // [1, 2]
let arr =  Array.of(3)
console.log(arr) // [3]

// 将很多种元素组装成数组
let arr = Array.of(1,true,"666",[1,2,3],{
    name:"lilei"
})
console.log(arr) // 见图片 也就是说这个函数可以把一堆内容组装成一个数组

四、copyWithin：替换数组内元素（个人感觉后面介绍的fill方法更容易理解）

let arr = [1,2,3,4,5]
// 第一个参数 从哪个位置开始替换【必须】
// 第一个参数 从指定位置开始读取元素【非必须】
// 第三个参数，到指定位置位置停止读取元素【非必须】默认到最后
let res = arr.copyWithin(1,3,4) 
console.log(res) // [1,4,3,4,5]

五、fill：填充数组默认值/替换数组内容

1、填充数组默认值

let arr = new Array(3)
arr.fill(7)
console.log(arr) // [7,7,7]

2、替换数组内容

let arr = [1,2,3,4,5]
// 第一个参数表示用指定内容替换成特定内容
// 第二个参数表示从指定位置开始
// 第三个参数表示到指定位置结束
// 如果只传递第一个参数，则将数组内全部替换成指定内容
arr.fill("666",1,3)
console.log(arr) // [1, "666", "666", 4, 5]

六、includes

1、es5中判断数组中是否含有某个对象方法。存在的时候会返回对应元素的index，不存在会返回-1。PS:可以类比小编上一篇文章中提到的find和findIndex

// NaN可以理解成Not A Number 例如在运算中 5-"a" 会返回NaN
let arr = [1,2,3,NaN]
console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(NaN)) // -1 // indexOf 不能检测NaN
console.log(NaN == NaN) // false 在js中NaN不一样

2、includes数组中存在时候，返回true，否则返回false,可以检测NaN是否在数组中。

let arr = [1,2,3,NaN]
console.log(arr.includes(2)) // true
console.log(arr.includes(NaN)) // true  // includes 能检测NaN

ES6中的数组方法扩展

推荐阅读