遍历数组的常用方法
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