JS数组遍历方式

JS 数组遍历方法

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


    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]

  • IE10+ (IE9不支持严格模式)

  • filter 不会改变原数组,它返回过滤后的新数组。

  • filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

    var array1 = [5, 12, 8, 130, 44];
    var found = array1.find(value => value > 10);
    console.log(found);

    // expected output: 12
  • IE不支持

  • find 方法不会改变数组。

  • 在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

forEach() 方法对数组的每个元素执行一次提供的函数。

    var array1 = ['a', 'b', 'c'];

    array1.forEach(value => console.log(value));

    // expected output: "a"
    // expected output: "b"
    // expected output: "c"
  • IE10+ (IE9不支持严格模式)

  • forEach() 为每个数组元素执行callback函数;不像map() 或者reduce() ,它总是返回 undefined值,并且不可链式调用

  • forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ,之后的元素将被跳过

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

    // one
    // two
    // four

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

    var array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    console.log(map1);

    // expected output: Array [2, 8, 18, 32]
  • IE10+ (IE9不支持严格模式)

  • map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。

  • 使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。

every() 方法测试数组的所有元素是否都通过了指定函数的测试。


    var array1 = [1, 30, 39, 29, 10, 13];
    console.log(array1.every(value => value < 40));

    // expected output: true

  • IE10+ (IE9不支持严格模式)

  • every 不会改变原数组。

  • 空数组返回true。

  • every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

    var array = [1, 2, 3, 4, 5];
    console.log(array.some(value => value % 2 === 0));

    // expected output: true
  • IE10+ (IE9不支持严格模式)

  • some 被调用时不会改变数组。

  • some 遍历的元素的范围在第一次调用 callback. 时就已经确定了。在调用 some 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了,则其传递给 callback 的值是 some 访问到它那一刻的值。

猜你喜欢

转载自blog.csdn.net/qq_28949081/article/details/82809469
今日推荐