关于javascript: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方![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

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据