美文网首页
JS 内置函数 数组遍历方法总结

JS 内置函数 数组遍历方法总结

作者: lazy_tomato | 来源:发表于2021-04-01 15:48 被阅读0次

    START

    • 朋友遇到面试题，问到foreach和Map的区别。
    • 想到遍历数组，肯定是我们CV工程师经常用到的地方，但是方法有点多，很容易混淆，那不就踩坑了嘛。
    • 今天呢，就好好研究，以及复习一下，JS中数组的遍历。

    一.普通for循环

    • 使用方式
    var arr = [1, 2, 3, 4, 5, 6];

for (var i = 0; i < arr.length; i++) {
  console.log("索引：" + i + " 值：" + arr[i]);
}
    • 输出
    索引：0值：1
索引：1值：2
索引：2值：3
索引：3值：4
索引：4值：5
索引：5值：6
    • 总结
      • 比较直观，简单明了。
      • 略微比较麻烦，需要敲蛮久。
    • 其他

    二.forEach

    • 官方说明文档

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

    • 官方用法

      • arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

      • 参数说明：
callback
为数组中每个元素执行的函数，该函数接收一至三个参数：

    currentValue
    数组中正在处理的当前元素。
    
    index 可选
    数组中正在处理的当前元素的索引。
    
    array 可选
    forEach() 方法正在操作的数组。
    
thisArg 可选
可选参数。当执行回调函数 callback 时，用作   this 的值。

    • 举例使用方式（这里就不举例使用thisArg参数了，以常用的作为示例）

    let arr = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];

let out = arr.forEach((element, index,array,) => {
  console.log("element:" + element + " index:" + index + " array:" + array );
});

console.log("看一看foreach方法有没有返回值：",out)
    • 输出
    element:q index:0 array:q,w,e,r,t,y,u,i,o,p
element:w index:1 array:q,w,e,r,t,y,u,i,o,p
element:e index:2 array:q,w,e,r,t,y,u,i,o,p
element:r index:3 array:q,w,e,r,t,y,u,i,o,p
element:t index:4 array:q,w,e,r,t,y,u,i,o,p
element:y index:5 array:q,w,e,r,t,y,u,i,o,p
element:u index:6 array:q,w,e,r,t,y,u,i,o,p
element:i index:7 array:q,w,e,r,t,y,u,i,o,p
element:o index:8 array:q,w,e,r,t,y,u,i,o,p
element:p index:9 array:q,w,e,r,t,y,u,i,o,p
看一看foreach方法有没有返回值： undefined

    • 个人总结

      • forEach肯定是经常会被使用的，第一个参数是元素，第二个参数是索引，第三个参数是被遍历的数组本身。这个不要记混淆了。其次，有时候不需要索引，数组，参数是可以省略的。
      • 可以看到forEach是没有返回值的。打印出来是undefined。

    • 官方文档总结的注意事项！！！

      1. forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过 。

      个人理解就是，从数组索引由小到大，开始遍历。如果存在没有项，或者被删除了，将会跳过。

      下面的例子，就包含了，1.存在没有项；2.元素被删除了。

      let arr = ["q", "w", "e", "r", , , "u", "i", "o", "p"];

let out = arr.forEach((element, index, array) => {
  console.log("element:" + element + " index:" + index + " array:" + array);
  if (element === "i") {
    //  shift(); 移除数组第一个元素，这里移除的是`i`后面的`o`
    arr.shift();
  }
});

console.log("看一看foreach方法有没有返回值：", out);


// 打印
element:q index:0 array:q,w,e,r,,,u,i,o,p
element:w index:1 array:q,w,e,r,,,u,i,o,p
element:e index:2 array:q,w,e,r,,,u,i,o,p
element:r index:3 array:q,w,e,r,,,u,i,o,p
element:u index:6 array:q,w,e,r,,,u,i,o,p
element:i index:7 array:q,w,e,r,,,u,i,o,p
element:p index:8 array:w,e,r,,,u,i,o,p
看一看foreach方法有没有返回值： undefined
      1. forEach() 遍历的范围在第一次调用 callback 前就会确定。调用 forEach 后添加到数组中的项不会被 callback 访问到。

    下列代码可以看到，元素是添加进去了，但是并没有被遍历

    let arr = ["q", "w", "e", "r"];

let out = arr.forEach((element, index, array) => {
console.log("element:" + element + " index:" + index + " array:" + array);
arr.push("新增的元素" + index);
});

console.log("看一看foreach方法有没有返回值：", out);

// 打印
element:q index:0 array:q,w,e,r
element:w index:1 array:q,w,e,r,新增的元素0
element:e index:2 array:q,w,e,r,新增的元素0,新增的元素1
element:r index:3 array:q,w,e,r,新增的元素0,新增的元素1,新增的元素2
看一看foreach方法有没有返回值： undefined
    1. forEach()总是返回 undefined值，并且不可链式调用 .

    上述代码已经打印了返回值，是undefined。

    1. 即 forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。

    个人理解就是，forEach默认不会直接修改原数组，但是呢，也可以在方法中对原数组进行修改。

    1. 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
    2. 如果使用 promise 或 async 函数作为 forEach() 等类似方法的 callback 参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。

    三.Map()函数

    • 官方说明文档

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

    • 功能说明

      map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

    • 官方用法

    var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])
    • 举例使用方法
    let arr = [1, 2, 3, 4];

let newArr = arr.map(function (element, index) {
  return element + 4;
});

console.log("原本的数组：",arr,"新返回的数组",newArr)



原本的数组： [ 1, 2, 3, 4 ] 新返回的数组 [ 5, 6, 7, 8 ]

    • 个人总结

      • 对于map我个人的理解，就是保持原本数组不变，按照你的需求，处理一遍数组里面的元素，并返回给你你处理过后的数组。

      • A/你不打算使用返回的新数组（或/且） B/ 你没有从回调函数中返回值 ,不要推荐使用map，去使用其他的方法。

    四.filter()函数

    filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    • 使用示例

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

let newArr = arr.filter((element) => {
    return element>2
});


console.log("原本的数组：",arr,"新返回的数组",newArr)


//输出
原本的数组： [ 1, 2, 3, 4 ] 新返回的数组 [ 3, 4 ]

    • 个人总结

      • 本身filter英文就是过滤器的意思。使用它，去筛选出符合设定要求的数据，
      • 和map相同，不会修改原数组。不同的是它会返回满足筛选条件的元素，组成的一个新数组。

    五.some()函数

    some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

    • 使用示例

      const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

    • 个人总结

      • 不会修改原数组
      • 只要数组中有一个元素满足条件，就会返回ture，经常用于，判断数组中是否有符合条件的数据。
      • 返回值类型为，布尔值

    六.every()函数

    every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

    • 使用示例

      const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

    • 个人总结

      • 注意：若收到一个空数组，此方法在一切情况下都会返回 true。
      • 不会修改原数组
      • 返回值类型为，布尔值
      • every 和数学中的"所有"类似，当所有的元素都符合条件才会返回true。正因如此，若传入一个空数组，无论如何都会返回 true。（这种情况属于无条件正确：正因为一个空集合没有元素，所以它其中的所有元素都符合给定的条件。)

    七.find()函数

    • 个人总结

      • 不会修改原数组

      • 返回值类型为： 元素的值或者 undefined。

    八.findIndex()函数

    findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

    • 使用示例

      const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

    • 个人总结

      • 不会修改原数组
      • 返回值类型为： 元素的索引或者 -1
      • 功能其实和find很类似，只是返回值一个是元素的值，一个是索引，还有就是没有找到的情况，一个返回的是undefined一个是-1

    tips

    说说forEach和map的区别

    • 能用forEach()做到的，map()同样可以。反过来也是如此。
    • map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
    • forEach()允许callback更改原始数组的元素。map()返回新的数组。

    如何选择

    • forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 -- 比如存入数据库或则打印出来。
    • map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

    END

    • 结束

    2021/04/01

    相关文章

      网友评论

          本文标题：JS 内置函数 数组遍历方法总结

          本文链接：https://www.haomeiwen.com/subject/tvvtkltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JS 内置函数 数组遍历方法总结|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！