js 数组迭代方法总结

Posted 2021-05-21 黑黑哈哈

for

 let arr = [1, 2, 3];
      for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
      }
// 1 2 3

map

map生成一个新数组，适合的场景是需要操作某些数据，并且返回新的数组，并且map不支持异步

var new_array = [1, 4, 5].map(
        //传入数组元素，元素索引，原数组本身
        function callback(currentValue, index, arr) {
          let total = currentValue + this.a;
          return total;
        },
        //回调函数的this指向
        {a: 1}
      );
      console.log(new_array);

forEach

forEach() 为每个数组元素执行一次 callback 函数，不支持异步
注意：1.除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具
2.forEach() 不会在迭代之前创建数组的副本，所以如果数组在迭代时被修改了，则其他元素会被跳过。

var words = [\'one\', \'two\', \'three\', \'four\'];
words.forEach(function(word) {
  console.log(word);
  if (word === \'two\') {
    words.shift();
  }
});

entries

entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

const array1 = [\'a\', \'b\', \'c\'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);

every

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值,
注意：1.every 不会改变原数组
2.every 遍历的元素范围在第一次调用 callback 之前就已确定,后面添加就无法遍历到
3.空数组返回true
4.callback 只会为那些已经被赋值的索引调用

[12, 5, 8, 130, 44].every(x => x >= 10); // false
  [12, , , , 5, 8, 130, 44].every((x) => {
        console.log(x);// 12 5
        return x >= 10;
      });

some

some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值
注意：1.空数组返回false
2.找到真值就立即返回
3.callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用，意思就是会跳过空值

[2, 5, 8, 1, 4].some(x => x > 10);  // false
 [2, 5, 8, 1, , , 4].some((x) => {
        console.log(x); // 2 5 8 1 4
        return x > 10;
      });

filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
注意：1.filter 遍历的元素范围在第一次调用 callback 之前就已经确定了
2.跳过空值

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

find

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
注意：1.在第一次调用 callback函数时会确定元素的索引范围，但是如果被callback改变会有影响
2.find方法不会改变数组

findIndex

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

keys

keys() 方法返回一个包含数组中每个索引键的Array Iterator对象
注意：1.不会跳过空值

reduce

reduce是从左往右
注意1. 如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));

reduceRight

reduceRight从右往左

values

注意：1.数组迭代器中存储的是原数组的地址，而不是数组元素值
2.如果数组中元素改变，那么迭代器的值也会改变

const array1 = [\'a\', \'b\', \'c\'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"

for...of

const array1 = [\'a\', \'b\', \'c\'];

for (const element of array1) {
  console.log(element);
}

总结：

method	改变原数组	返回值	创建元素副本	跳过空值	异步	跳出循环
for	否	无	否	否	支持	break,continue
for of	否	无	否	否	支持	break,continue
map	否	新数组	是	是	不支持	不能
forEach	是	无	否	是	不支持	不能
entries	否	Array Iterator 对象	--	否	--	--
every	否	返回 Boolean	是	是	--	--
some	否	返回 Boolean	是	是	--	--
filter	否	新数组	是	是	--	--
find	否	符合项或是 undefined	否	否	--	--
findIndex	否	索引或是 -1	否	否	--	--
keys	否	Array Iterator 对象	否	否	--	--
reduce	否	函数累计处理的结果	否	是	支持	--
reduceRight	否	函数累计处理的结果	否	是	支持	--
values	否	Array Iterator 对象	否	否	--	--