ES6-数组的各种遍历

数组的各种遍历

ES5中遍历方法：

1. for()
2. forEach()
3. map()
4. filter()
5. some()
6. every()
7. reduce()
8. 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中新增遍历方法：

1. find()
2. findIndex()
3. for of
4. for of + values()
5. for of + keys()
6. 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);
}

打印结果：