前端基础知识（二）遍历数组

遍历数组的常用方法

1、最传统的for循环

2、for…in…

let arr = [1,2,3,4,5];
for (let i in arr) {
	console.log(arr[i], i) // 1, 0 ...
}

3、for…of…

let arr = [1,2,3,4,5];
for (let i of arr) {
	console.log(i) // 1,2,3,4,5
}

注意：遍历对象会报错
虽然 for…in…，for…of…都能遍历数组，但是两者的区别还是有的，
1）推荐在循环对象的时候用for…in…，遍历数组的时候用for…of…。
2）for in 循环出来的是key，for of 循环出来的是value。
3）for in 是ES5标准，for of 是ES6标准，兼容性可能存在些问题。
4）for of 不能遍历普通的对象，需要和Object.keys()搭配使用。
5）for of 支持遍历数组，类对象（例如：DOM NodeList 对象）、字符串、Map对象、Set对象。
6）for of 搭配实例方法entries()，同时输出数组内容和索引。

for of 示例 （使可以遍历对象）

Object.keys() 遍历结果为由对象自身可枚举属性组成的数组，数组中的属性名排列顺序与使用对象一致。

var person = {
	name: 'agca',
	age: 22
}
for (var key of Object.keys(person)) {
	console.log(key, ":", person[key]) // name : agca
}

for of 示例2

var arr = ['a','b','c']
for (let [index, val] of arr.entries()) {
	console.log(index, ":", val) // 0 : a
}

4、forEach方法

直接上代码：

var arr = ['a','b','c']
arr.forEach(function(item, index) {
	console.log(item, index) // a, 0
})

5、map遍历数组，并通过callback对数组元素进行操作，并将所有操作结果放入数组中并返回该数组。

var arr = ['a','b','c']
var txx = arr.map(function(item, index) {
	return item.toUpperCase()
})
console.log(txx) // ["A", "B", "C"]

6、filter（）返回一个包含所有在回调函数上返回的为true的元素新数组，回调函数担任的角色为过滤器的角色，当元素符合条件，过滤器就会返回一个true，而filter则会返回所有符合条件的元素。

var arr = ['a','b','c', 1,2,3]
var txx = arr.filter(function(item, index) {
	if (typeof item == 'number') {
		return item
	}
})
console.log(txx) // [1, 2, 3]

7、find（）返回通过测试（函数内判断）的数组的第一个元素的值。

注意：find（）对空数组，函数是不会执行的。find（）并没有改变数组的原始值
当数组中的元素在测试条件的时候返回true时，find（）返回符合条件的元素，之后的值不会再调用执行函数，如果没有符合条件的元素返回undefined

var arr = [1,2,3,4,5,6,7]
var txx = arr.find(function(item, index) {
	return item > 5
})
console.log(txx) // 6

8、every（）当数组中的每一个元素在callback上被返回true时就返回true（注意：要求每一个单元项都返回true时才为true）

every和filter的区别是：后者会返回所有符合过滤条件的元素，前者会判断是不是数组中的所有元素都符合条件，并且返回的是布尔值。

var arr = [1,2,3,4,5,6,7,'asdb']
var txx = arr.every(function(item, index) {
	if (typeof item == 'string') {
		return item
	}
})
console.log(txx) // false

9、some（）只要数组中有一项在callbcak上符合就返回true

var arr = [1,2,3,4,5,6,7,'asdb']
var txx = arr.some(function(item, index) {
	if (typeof item == 'string') {
		return item
	}
})
console.log(txx) // true

10、findIndex（）ES6 的新API，找到条件的索引并返回

var arr = [1,2,3,4,5,6,7,'asdb']
function checkArr(number) {
	return number > 6
}
function myFunction() {
	console.log(arr.findIndex(checkArr))
}
myFunction() // 6