ES6 —(数组扩展)
1、扩展运算符
扩展运算符(...
)将一个数组转为用逗号分隔的参数序列。扩展运算符后面可以放置表达式,也可以是一个空数组,若是空数组,则不产生任何效果。
const arr = [
...(x > 0 ? ['a'] : []),
'b'
];
[...[], 1] // [1]
用途
(1)用于函数调用。并且,扩展运算符与正常的函数参数可以结合使用。
function f(a,b,c,d,e) {}
var arg1 = [1,2,3,4,5];
f( ...arg1); // 相当于 f(1, 2, 3, 4, 5);
var arg2 = [3,4];
f(1, 2, ...arg2, 5); // 相当于 f(1, 2, 3, 4, 5);
(2)替代数组的 apply
方法。
由于扩展运算符可以展开数组,所以不需要 apply
方法,将数组转为函数的参数了。
function f(x, y, z){}
var args = [1, 2, 3];
f.apply(null, args); // ES5 的写法
f(...args); // ES6 的写法
--------------------------------------------
// 将 arr2 数组添加到 arr1 数组的尾部
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2); // ES5 的写法
arr1.push(...arr2); // ES6 的写法
(3)合并数组
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr1, arr2); // ES5 的写法
var arr4 = [...arr1, ...arr2]; // ES6 的写法
(4)与解构赋值结合,并且扩展运算符只能放在参数的最后一位,否则会报错。
const [first, ...rest] = [1, 2, 3]; // first => 1, rest => [ 2, 3]
const [first, ...rest] = []; // first => undefined, rest => []
const [...rest, first] = [1, 2, 3]; // 报错,
(5)函数的返回值,js的函数只能有一个返回值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。
(6)字符串,扩展运算符可将字符串转为真正的数组。并且能正确识别 32 位的 Unicode 字符。
[...'hello'] => ['h', 'e', 'l', 'l', 'o']
'x\uD83D\uDE80y'.length // 4, 错误未正确识别出 32 位的 Unicode 字符
[...'x\uD83D\uDE80y'].length // 3, 正确识别出了 32 位的 Unicode 字符
(7)实现了 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。如 Map 和 Set 结构, Generator 函数。
2、Arry.from()
Arry.from()
方法将:类似数组的对象(所谓类似数组对象,本质特征只有一点,即必须有 length
属性),可遍历对象(实现了 Iterator 接口的对象),转为真正的数组。返回一个数组。
Arry.from()
方法还可以接受第二个参数,作用类似于数组的 map
方法,用于对每个元素进行处理,将处理后的值放入返回的数组。
Arry.form('hello') => ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b']);
Array.from(namesSet) => ['a', 'b']
let arr = {
'0': 'a',
'1': 'b',
length: 3
}
var arr1 = [].slice.call(arr); // ES5 ['a', 'b']
var arr2 = Array.from(arr); //ES6 ['a', 'b',undefined]
可以看出,slice
忽略空属性,而 Array.from()
将空属性保存为 undefined ,使原对象的长度不变。
3、Array.of()
Array.of()
方法将一组值,转换为数组。该方法主要是弥补数组构造函数 Array()
由于参数个数不同导致的行为有差异。
Array() => []
Array(3) => [ , , ,] // Array参数少于2时, 参数表示数组长度
Array(3,2,1) => [3, 2, 1] // Array参数不少于2时,返回有参数组成的新数组
--------------------------------------------------------
Array.of(3) => [3]
Array.of(3).length => 1
Array.oc(3,2,1) => [3, 2, 1]
4、数组实例的 copyWithin()
数组实例的 copyWithin()
方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。该方法会修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数:
- target (必需):从该位置开始替换数据
- start (可选):从该位置开始读取数据,默认为0,如果负值,表示倒数(从后往前)
- end (可选):到该位置前停止读取数据,默认为数组长度,如果为负值,表示倒数(从后往前)
[0, 1, 2, 3, 4, 5].copyWithin(2,3,4) => [0, 1, 3, 3, 4, 5]
5、数组实例的 find() 、findeIndex()
数组实例的 find()
方法,用于找到第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员一次执行该回调函数,直到找到第一个返回值为 true
的成员,然后返回该成员。
数组实例的 findIndex()
方法的用法与 find
类似,返回第一个符合条件数组成员的位置,如果所有成员都不符合条件,则返回 -1。
以上两个方法都可以接受第二个参数,用于绑定回调函数的 this
对象。
这两个方法都可以发现 NaN
,弥补了 indexOf()
方法的不足。
[NaN].findIndex(y => Object.is(NaN, y)) => 0
6、数组实例的 fill()
fill()
方法使用给定值,填充一个数组,数组中已有的元素会被覆盖。用于空数组初始化非常方便。该方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
7、数组实例的 enteries() keys() 和 vauels
ES6 提供这三个新方法用于遍历数组,他们都返回一个遍历器对象,可以用于 for...of
循环进行遍历。
- keys()
是对键值名遍历
- values()
是对键值遍历
- entries()
是对键值对遍历
for(let index of ['a', 'b'].keys()){
console.log(index);
} // 0 1
8、数组实例的 includes()
Array.prototype.includes()
该方法返回一个布尔值,表示某个数组是否包含给定的值与字符串的 indcludes()
方法类型。能识别 NaN
。
该方法的第二个参数表示搜索的起始位置,默认为 0 ,如果第二个参数为负数,则表示倒数位置(从后往前)。
9、数组的空位
数组的空位指,数组的某一个位置没有任何值。
注意:一个位置的值等于 undefined
,该位置依然有值。 空位是没有任何值。
0 in [undefined] => true
0 in [ , , ,] => false
ES5 对空位的处理,很多情况下会忽略空位。
- forEach()
filter()
every()
和 some()
都会跳过空位。
- map()
会跳过空位,但会保留这个值。
- join()
和 toString()
会将空位视为 undefined
, 而 undefined
和 null
会被处理成空字符串。
ES6 则是明确将空位转为 undefined
。
如 Array.from()
、 扩展运算符(...
、) enteries()
、 keys()
、 vauels()
、find()
和 findIndex()
将空位转为 undefined
。
copyWithin()
会将空位一起拷贝。
fill()
会将空位视为正常的数组位置。
for...of
循环也会遍历空位。
10、将函数参数转化为数组(不是ES6知识)
方法一:
var args = Array.prototype.slice.call(arguments);
方法二:
var args = [].slice.call(arguments, 0);
方法三:
var args = [];
for(var i = 0; i < arguments.length; i++){
args.push(arguments[i]);
或 args[i] = arguments[i];
}