map() 和 forEach() 的区别.push, pop, shift, unshift, splice, sort, reverse,flat,flat

194 阅读3分钟

两个操作都有相同的部分

  • 都只能遍历数组
  • 都可以循环遍历数组中的每一项
  • 第一个参数都是 callback 函数,且该函数接收三个参数( itemindexarray )
  • 都有可选的第二个参数 thisArg 可改变 callback 中 this 的值(这个可以忽略基本用不到)

不同的是:

  • map 有返回值,而 forEach 没有
  • map 的运行速度更快
  • map 可以被链式调用( forEach 因为没有返回值不能被链式调用)

所以哪个更好?

如果你想改变数组并且返回一个新数组时候推荐使用 .map(),不光是因为它会返回一个新数组和速度快,而且可以被链式调用继续操作返回的数组。

如果只是单纯想操作数据但是不想返回一个数组时,使用 .forEach() 就可以省略多余的步骤。

拓展

  • 如果已访问的元素在迭代时被删除了( 例如使用 .shift() 操作了原数组 ),之后的元素将被跳过
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// => one
// => two
// => four  // 这里的 three 被跳过了
  • 为什么都说 map 和 forEach 不会改变原数组?
    因为不管是 map 还是 forEach,当中的 item 都是拷贝的对象,你去直接修改他不会影响原数组,但是你去修改其内部的属性,就会影响。
    类似于深浅拷贝的问题,所以说不能修改原数组也不是绝对的,看你怎么修改操作数据的。

pushpopshiftunshiftsplicesortreverse

  • push()

    • 作用:在数组末尾添加一个或多个元素,并返回数组的新长度。

    • 示例

      let arr = [1, 2, 3];
      arr.push(4);  // arr 变为 [1, 2, 3, 4]
      
  • pop()

    • 作用:删除数组最后一个元素,并返回被删除的元素。

    • 示例

      let arr = [1, 2, 3];
      let last = arr.pop();  // arr 变为 [1, 2],last 为 3
      
  • shift()

    • 作用:删除数组的第一个元素,并返回被删除的元素。

    • 示例

      let arr = [1, 2, 3];
      let first = arr.shift();  // arr 变为 [2, 3],first 为 1
      
  • unshift()

    • 作用:在数组开头添加一个或多个元素,并返回数组的新长度。

    • 示例

      let arr = [1, 2, 3];
      arr.unshift(0);  // arr 变为 [0, 1, 2, 3]
      
  • splice()

    • 作用:通过删除或替换现有元素以及添加新元素来修改数组,并返回被删除的元素。

    • 示例

      let arr = [1, 2, 3, 4];
      let removed = arr.splice(1, 2);  // arr 变为 [1, 4],removed 为 [2, 3]
      
  • sort()

    • 作用:对数组中的元素进行排序,并返回数组的引用。

    • 示例

      let arr = [3, 1, 2];
      arr.sort();  // arr 变为 [1, 2, 3]
      
  • reverse()

    • 作用:颠倒数组中元素的顺序,并返回数组的引用。

    • 示例

      let arr = [1, 2, 3];
      arr.reverse();  // arr 变为 [3, 2, 1]
      

8. flat()

  • 作用:按照指定深度递归地将嵌套数组“拉平”,并返回一个新数组。

  • 示例

    let arr = [1, [2, [3, [4]]]];
    let flattened = arr.flat(2);  // flattened 为 [1, 2, 3, [4]]
    
  • 说明flat() 默认会将数组“拉平”一层,可以传递参数来指定需要平铺的深度。

9. flatMap()

  • 作用:首先对数组中的每个元素执行一个映射函数,然后将结果“拉平”一层,并返回一个新数组。

  • 示例

    let arr = [1, 2, 3];
    let mapped = arr.flatMap(x => [x, x * 2]);  // mapped 为 [1, 2, 2, 4, 3, 6]
    
  • 说明flatMap() 相当于先执行 map() 方法,再对结果执行一次 flat()

  • flat(Infinity) 是一种非常有用的操作,它可以将一个嵌套的多维数组彻底展开为一维数组,无论嵌套的层级有多深。

flat(Infinity) 的作用

  • 作用:使用 flat(Infinity) 可以将数组中的所有嵌套数组元素递归地“拉平”,直到没有嵌套的数组为止。
  • Infinity:这是一个特殊的值,表示将数组“拉平”到最深层次,即不论嵌套了多少层,都将展开为一维数组。

示例

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened);  // 输出: [1, 2, 3, 4, 5]

Infinity 是一个全局变量(只读),大于任何值,你也可以取反 -Infinity 使用
基本上只要可以传入一个正整数来 比较 或者 迭代 的都可以使用它