Array 扩展

在对于ES6中我们使用的数据类型最多的大概不是常量,应该是数组或是对象吧,ES6对数组也进行了扩展
比如我们之前说到的函数参数的尾参数rest形式(...)符修饰的参数变量,接受到的传递值便是剩余传递过来的参数,并以数组的形式展示出来。
...操作符 单独使用将数组以逗号的形式分隔参数,主要还是用于在函数参数eg:


console.log(0, ...[1, 2, 3]) // 0,1,2,3
function a(...item){
  return item;
}
a(1, 2, 3) // [1, 2, 3]
function a(x, y){
  return x + y;
} 
let t = [1, 2];
a(...t) // 3

当...操作符在数组数据前面时,会将该数组转化为逗号分隔的字符串
通过这一属性,我们可以做比如数组求其最大值,push数组等等,需要传递参数,而此时提供的参数又是数组的情况,就可以使用这种方式将其转化为字符串形式eg:

let arr = [1, 3, 21, 34, 4, 12, 55, 6];
// 用之前的方式
Math.max.apply(null, arr); // 55
// ES6 就可以使用 ... 操作符来执行
Math.max(...arr) // 55
let a = [1, 2, 3];
a.push(...[4, 5]) // [1, 2, 3, 4, 5]

还可以用于方便的克隆数组及合并数组eg:
let a = [1, 2, 3];
let b = a; // 这种方式不是克隆,而是定义变量b并将其指针指向了数组a的地址,并不是一个全新的数组
b = a.concat() // 这种方式是可以克隆出一个新数组
[...b] = a;
b = [...a]; // 后两种方式便是通过 ... 操作符来克隆出一个新的数组
let a = [1, 2];
let b = [3, 4];
a.concat(b) // 合并a,b数组
[...a, ...b] // 同样会将数组a与数组b合并成一个新数组通过...操作符

通过解构赋值,当然...rest只能是放在最后eg:
[a, ...b] = [1, 2, 3, 4]
a // 1
b // [2, 3, 4] 总之,...rest对应的是最后剩下的参数,并且结果是一个数组

字符串转换为数组eg:
let a = [...'abc']; // Array.prototype.slice.call(null,'abc')
a // ["a", "b", "c"]

将类数组转换为正真的数组,其实类数组,只要是以下标为0,1,2,3等数字,并且具有属性length的对象都可以称作为类数组,用Array.from方法eg:
let o = {'0': 'a', '1': 'b','length': 2};
Array.from(o) // ["a", "b"]
// from 方法接受的第二个参数,类似于数组的map方法 eg:
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

from 方法若是传递的参数本身就是数组,则返回该数组 slice方法替代:

toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

of Array的静态方法,用于将一组值转换为数组eg:

Array.of(1,2,3) // [1, 2, 3] 传递什么参数,就以什么参数为元素的数组返回 代替方法:
ArrayOf(){
  return [].slice.call(arguments);
}

copyWithin Array 实例方法 将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组
它接受三个参数。

target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值 eg:
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

// 将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]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束,复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

find Array 的实例方法,用于找出第一个符合条件的数组成员eg:
[1, 4, -5, 10].find((n) => n < 0) // -5 [1, 4, 10].find((n) => n < 0) // undefined
将遍历该数组,当其判断为true时,则返回该元素,若没有符合条件的,则返回undefined
findIndex Array的实例方法与find基本一致,不过findIndex返回的是该元素的下标,没有找到的时候返回-1 eg:

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2
[1, 5, 4, 6].findIndex(function(value, index, arr) {
  return value > 9;
}) // -1

这两个方法与其他遍历数组方法一样,都可以传递第二个参数,用来绑定回调函数的this指向
fill
fill方法使用给定值,填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]
上面代码表明,fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

上面代码表示,fill方法从 1 号位开始,向原数组填充 7,到 2 号位之前结束。

注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

百度未收录
分享