登录
原创

ES6-数组的扩展

发布于 2021-10-11 阅读 29
  • 前端
  • JavaScript
  • ECMAScript 6
原创

伪数组(类数组)

伪数组(类数组)和 数组类似,也有长度、数字形式的键名、键值,但是不能使用 数组的一些方法,如 push()

document.getElementsByTagName(‘标签名’)
document.getElementsByClassName(‘类名’)
document.querySelectorAll()
这几个都是获取到的伪数组

image.png

真正的数组有 push() 方法,但是伪数组不能使用 push(),会报错:

image.png

判断是否为数组:检测对象 instanceof Array

eg:console.log(data instanceof Array)
如果data是数组返回结果 true
否则,返回结果 false

伪数组(类数组)转化成 数组 的方法

ES5 伪数组(类数组)转化成 数组方法:Array.prototype.slice.call(要转化的对象名)

ES6 新增伪数组(类数组)转化成 数组方法:Array.from(要转化的对象名)

代码示例

let data = {
    0: '苹果',
    1: '芒果',
    2: '榴莲',
    3: '火龙果',
    length: 4
}
console.log(data instanceof Array)
console.log(data);

// ES5 伪数组 转化 数组 方法
let data1 = Array.prototype.slice.call(data)
console.log(data1)

// ES6 伪数组 转化 数组 方法
let data2 = Array.from(data)
console.log(data2)

console.log(data)

打印效果:

image.png

ES6构造数组方法:Array.of()

let arr = Array.of(1, 8, '苹果', [9, 10, 88], {0: '夏目玲子', 1: '斑'})
console.log(arr)

打印结果:

image.png

ES6替换数组中内部替换部分数据:copyWithin()

copyWithin(目标位置, 开始读取位置,结束读取位置)
目标位置- - -数据要复制到的起始位置
开始位置- - -从这里开始读取数据
结束位置- - -读取到该索引的前一位

这几个位置都是索引表示,索引从0开始
第三个参数可以不写,不写就是从开始位置一直到数组结束

let arr2 = [9, 2, 8, 6, 5, 66, 7]
console.log(arr2)
arr2.copyWithin(1, 4, 6)
console.log(arr2)

打印结果:

image.png

ES6数组填充:fill()

fill(‘填充的数据’, 开始位置, 结束位置)
开始位置和结束位置用索引表示:开始- - -start ;结束- - -end

填充位置从start 到 end - 1

let arr = Array(1, 3)
console.log(arr)

let arr2 = Array(3)
console.log(arr2)

let arr3 = new Array(3).fill(2)
console.log(arr3);

let arr4 = [1, 2, 3, 4, 5, 6]
console.log(arr4)
arr4.fill('我正在变瘦', 1, 3)
console.log(arr4)

arr4.fill('天上掉下个猪八戒')
console.log(arr4)

打印结果:

image.png

检测数组中是否包含否元素

ES5:indexOf()

使用方法:数组名.indexOf(元素值)
检测到数组中有该元素的话,返回该元素在数组中的索引值,不存在的话返回 -1

indexOf()不能检测数组中是否有 NaN

ES6新增includes()

使用方法:数组名.includes(元素值)
检测到数组中有该元素的话,返回 true,不存在的话返回 false

includes()可以检测数组中是否有 NaN

代码示例:

let arr = [2, 5, 6, NaN]
console.log(arr.indexOf(2))
console.log(arr.indexOf(NaN))

console.log(arr.includes(5))
console.log(arr.includes(NaN))
console.log(arr.includes(10))

打印结果:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报