ES6：数组

lavor 发布于2019-08-21 11:33 / 1439人阅读

摘要：中的方法遍历一下数组中的每个选项返回一个新的数组。还可以接受第二个参数，作用类似与数组的方法，用于对每个元素进行处理。这个方式是用于将一组值，转换为数组。可选到该位置前停止读取数据，默认等于数组长度。如果是负数，表示倒数。

ES6中数组增加了很多新的方法，但是先回顾下之前ES5中的数组的方法。

ES5中的方法

Array.prototype.forEach
遍历一下数组中的每个选项

Array.prototype.map, Array.prototype.filter: 返回一个新的数组。
两者的区别是：map返回的是，由原数组中的每个元素调用一个方法后返回的新数组；filter是通过指定函数测试，然后创建了个新的数组；

Array.prototype.some,Array.prototype.every: 返回的是Boolean值
some只要有一个符号就返回；every只要有一个不符合就返回。

Array.prototype.reduce, Array.prototype.reduceRight:相当于一个迭代的过程，返回最终的结果。可以传4个参数：previous, current, index, array.

indexOf, lastIndexOf

ES6中新增的方法 Array.from()

这个方法是将对象转为真正的数组，这个对象有两种类型：类似数组的对象和可遍历的对象（如ES6中的Set和Map）

let arrayLike = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ["a", "b", "c"]

// ES6的写法
let arr2 = Array.from(arrayLike); // ["a", "b", "c"]

常用的场景

常见的类似数组对象是NodeList集合和arguments

Array.from("hello");//["h","e","l","l","o"]

let namesSet = new Set(["a","b"])
Array.from(namesSet);//["a","b"]

Array.from([1,2,3])//[1,2,3]

但有一点，扩展运算符(...)也可以将某些数据结构转为数组

var args = [...arguments];

[...document.querySelectorAll("div")]

其实扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署成这个接口，就无法转换。Array.from方法则还支持类似的数组对象，但是这种类似数组对象，必须要有length属性，如果没有，就不能转换。

Array.from还可以接受第二个参数，作用类似与数组的map方法，用于对每个元素进行处理。

Array.of()

这个方式是用于将一组值，转换为数组。

Array.of(3,11,8)//[3,11,8]

这个方法的主要目的，是弥补数组构造函数Array()的不足

new Array(3)//[undefined*3]

Array.of可以替代Array()或者new Array()

Array.of()//[]
Array.of(undefined)//[undefined]
Array.of(1)//[1]
Array.of(1,2)//[1,2]

copyWidthin()

将制定位置的成员复制到其他位置，然后返回当前数组，就是使用这个方法，修改当前数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)

target(必选)：从该位置开始替换数据

start(可选)：从该位置开始读取数据，默认为0，如果是负数，表示倒数。

end(可选)：到该位置前停止读取数据，默认等于数组长度。如果是负数，表示倒数。

[1,2,3,4,5].copyWidthin(0, 3)//[4,5,3,4,5]

[1,2,3,4,5].copyWidthin(0,3,4)//[3,2,3,4,5]
[1,2,3,4,5].copyWidthin(0,-2,-1)//[4,2,3,4,5]

find(), findIndex()

find(): 用于找到第一个符合条件的数组成员
findIndex(): 返回第一个符合条件的数组成员位置

fill()

这个方式使用一个定值，填充一个数组

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

entries() keys() values()

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"

includes()

这个方法表示某个数组是否包含给定的值

数组的空位，数组的空位和undefined不是同一个概念

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false

空位处理

ES5中

forEach,filter,every,some会跳过空位
map会跳过空位，但会保留这个值
join(),toString()会将空位视为undefined,而undefined和null会被处理成空字符串.

ES6会将空位转为undefined.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86852.html

Javascript内置对象新增接口列表

网上很少有提供不同版本接口对比的文章，所以自己总结一下。 Array Method Description Modify Version concat 连接多个数组，返回数组副本，参数可以为值或数组否 ES3 join 把数组元素组合为字符串否 ES3 pop 删除并返回最后一个元素是 ES3 push 向数组末尾添加一个或多个值，返回数组长度是 ES3 reve...

xuhong 2019-08-21 17:02 评论0 收藏0
ES6核心特性

摘要：报错不报此外还有个好处就是简化回调函数正常函数写法箭头函数写法改变指向长期以来，语言的对象一直是一个令人头痛的问题，在对象方法中使用，必须非常小心。前言 ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！本文首发地址GitHub博客（...

loostudy 2019-08-23 13:41 评论0 收藏0
ES6核心特性

摘要：报错不报此外还有个好处就是简化回调函数正常函数写法箭头函数写法改变指向长期以来，语言的对象一直是一个令人头痛的问题，在对象方法中使用，必须非常小心。前言 ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！本文首发地址GitHub博客（...

_DangJin 2019-08-02 12:07 评论0 收藏0
[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章适合快速掌握入门语法，想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充，可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数本系列文章适合快速掌握 ES6 入门语法，想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》本篇文章是对之前文章...

hidogs 2019-08-23 14:07 评论0 收藏0
你该知道的ES6那些事儿

摘要：最近重构了一个项目，引入了部分用法，最大的感受是让这门语言变得更加严谨，更加方便。通过该方法获得位置后还得比较一次才能判断是否存在。再来看看的写法使用数组来初始化一个，构造器能确保不重复地使用这些值。下面提供链接，供有兴趣的朋友参考。最近重构了一个SPA项目，引入了部分ES6用法，最大的感受是ES6让javascript这门语言变得更加严谨，更加方便。本篇将结合实战经验，对最常用的部...

CoffeX 2019-08-22 18:42 评论0 收藏0