文章目录
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]