ES6(2015)Array数组

Posted 2021-09-23 优小U

文章目录

• 1. ES5 中数组遍历方式
• 2. ES6 中数组遍历方式 for...of
• 3. Array.from()
• 4. Array.of()
• 5. Array.prototype.fill()
• 6. Array.prototype.find()
• 7. Array.prototype.findIndex()
• 8. Array.prototype.copyWithin()

1. ES5 中数组遍历方式

let arr = [1, 2, 3, 2, 4]
// for循环
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// forEach  不支持 break、continue 等
arr.forEach(function(elem, index, array) {
    if (arr[i] == 2) {
        continue
    }
    console.log(elem, index)
})
// map  返回新的数组
let result = arr.map(function(value) {
    value += 1
    console.log(value)
    return value
})
console.log(arr, result)
// filter 返回符合条件的元素数组
let result = arr.filter(function(value) {
    console.log(value)
    return value == 2
})
console.log(arr, result)
// some 返回boolean，判断是否有元素符合条件
let result = arr.some(function(value) {
    console.log(value)
    return value == 4
})
console.log(arr, result)
// every 返回boolean，判断每个元素都符合条件
let result = arr.every(function(value) {
    console.log(value)
    return value == 2
})
console.log(arr, result)
// 使用 every 遍历就可以做到 break 那样的效果，简单的说 return false 等同于 break，return true 等同于 continue。如果不写，默认是 return false。

// reduce() 接收一个函数作为累加器
let sum = arr.reduce(function(prev, cur, index, array) {
    return prev + cur
}, 0)
console.log(sum)

for…in不能用于遍历数组。
for…in代码块中不能有 return，不然会抛出异常。

2. ES6 中数组遍历方式 for…of

for (let val of [1, 2, 3]) {
    console.log(val);
}
// 1,2,3

for...of后面遍历的不仅限于array,object，而是iterable（一切可遍历的元素）。

for (let item of arr) {
    console.log(item)
}

for (let item of arr.values()) {
    console.log(item)
}

for (let item of arr.keys()) {
    console.log(item)
}

for (let [index, item] of arr.entries()) {
    console.log(index, item)
}

for…of是支持 break、continue、return的，所以在功能上非常贴近原生的 for。

3. Array.from()

在 javascript 的世界里有些对象被理解为数组，然而缺不能使用数组的原生 API，比如函数中的 arguments、DOM中的 NodeList等。当然，还有一些可遍历的对象，看上去都像数组却不能直接使用数组的 API，因为它们是伪数组（Array-Like）。要想对这些对象使用数组的 API 就要想办法把它们转化为数组，传统的做法是这样的：

• 语法：Array.from(arrayLike[, mapFn[, thisArg]])

let args = [].slice.call(arguments);
let imgs = [].slice.call(document.querySelectorAll('img'));

在 ES6 中提供了新的 api 来解决这个问题，就是Array.from，代码如下：

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

4. Array.of()

Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of()和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

• 语法：Array.of(element0[, element1[, …[, elementN]]])

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

5. Array.prototype.fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

• 语法：arr.fill(value[, start[, end]])

let array = [1, 2, 3, 4]
// 第二个元素（索引为1）到第三个元素（索引为2）内的数填充为 0
array.fill(0, 1, 2)
// [1,0,3,4] 

6. Array.prototype.find()

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

• 语法：arr.find(callback[, thisArg])

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);
// 12

7. Array.prototype.findIndex()

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

• 语法：arr.findIndex(callback[, thisArg])

let array = [5, 12, 8, 130, 44];

let found = array.find(function(element) {
    return element > 10;
});

console.log(found);

8. Array.prototype.copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。(会修改当前数组)

• 语法：arr.copyWithin(target, start = 0, end = this.length)

let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3))
// [1, 4, 5, 4, 5]