前言:
ES6为我们的数组操作提供了很多方便的方法,我们一起来看看吧。
一、扩展运算符
这里其实和前面讲的解构赋值是一样的,就不过多赘述。
let arr = ['I','love ','you']
function fn(a,b,c){
console.log(a,b,c);
}
fn(...arr)
主要用途:
(1)复制数组
const a1 = [1, 2];
// 写法一
const a2 = [...a1]; // 得到新的内存地址
// 写法二
const [...a2] = a1; // 得到新的内存地址
(2)合并数组
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
(3)将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
二、数组的空位
空位不是undefined, 一个位置的值等于undefined,依然是有值的。空位是没有任何值,in运算符可以说明这一点。
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
三、ES6新增的数组方法
方法 | 描述 |
Array.from() | 用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象 |
Array.of() | 用于将一组值,转换为数组。 |
实例方法 | |
copyWithin() | 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。 |
find() | 用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。 |
findIndex() | 用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。 |
fill() | fill方法使用给定值,填充一个数组。 |
entries() | 对 键值对 的遍历。 |
keys() | 对 键名 的遍历 |
values() | 对 键值 的遍历 |
includes() | 返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。 |
flat() | 用于将嵌套的数组“拉平”,变成一维的数组。 |
flatMap() | 对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。 |
1. Array.from()
// 类似数组的对象,Array.from将它转为真正的数组。
let json = {
// key值为 数组下标
'0': 'I',
'1': 'love',
'2': 'you',
length:3
}
let arr = Array.from(json)
console.log(arr); // ['I','love','you']
2. Array.of()
// 将一组值,转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
3. 实例方法 copyWithin()
Array.prototype.copyWithin(target, start = 0, end = this.length)
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
这三个参数都应该是数值,如果不是,会自动转为数值。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 上面代码表示将从 3 号位直到数组结束的成员(4 和 5),复制到从 0 号位开始的位置
// 结果覆盖了原来的 1 和 2。
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
4. 实例方法 find() 和 findIndex()
let arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.find(function(value,index,arr){
// return value > 5 // 找到了就只返回找到的第一个,然后停止
// return value > 10 // 没有查找到,返回undefined
return value == 6
}));
arr.findIndex(function(value, index, arr) {
return value > 9;
}) // -1
这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
5. 实例方法 fill()
填充数组,替换数组元素
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
let arr = ['I','love','you']
arr.fill('no',1,2) // 1 = arr[1]的前面, 2 = arr[2]的前面
console.log(arr); ['I','no','you']
6. 实例方法 entries(),keys() 和 values()
keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
6. 实例方法 includes()
某个数组是否包含给定的值
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
第二个参数表示搜索的起始位置,默认为0.
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
6. 实例方法 flat(),flatMap()
flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]