【前端基础】数组方法

342 阅读3分钟

ForEach

  • 功能:循环遍历数组的每一项
  • 用法:
    	let words = ['one', 'two', 'three', 'four'];
      words.forEach((word) => {
        console.log(word);
        if ( word === 'two' ) {
            words.shift();
        }
    	});
      // 向上述代码中的这种情况,由于删除了原数组的第一个元素,所以改变了原数组。
    
  • 返回值:无,返回 undefined
  • 是否改变原数组:要看 callback 中是否对原数组进行了操作才知道是否改变,可能改变也可能不改变。

Map

  • 功能:map() 方法是将数组中的每一项(有值)按顺序都调用一次 callback 函数,然后每一项的返回结果组成一个新的数组作为整个 map 方法的返回值。
  • 用法:
      let arr = [1,2,3,4,5];
      arr = arr.map(item => item * 2); // [2,4,6,8,10]
    
  • 返回值:返回一个新数组
  • 是否改变原数组:不改变

Reduce

  • 功能:reduce() 的 callback 一共有 4 个参数,分别是 accumulator, currentValue , currentIndex, array
       reduce 有一个 initialValue 的参数,这个参数就是第一次调用 callback 的值,默认使用数组中的第一个元素。
       在用法上 reduce 和 map 十分的相似,相似之处在于他都是对数组中的每一个有效元素执行一次 callback 函数,区别在于他会存储上一次 callback 的结果作为下一次的参数。
       ⚠️,initialValue 作为callback 函数的初始值,如果没有指定 initialValue,那么 reduce 会从索引为 1 的地方开始执行 callback 方法,跳过第一个索引,如果指定了 initialValue ,从索引 0 开始。

  • 用法:

      // 语法:arr.reduce(callback[, initialValue])
      // 使用 reduce 实现数组的累加
      let arr = [1,4,8,9,7,20,23,34];
      arr.reduce((pre, nxt) => pre + nxt, 0);
      // initialValue 设定为 0,说明从索引 0 开始累加,初始的 pre 为 0
      // 如果 initialValue 设置为 10,说明从 0 开始累加,初始的 pre 为 10
    
  • 返回值:callback 函数累计处理的结果

  • 是否改变原数组:不会

Filter

  • 功能:filter() 方法会对数组中的每一项进行调用 callback 函数,并根据调用结果返回的 true 或 false 来组建一个新的数组(该数组是原数组的子集),即根据 callback 的给定条件过滤,过滤后的数组加入到新数组中。
  • 用法:
      [1, 2, 3, 7, 9, 10, 13, 12, 18].filter((ele) => ele%2 ===0); // [2, 10, 12, 18]
    
  • 返回值:返回一个新数组
  • 是否改变原数组:不改变原数组

Find

  • 功能:find() 方法用于找出第一个符合 callback 函数的元素,所有元素依次执行 callback,直到找出第一个返回值为 true 的元素并返回。若没有符合条件的元素,则返回 undefined。
  • 用法:
      let arr = [1,4,8,9,7,20,23,34];
      arr.find(item => item > 10); // 20
    
  • 返回值:返回一个值或者 undefined
  • 是否改变原数组:不改变

FindIndex

  • 功能:findIndex() 和 find() 十分类似,不同之处在于 find() 是返回符合 callback 函数的元素,而 findIndex() 是返回元素的下标,若无返回 -1;
  • 用法:
      let arr = [1,4,8,9,7,20,23,34];
      arr.findIndex(item => item > 10);  // 5
    
  • 返回值:元素的下标或者 -1
  • 是否改变原数组:不改变

Every

  • 功能:every() 方法用来测试数组中的每一项是否都通过了 callback 函数的测试,只有全部通过才返回 true;否则 false。
  • 用法:
      // 数组中的每一项都大于或等于 10
      [1, 2, 3].every((ele) => ele >= 10);   // false
    
  • 返回值:true | false
  • 是否改变原数组: 不改变原数组

Some

  • 功能:some() 方法和 every() 类似,every 是需要数组中的每一项都通过 callback 函数的测试才返回 true,而 some 是只要数组中有满足 callback 的任意一项就返回 true,如果一项都没有则返回 false。
  • 用法:
      [1, 2, 3].some((ele) => ele >= 3);   // true
    
  • 返回值:true | false
  • 是否改变原数组:不改变原数组