es6学习笔记-数组有多少种遍历的方法

es5的数组遍历方法

for循环

• 写法繁琐

forEach：用来遍历数组

• 不需要通过索引去访问数组项，然而不支持break,continue等，会抛出异常

every

• 实用every遍历可以做到break的效果，return false 等同于break，return true等同于continue。如果不写，默认是return false。使用break,continue等，会抛出异常

for...in

• 可以遍历数组，支持break,continue
• 但是如果array有自定义属性，也会被遍历出来。
• 是为遍历对象创造的，不是为了遍历数组设计的
• 代码中不能有return，会抛出异常

filter()

• 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

map()

• 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

some()

• 对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

在es6中新增了很多实用的原生API，方便开发者对Array的操控更强

for...of：遍历数组

for (const variable of iterable) {
    //statements
}

• 遍历的是一切可遍历的元素（数组，对象，集合）等。
• 任何数据结构都可以自定义一个遍历，这个遍历是不能被for、for...in理解和实现的

const Price = {
	A: [1, 2, 3],
	B: [1, 2, 3],
	C: [1, 2, 3],
}

• 给医生的数据结构自定义遍历规则（iterator），就可以用for...of遍历

[!TIP]

for...of是支持break，continue的，所以在功能上非常贴近原生的for

Array.prototype.from()

数组是开发中常用的数组结构。在js里有些对象被理解为数组，然而却不能使用数组的原生API，比如函数中的arguments、DOM中的NodeList等。当然还有一些可遍历的对象，看上去都像数组却不能直接使用数组的API，因为它们是伪数组(Array-Like)。要想对这些对象使用数组的API就要想办法把它们转化为数组传统的方法是这样的：

• 使用call将数组的api应用在新的对象上，换句话说是利用改变函数的上下文来间接使用数组的api

let args = [].slice.call(arguments);
let ings = [].slice.call(document.querySelectorAll('img'));

• es6中提供了新的api解决这个问题

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));
arg(key: string) {
	console.log(Array.from(key));
}

[!TIP]

伪数组具备两个特征：1，按索引方式存储数据；2，具有length属性。如：

let arrLike = {
   0:'a',
   1:'b',
   2:'c',
   length: 3
}

• Array.from的其他用法

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数	含义	必选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	Y
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数	N
thisArg	可选参数，执行回调函数mapFn时this对象	N

看了以上参数，至少等看到Array.form还具备map的功能，比如我们想要初始化一个长度为5的数组，每个数组元素默认为1，之前的做法是

let arr = Array(6).join(' ').split('').map(item => 1);

使用Array.from的写法

let arr = Array.from({length:5},() => 1);

思考：生成长度为5，为何用的是Array(6)？

Array.prototype.of()

Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of()和Array构造函数之间的区别在于整数参数：Array.of(7)创建一个具有单个元素7的数组，而Array(7)创建一个长度为7的空数组（注意：这是一个有7个空位的数组，而不是7个undefined组成的数组）

Array.of(7); // [7]
Array(7); // [,,,,,,,]

语法：Array.of(element0[, elemetn1[, ...[, elementN]]])

参数	含义	必选
elementN	任意个参数，将按顺序成为返回数组中的元素	Y

Array.prototype.fill()

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，不包括终止索引。

let array = [1,2,3,4];
array.fill(0,1,2);
console.log(array);// [1, 0, 3, 4]

这个操作是将array数组的第二个元素（索引为1）到第三个元素（索引为2）内的数填充为0，不包括第三个元素。

• 技巧

用fill是否可以初始化一个长度固定，元素为指定值得数组？

Array(5).fill(1);

[!TIP]

fill不具备遍历的功能，它是通过指定要操作的索引范围来进行，通过以上可以看出，不指定索引就会对所有的元素进行操作。

语法：arr.fill(value[, start[, end]])

参数	含义	必选
value	用来填充数组元素的值	Y
start	起始索引，默认值为0	N
end	终止索引，默认值为this.length	N

Array.prototype.find()

find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined。

let array = [5,12,8,130,44];
let found = array.find(item => {
	return item > 10
})
console.log(found);

语法：arr.find(callback[, this.Arg])

参数	含义	必选
callback	在数组每一项上执行的函数，接收3个参数，element、index、array	Y
thisArg	执行回调时用作this的对象	N

Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1。其实这个和find()是成对的，不同的是它返回的是索引值而不是值。

let array = [5,12,8,130,44];
let found = array.findIndex(item => {
	return item > 10
})
console.log(found);

语法：arr.findIndex(callback[, this.Arg])

参数	含义	必选
callback	在数组每一项上执行的函数，接收3个参数，element、index、array	Y
thisArg	执行回调时用作this的对象	N