8.数组的扩展功能

171 阅读3分钟

1.from()

from():从一个伪数组或可迭代对象创建一个新的,浅拷贝的数组实例。

将arguments伪数组转换成真正的数组

es5转换方法:

function add() {
    let arr = [].slice.call(arguments);
    console.log(arr);//[Array(3)]0: (3) [1, 2, 3]length: 1__proto__: Array(0)
}

add([1, 2, 3]);

es6转换方法:

1.使用扩展运算符

function add() {
    //扩展运算符
    let arr = [...arguments];
    console.log(arr);//[Array(3)]0: (3) [1, 2, 3]length: 1__proto__: Array(0)
}

add([1, 2, 3]);

2.使用Array.from()

function add() {
    let arr = Array.from(arguments);
    console.log(arr);//[Array(3)]0: (3) [1, 2, 3]length: 1__proto__: Array(0)
}

add([1, 2, 3]);

from()还可以接受第二个参数,传入一个回调函数

let arr = Array.from([1, 2, 3], x => x * 2);
console.log(arr);//[2, 4, 6]

2.of()

of:将任意的数据类型,转换成数组。

console.log(Array.of(3, 11, 20, [1, 2, 3], {
    id: 1
}));//[3, 11, 20, Array(3), {…}]

3.copyWithin()(了解)

copyWithin:浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

语法:arr.copyWithin(target[, start[, end]])
target:0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。
如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。

start:0 为基底的索引,开始复制元素的起始位置。
如果是负数,start 将从末尾开始计算。 如果 start 被忽略,copyWithin 将会从0开始复制。

end:0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。
如果 end 被忽略,copyWithin 方法将会一直复制至数组结尾(默认为 arr.length)。

let arr = [1, 2, 3, 8, 9, 10];
arr.copyWithin(0, 3);
console.log(arr);//[8, 9, 10, 8, 9, 10]

4.find()

find():返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let num = [1, 2, -10, -20, 9, 2].find(n => n < 0);
console.log(num);//-10,返回第一个满足条件的值

5.findIndex()

findIndex:返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

let numIndex = [1, 2, -10, -20, 9, 2].findIndex(n => n < 0);
console.log(numIndex);//2,返回第一个满足条件的元素的索引

6.entries()、keys()、values()

entries():返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

let arr = [1, 2, 3];
let iterator = arr.entries();
for (let ele of iterator) {
    console.log(ele);//[0, 1] [1, 2] [2, 3]
}

console.log(iterator.next().value);//[0, 1]
console.log(iterator.next().value);//[1, 2]
console.log(iterator.next().value);//[2, 3]
console.log(iterator.next().value);//undefined
//--------------------
for (let [index, ele] of ['a', 'b'].entries()) {
    console.log(index + ':' + ele);//0:a 1:b
}

keys():返回一个包含数组中每个索引键的Array Iterator对象。

for (let index of ['a', 'b'].keys()) {
    console.log(index);//0 1
}

values():返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值。

for (let ele of ['a', 'b'].values()) {
    console.log(ele);//a b
}

7.includes()

includes:用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

console.log([1, 2, 3].includes(2));//true
console.log([1, 2, 3].includes('4'));//false
//之前是通过indexOf()的返回值来进行判断,不存在则返回-1,存在则返回索引
console.log([1, 2, 3].indexOf(4));