• 遍历的方法总结


    1.for循环

    2.forEach((item,index,arry)=>{ })

    3.for key in array/object

    4.for key of array/string

    for..in 和for..of的区别

    5.map() 映射

    6.filter() 过滤

    7.some((item,index,array)=>{}) 

    8.every((item,index,array)=>{}) 

    8.reduce(callback,[initialValue]) 实现数据的累加

    9.find() 指定元素查找

    10.findIndex()指定元素查找下标


    1.for循环

    优化:使用临时变量,将length缓存起来,避免重复获取length,在length较大时效果才比较明显.

    var arr = [1, 2, 3, 4, 5, 6]   var len = arr.length

    for(var i = 0; i < len; i++) { console.log(arr[i]) } // 1 2 3 4 5 6

    2.forEach((item,index,arry)=>{ })

    效率较for高,默认没有返回值

    循环基本数据类型时,不会改变原数据;

    循环复杂数据类型时,会改变原数据的对象属性值;

    var arr = [1, 2, 3, 4, 5, 6]

    arr.forEach((item, idnex, array) => {  console.log(item)    // 1 2 3 4 5 6 

    console.log(array)    // [1, 2, 3, 4, 5, 6]  })

    // 循环的数组元素是基本数据类型,不会改变原数据的数据

    var arr1 = [1, 2, 3, 4, 5, 6]

    arr1.forEach((item) => { item = 10  })   console.log(arr1) // [1, 2, 3, 4, 5, 6]

    // 循环的数组元素为对象,会改变原数组的对象属性的值

    var arr2 = [ { a:1, b:2 } , { a:11, b:12 } ]

    arr2.forEach((item) => { item.a = 10 })

    console.log(arr2) //  [{a: 10, b: 2}, {a: 10, b: 2}]

    // 使用try...catch...可以跳出循环

    try {

      let arr = [1, 2, 3, 4];

      arr.forEach((item) => { // 跳出条件

    if (item === 3) { throw new Error("LoopTerminates") ; }  console.log(item) ; }); } 

    catch (e) { if (e.message !== "LoopTerminates") throw e ; } ; // 1 2

    3.for key in array/object

    不可以遍历空数组,效率最低

    遍历数组时,key为数组的下标;

    遍历对象时,key为对象的属性名;

    var arr = ['我', '是', '谁', '我', '在', '哪']

    for(let key in arr) { console.log(key) } // 0 1 2 3 4 5

    let obj = { a: 11, b: 22 , c: 33 }

    for(let key in obj) { console.log(key) } // a b c

    4.for key of array/string

    性能较for .. in .. 好,较for差.

    注意:不能遍历循环对象,因为任何数据只要部署interator接口,就可以完成遍历操作,有些数据结构原生具备interator接口,如array/map/set/string等,而interator接口是部署在Symbol.interator属性上的,而对象object没有Symbol.interator属性,所以无法遍历.

    var arr = ['我', '是', '谁', '我', '在', '哪']

    for(var key of arr) { console.log(key) } // 我 是 谁 我 在 哪

    for..in 和for..of的区别

    for..in只能获取对象的键名,不能获得键值; for..of允许遍历获得键值;

    5.map() 映射

    性能较forEach差,不会改变原数组

    遍历每一个元素并返回处理后的值,返回数组长度与原数组长度一致

    注意:不能使用break/continue跳出数组,会报错,可以使用try..catch跳出数组

    var array = arr.map((item,index)=>{ return  })

    // 一、会改变原数组

    var arr = [1, 2, 3, 4, 5, 6]

    var newArr = arr.map(function (item, idnex) { return item * item })

    console.log(arr)      // [1, 2, 3, 4, 5, 6]    console.log(newArr)  // [1, 4, 9, 16, 25, 36]

    // 二、会改变原数组元素中对象的属性值

    var arr = [{a: 1, b: 2},{a: 11, b: 12}]

    let newARR = arr.map((item)=>{ item.b = 111 ; return item })

    console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]

    console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

    // 三、不会改变原数组

    var arr = [{a: 1, b: 2},{a: 11, b: 12}]

    let newARR = arr.map((item)=>{ return { ...item , b:111 } })

    console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]

    console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

    // 四、使用try...catch...可以跳出循环

    try { var arr = [1, 2, 3, 4];

    arr.map((item) => { //跳出条件

    if (item === 3) { throw new Error("LoopTerminates") ; }  console.log(item) ; return item });

    } catch (e) { if (e.message !== "LoopTerminates") throw e ; } ; // 1 2

    6.filter() 过滤

    遍历数组,过滤筛选出符合条件的元素返回一个新的数组,没有符合条件时,返回空数组

    var newarr = arr.filter((item,index)=>{ return 条件 })

    var arr = [ { id: 1, name: '买笔', done: true } , { id: 2, name: '买笔记本', done: true },

    { id: 3, name: '练字', done: false } ]

    var newArr = arr.filter(function (item, index) { return item.done }) console.log(newArr)

    // [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]

    7.some((item,index,array)=>{}) 

    遍历数组,只要有满足条件的元素就返回true,否则返回false;

    检测到有一个满足条件就停止了,否则继续检测.

    var arr = [ { id: 1, name: '买笔', done: true } , { id: 2, name: '买笔记本', done: true },

    { id: 3, name: '练字', done: false } ]

    var bool = arr.some(function (item, index) { return item.done })

    console.log(bool)    // true

    8.every((item,index,array)=>{}) 

    遍历数组,所有元素都满足条件返回true,否则返回false

    注意:空数组调用every返回true

    var arr = [ { id: 1, name: '买笔', done: true } , { id: 2, name: '买笔记本', done: true },

    { id: 3, name: '练字', done: false } ] 

    var bool = arr.every(function (item, index) { return item.done }) console.log(bool)    // false

    8.reduce(callback,[initialValue]) 实现数据的累加

    arr.reduce(function(prev, cur, index, array){ // array:原数组 prev:上一次调用回调时的返回值,或者初始值  initcur:当前正在处理的数组元素index:当前正在处理的数组元素的索引  init:初始值}, init)

    array.reduce( ( accumulator,currentValue,currentIndex,array )=>{

    accumulator:累加器 每次迭代的结果

    currentValue:当前数组中的元素 会遍历数组 得到数组中的值

    currentIndex:当前元素在数组中的下标

    array:数组对象本身

    initialValue:可选参数,会影响accumulator的初始值,分两种情况:

    如果没给initialValue,那么accumulator取自数组中的第一个元素,此时currentValue会取自数组中的第二个元素,开始迭代

    如果给定了initialValue,那么initialValue会作为accumulator的初始值,此时currentValue会取自数组中的第一个元素,开始迭代

    } [initialValue:初始值])

    //求和varsum = arr.reduce(function (prev, cur) { return prev + cur; } , 0 ) ;

    //取最大值varmax = arr.reduce(function (prev, cur) { return Math.max(prev,cur ) ; });

    9.find() 指定元素查找

    遍历数组,原数组不改变返回符合条件的第一个元素,没有符合条件的元素时返回undefined

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]

    var num = arr.find(function (item, index) { return item === 3 }) console.log(num)  //  3

    10.findIndex()指定元素查找下标

    遍历数组,不会改变原数组,返回符合条件的第一个元素的下标,没有符合条件的元素时返回-1

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]

    var num = arr.findIndex(function (item) { return item === 3 }) console.log(num)  //  4

  • 相关阅读:
    kotlin aes 加密解密
    3d场景重建&图像渲染 | 神经辐射场NeRF(Neural Radiance Fields)
    Power Automate-创建自定义连接器
    Java容器之set
    零基础学Java(2)数据类型与变量
    SpringCloud-微服务架构演变
    docker入门级详解
    【斯坦福大学公开课CS224W——图机器学习】四、Link Analysis: PageRank
    Flutter入门
    华为数据之道第一部分导读
  • 原文地址:https://blog.csdn.net/m0_65912225/article/details/125478053