上一篇文章小编简单介绍了在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