登录
原创

ES6-数组的各种遍历

发布于 2021-10-09 阅读 38
  • 前端
  • JavaScript
  • ECMAScript 6
原创

数组的各种遍历

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])
} 

打印结果:

image.png

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)
})

遍历结果:

image.png

如果加 break 或者 continue,会报错:

image.png

image.png

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);

打印结果:

image.png

filter()示例:

filter() 过滤,返回一个新的数组,由通过条件的元素组成,不会对原来的数组造成影响

let arr = [2, 4, 6, 8, 2]

// 4. filter() 过滤,返回一个新的数组,由通过条件的元素组成
let result = arr.filter(function(value) {
    return value > 3
})
console.log(arr, result)

打印结果:

image.png

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);

打印结果:

image.png

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)

打印结果:

image.png

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)

打印结果:

image.png

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])
}

打印结果:

image.png

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)

打印结果:

image.png

findIndex()示例:

findIndex() 返回第一个通过测试的元素的下标,下标从0开始

let arr = [2, 4, 6, 8, 2]

// 2. findIndex() 返回第一个通过测试的元素的下标
let result2 = arr.findIndex(function(value) {
    return value == 2
})
console.log(result2)

打印结果:

image.png

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);
}

打印结果:

image.png

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);
}

打印结果:

image.png

for of + keys()示例:

获取数组下标

let arr = [2, 4, 6, 8, 2]

// 5. for of + keys() 获取数组下标
for (let item of arr.keys()) {
    console.log(item);
}

打印结果:

image.png

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);
}

打印结果:

image.png

评论区

零00
5粉丝

时光荏苒,我自清欢

0

0

0

举报