最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > js中数组遍历方法汇总

js中数组遍历方法汇总

发布时间:2022年04月18日 评论数:抢沙发阅读数: 1569

    array

    1.for语句

    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    for(let i = 0, len = arr.length; i < len; i++) {
        console.log(arr[i])
    }

    2.for...in语句
    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    // 遍历数组返回索引
    for(let idx in arr) {
        console.log(idx)
    }
    const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    // 遍历对象返回对象属性
    for(let o in obj) {
        console.log(o)
    }

    3.for...of语句
    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    for(let i of arr) {
        console.log(i)
    }

    4.forEach语句
    空数组不会执行
    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    /**
     * [description]
     * @param  {[type]} item [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可选。当前遍历的数组]
     * @return {[type]}      [description]
     */
    arr.forEach(function(item, idx, arr) {
        console.log(item, idx, arr)
    })

    5.while语句
    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    let i = 0, len = arr.length;
    while(i < len) {
        console.log(arr[i]);
        i++
    }
    6.do...while语句
    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    let i = 0, len = arr.length;
    do {
        console.log(arr[i]);
        i++
    }
    while(i < len)
    7.map方法
    不会改变原数组,返回一个新数组
    不会执行空数组
    const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    /**
     * [description]
     * @param  {[type]} val  [当前元素]
     * @param  {[type]} idx  [当前索引]
     * @param  {[type]} arr) [当前数组]
     * @return {[type]}      [description]
     */
    arr.map(function(val, idx, arr) {
        console.log(val, idx, arr)
    })

    8.every方法
    用于检测数组所有元素是否符合指定条件(通过行数提供的条件)
    使用指定函数检测数组中的元素:
    被检测数组中,如果有一个元素不满足要求,则返回false,且剩余元素不再检测;如果都满足条件,则返回true
    不会对空数组进行检测
    不会改变原始数组
    const arr = [1, 2, 3, 4, 5, 6]
    /**
     * [description]
     * @param  {[type]} val  [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可先。当前数组]
     * @return {[Boolean]}   [数组满足条件返回true]
     */
    let test = arr.every(function(val, idx, arr) {
        return val < 7
    })
    9.some方法
    用于检测数组所有元素是否符合指定条件(通过行数提供的条件)
    使用指定函数检测数组中的元素:
    被检测数组中,如果有一个元素满足要求,则返回true,且剩余元素不再检测;如果都不满足条件,则返回false
    不会对空数组进行检测
    不会改变原始数组
    const arr = [1, 2, 3, 4, 5, 6]
    /**
     * [description]
     * @param  {[type]} val  [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可先。当前数组]
     * @return {[Boolean]}   [数组中有一项满足条件就返回true]
     */
    let test = arr.some(function(val, idx, arr) {
        console.log(val, idx, arr)
        return val < 2
    })
    console.log(test)
    10.filter
    用于检测数组所有元素是否符合指定条件(通过行数提供的条件)
    使用指定函数检测数组中的元素:
    返回符合条件的元素(即过滤掉不符合条件的元素),组成新数组
    不会对空数组进行检测
    不会改变原始数组
    const arr = [1, 2, 3, 4, 5, 6]
    /**
     * [description]
     * @param  {[type]} val  [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可先。当前数组]
     * @return {[Array]}   [符合条件的元素组成新数组]
     */
    let test = arr.filter(function(val, idx, arr) {
        // console.log(val, idx, arr)
        return val < 5
    })
    console.log(test)
    11.reduce方法
    接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
    空数组是不会执行回调函数
    const arr = [1, 2, 3, 4, 5, 6]
    /**
     * [description]
     * @param  {[type]} total  [必须。初始值或计算结束后的返回值]
     * @param  {[type]} val  [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可先。当前数组]
     * @return {[type]}   [整个数组的和]
     */
    let test = arr.reduce(function(total, val, idx, arr) {
        console.log(total, val, idx, arr)
        return total + val
    })
    console.log(test)
    12.find方法
    返回被检测数组中满足条件的第一个元素,之后的不会再执行;如果没有符合条件的,则返回undefined
    const arr = [1, 2, 3, 4, 5, 6]
    /**
     * [description]
     * @param  {[type]} val  [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可先。当前数组]
     * @return {[type]}   [符合条件的第一个元素]
     */
    let test = arr.find(function( val, idx, arr) {
        // console.log(val, idx, arr)
        return val > 3
    })
    console.log(test)
    13.findIndex方法
    传入一个条件函数,遍历数组每一项,返回符合条件元素的索引,之后的则不会再执行,如果没有符合条件的元素,则返回-1
    空数组不执行
    不改变原数组
    const arr = [1, 2, 3, 4, 5, 6]
    /**
     * [description]
     * @param  {[type]} val  [必须。当前元素]
     * @param  {[type]} idx  [可选。当前元素索引]
     * @param  {[type]} arr) [可先。当前数组]
     * @return {[type]}   [符合条件的第一个元素的索引]
     */
    let test = arr.findIndex(function( val, idx, arr) {
        console.log(val, idx, arr)
        return val > 3
    })
    console.log(test)

二维码加载中...
本文作者:DGF      文章标题: js中数组遍历方法汇总
本文地址: http://arbays.com/post-180.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论