数组的各种遍历
ES5中遍历方法:
- for()
- forEach()
- map()
- filter()
- some()
- every()
- reduce()
- for in
for()示例:
支持 break 和 continue
let arr = [2, 4, 6, 8, 2]
for (let i = 0; i < arr.length; i++) {
if (arr[i] == 4) {
// break
continue
}
console.log(arr[i])
}
打印结果:
forEach()示例:
forEach() 不支持 break 和 continue
let arr = [2, 4, 6, 8, 2]
// 2. forEach() 不支持 break 和 continue ,不能中间退出循环
arr.forEach(function(elem, index, array){
/* if (arr[i] == 4) {
break
} */
/* if (arr[i] == 4) {
continue
} */
console.log(elem)
})
遍历结果:
如果加 break 或者 continue,会报错:
map()示例:
map() 返回一个新数组,不会对原来数组造成影响
let arr = [2, 4, 6, 8, 2]
// 3. map() 返回一个新数组,不会对原来数组造成影响
let result = arr.map(function(value) {
value += 1
console.log(value)
return value
})
console.log(arr, result);
打印结果:
filter()示例:
filter() 过滤,返回一个新的数组,由通过条件的元素组成,不会对原来的数组造成影响
let arr = [2, 4, 6, 8, 2]
// 4. filter() 过滤,返回一个新的数组,由通过条件的元素组成
let result = arr.filter(function(value) {
return value > 3
})
console.log(arr, result)
打印结果:
some()示例:
some() 返回布尔值,只要找到一个符合条件的元素,就返回 true,没找到返回 false
let arr = [2, 4, 6, 8, 2]
// 5. some() 返回布尔值,只要找到一个符合条件的元素,就返回 true,没找到返回 false
let result = arr.some(function(value) {
return value == 2
})
console.log(arr, result);
let result2 = arr.some(function(value) {
return value == 10
})
console.log(arr, result2);
打印结果:
every()示例:
every() 返回布尔值,所有元素满足条件,才返回 true
let arr = [2, 4, 6, 8, 2]
// 6. every() 返回布尔值,所有元素满足条件,才返回 true
let result3 = arr.every(function(value) {
return value == 2
})
console.log(arr, result3)
打印结果:
reduce()示例:
有两个参数,第一个是函数,第二个是默认初始值,第二个参数可以不写
接收的函数有4个参数:
第一个参数(pre)- - - 上一次的返回值
第二个参数(cur)- - - 当前元素值
第三个参数(index)- - - 当前元素索引
第四个参数(array)- - - 当前处理的数组
第3,4个参数没用到的话,可以不写
可以用来迭代处理数据,如累加,计数最值,数组去重、、、
let arr = [2, 4, 6, 8, 2]
// 7. reduce() 接收一个函数作为累加器
let sum = arr.reduce(function(pre, cur, index, array) {
return pre + cur
}, 0)
console.log(sum)
// 求数组中最大值
let max = arr.reduce(function(pre, cur) {
// return pre[cur] == -1 && pre.push(cur)
return Math.max(pre, cur)
})
console.log(max)
// 数组去重 indexOf()函数可以检测该元素是否在数组中,存在返回索引值,不存在返回 -1, push() 为数组追加元素
let res = arr.reduce(function(pre, cur) {
pre.indexOf(cur) == -1 && pre.push(cur)
return pre
}, [])
console.log(res)
打印结果:
for in()示例:
for in 如果数组原型有自定义方法,也会循环读取出来,所以不推荐使用这个遍历数组
let arr = [2, 4, 6, 8, 2]
// 8. for in 如果数组原型有自定义方法,也会循环读取出来,所以不推荐使用这个遍历数组
Array.prototype.foo = function() {
console.log('foo');
}
for (let index in arr) {
console.log(index, arr[index])
}
打印结果:
ES6中新增遍历方法:
- find()
- findIndex()
- for of
- for of + values()
- for of + keys()
- for of + entries()
find()示例:
find() 返回第一个通过测试的元素
let arr = [2, 4, 6, 8, 2]
// 1. find() 返回第一个通过测试的元素
let result = arr.find(function(value) {
return value == 2
})
console.log(result)
打印结果:
findIndex()示例:
findIndex() 返回第一个通过测试的元素的下标,下标从0开始
let arr = [2, 4, 6, 8, 2]
// 2. findIndex() 返回第一个通过测试的元素的下标
let result2 = arr.findIndex(function(value) {
return value == 2
})
console.log(result2)
打印结果:
for of示例:
和for in 相似,但是for of遍历返回的是值,for in 遍历返回的是索引
// 3. for of
let arr = [2, 4, 6, 8, 2]
for (let item of arr) {
console.log(item);
}
打印结果:
for of + values()示例:
和不加values()时的 for of 效果一样
let arr = [2, 4, 6, 8, 2]
// 4. for of + values() 和不加values()时的 for of 效果一样
for (let item of arr.values()) {
console.log(item);
}
打印结果:
for of + keys()示例:
获取数组下标
let arr = [2, 4, 6, 8, 2]
// 5. for of + keys() 获取数组下标
for (let item of arr.keys()) {
console.log(item);
}
打印结果:
for of + entries()示例:
获取下标和元素值,注意前面变量要以数组形式书写
let arr = [2, 4, 6, 8, 2]
// 6. for of + entries() 获取数组下标和值
for (let [index, item] of arr.entries()) {
console.log(index, item);
}
打印结果: