ES6: 数组

发布时间:2019-08-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6: 数组脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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,而undefinednull会被处理成空字符串.

ES6会将空位转为undefined.

脚本宝典总结

以上是脚本宝典为你收集整理的ES6: 数组全部内容,希望文章能够帮你解决ES6: 数组所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。