2018-01-11ES6阮一峰教程摘记4 数组的扩展

8.数组的扩展

1.扩展运算符

将数组转为用逗号分隔的参数序列,主要用于函数调用

例子:

function add(x, y) {

  return x + y;

}

const numbers = [4, 38];

add(...numbers) // 42

该扩展运算符,替代了函数的apply,例如:


扩展运算符的应用:

1)复制数组

arr2=arr1只是让ar2的地址指向arr1,改变arr1的值,arr2的会变;改变arr2的值,arr1也会变;

实现真正的复制,es5中用arr2=arr1.concat();

使用该扩展运算符只需arr2=[...arr1]; 或者 [...arr2]=arr1;

2) 合并数组

es5做法:使用concat方法,例如arr1.concat(arr2,arr3);

es6做法:扩展运算符,例如[...arr1,...arr2,...arr3]

3)结合解构赋值


a:数组的第一个元素,rest:数组除第一个元素外的所有元素

4)字符串

将字符串转换成真正的数组 [...str] ,涉及Unicode字符

Array.from(str)也可以

5)可以将Iterator 接口的对象转成真正的数组?

6)Map 和 Set 结构,Generator 函数??


2.Array.from()

用于将两类对象转为真正的数组:类似数组的对象(array-like object,本质特征只有一点,即必须有length属性)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)

例如:

将arrayLike中的length一行去掉,arr2就是空数组



如果map函数里面用到了this关键字,还可以传入Array.from的第三个参数,用来绑定this。


3.Array.of()

总是返回参数值组成的数组。如果没有参数,就返回一个空数组

弥补数组构造函数Array()的不足,例如:

参数个数的不同,会导致Array()的行为有差异

该方法可以由如下代码模拟实现

function ArrayOf(){

return [].slice.call(arguments);

}


4.数组实例的copyWithin()

end:不包括第end位的值,从0开始数



问题

上图中的代码,自己理解的是:

{length:5,3:1}等同于{0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5}

调用copyWithin(0,3),就是将3:1,4:undefined的值换到前两项,得到:{0:1,1:undefined,2:undefined,3:1,4:undefined,length:5},等同于

{0:1,3:1,length:5}

同问题参考链接:问题链接

这个理解在如下写法中也是成立的


理解的检验~

5.数组实例的find()和findIndex()

find():找出第一个符合条件的数组成员,返回该成员


如果找不到,则返回undefined

findIndex:与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1


接受第二个参数的例子


对比indexOf

6.数组实例的fill()

使用给定值,填充一个数组


第一个参数必须,第二、三个参数可选

7.遍历数组--数组实例的keys(),values(), entries()

都返回一个遍历器对象,可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let [index, elem] of ['a', 'b'].entries()) {

    console.log(index, elem);

}

// 0 "a"

// 1 "b"


遍历器对象的next方法

8.数组实例的includes()

返回布尔值,表示数组中是否包含给定的值,和字符串的includes()相似;第二个参数表示搜索的起始位置,默认0

例如:[1,2,NaN].includes(NaN);  //true

es5中用arr.indexOf()===-1来实现该目的,其缺点:

1)不够语义化

2)indexOf()使用的是严格的===,会对NaN误判,如:[NaN].indexOf(NaN);//-1


some方法 : 测试数组中的某些元素是否通过由提供的函数实现的测试

另外,Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

Map 结构的has方法,是用来查找键名的,比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
Set 结构的has方法,是用来查找的,比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

9.数组的空位(数组中尽量避免出现空位)


es5中对空位的处理

ES6 则是明确将空位转为undefined

你可能感兴趣的:(2018-01-11ES6阮一峰教程摘记4 数组的扩展)