乐趣区

关于javascript:ES6中的数组方法扩展

jiezi

上一篇文章小编简略介绍了在 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 方![image.png]

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
退出移动版