扩展运算符
扩展运算符是三个...,该运算父会将一个数组转化为用逗号分隔的参数序列，例如：
console.log(...[1,2,3]);//1,2,3
扩展运算符后面可以放置表达式
const x=1;
const arr = [
...(x > 0 ? ["a"] : []),
"b"
]
console.log(arr);
如果扩展运算符后是一个空数组，那么不会产生任何效果
[...[],1];//[1]
该方法主要用于函数调用
const args = [0, 1];
function f(v, w, x, y, z) {
console.log(v + w + x + y + z);
}
f(-1, ...args, 2, ...[3]);//5
使用该方法可以极大的简化我们之前的写法，例如
//es5
Math.max.apply(null, [1, 2, 3]);
var arr1 = [1, 2, 3],
arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
//es6
Math.max(...[1, 2, 3]);
arr1.push(...arr2);
实现数组的深拷贝
//在数组中我们实现数组的复制，如
var arr1=[1,2,3];
arr2=arr1;
//这种方式只是复制了指向底层数据结构的指针，而不是克隆了一个全新的数组
arr2[0]=0;
console.log(arr1[0]);//0
//如果我们想要在底层再开辟一块空间来克隆一个新数组，
//es5
const arr2=arr1.concat();
//es6
const arr2=[...arr1];
合并数组
//es5
const arr2=arr1.concat(arr3);
//es6
const arr2=[...arr1,...arr3];
其它一些例子
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []
注意如果将扩展运算符应用于数组的赋值，只能发在参数的最后一位，否则会报错
const [first,...arr,last]=[1,2,3,4]//报错
Array.from（）
Array.from方法用于将两类对象转化为真正的数组：类数组对象和可遍历的对象
类数组对象如document.querySelectorAll获取到的对象(object NodeList类型)，以及arguments对象
var arrayLike = document.querySelectorAll("div");
//NodeList(2) [div#block1, div#block2]
console.log(Array.from(arrayLike));
//(2) [div#block1, div#block2]，此时可以正常使用数组的方法
Array.from(arrayLike).push(2);
//ES5
arrayLike=[].slice.call(arrayLike)
Array.from方法还可以接受第二个参数，该参数的作用类似于数组的map方法，用来对每一个元素进行处理将处理后返回的值放入返回的数组
var arr={
0:"name",
1:"age",
length:2
};
console.log(Array.from(arr, t => t + "i"));
//["namei", "agei"]
该方法也可以用来处理字符串，将字符串转换为数组，同时可以避免javascript将大于/uFFFF的Unicode字符算作两个字符的bug
var str="12345";
console.log(Array.from(str));
// ["1", "2", "3", "4", "5"]
Array.of()
Array.of方法用于将一组值转换为数组
Array.of(1, 2, 1);
//[1, 2, 1]
相比于之前的Array方法，该方法不会出现下面的情况
Array(3)
//[empty × 3] || [ , , ,]
console.log(Array.of(3));
//[3]
我们可以模拟实现该方法
function ArrayOf() {
return [].slice.call(arguments);
}
copyWithin()
该方法用来在数组内部将指定位置的成员复制到其他位置，该位置的原有成员会被覆盖，数组将会被修改，然会返回修改后的数组
Array.prototype.copyWithin(target,start,end)
该方法接受三个参数
- target，必需参数，从该位置开始替换数据
- start，可选参数，从该位置开始读取数据，默认为0，如果为负值，表示倒数
- end，可选参数，表示到该位置停止读取数据，默认等于数组长度，如果为负值，表示倒数
var arr=[1,2,3,4,5];
arr.copyWithin(2,0,4);
//[1, 2, 1, 2, 3]
注意的一个事项，从开始位置替换原数组是指将我们截取的等长度的数组从target位置开始的等长度的数组替换为我们通过start和end截取的字符
find()、findIndex()
find()方法用于查找数组中是否包含符合条件的成员，它的参数是一个回调函数，所有的数组成员依次执行该回调函数，直到找到符合该回调函数条件的成员，返回第一个符合条件的成员，如果没有找到那么返回undefined
var arr=[1,2,3,4,-5];
arr.find((n) => n < 0);
//-5
find中传入的回调函数也可以接受三个参数，分别是当前的值，当前的位置和原数组，这些值都可以做为条件来筛选我们要查找的数组成员
var arr=[1,2,3,4,-5];
arr.find((val, index, arr) => {
return index != 4 && value >2;
//返回位置不为4并且值大于2的第一个成员
});
//3
findIndex方法的用法与find方法非常相似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，那么返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
})
// 2
fill()
[ ].fill(val,start,end)
该方法用于使用给定的值填充一个数组
[1,2,3,4].fill("hi",0,2);
//["hi", "hi", 3, 4]
该方法可以接收3个参数
- val，表示用来填充数组的字符
- start，表示填充开始的位置
- end，表示填充结束的位置
如果不传入参数，会将原数组中的成员都替换为undefined
includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组中是否包含给定的值，与字符串的includes方法类似，该方法其实可以看作是es6在自己的规范中实现了$.inArray();
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
//JQuery
$.inArray(1, arr, 0) //存在返回位置，不存在返回-1
该方法可以接收第二个参数来表示从什么位置开始检索，默认为0，负数表示倒数位置，如果大于数组长度，那么会重置检索位置为0，比起之前我们常用的indexof，返回布尔值相比-1更加直观
网友评论