zoukankan      html  css  js  c++  java
  • ES6数组方法总结

    关于数组中forEach() 、map()、filter()、reduce()、some()、every()的总结

    1. forEach()

    let array = [1,2,3,4];
    
    array.forEach((item, index, array) => {
    
      console.log(item);
    
    });
    

    forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.

    2. map()

    let array = [1, 2, 3, 4];
    
    let temp = array.map((item, index, array) => {
    
      return item * 10;
    
    });
    
    console.log(temp);  //  [10, 20, 30, 40];
    
    console.log(array);  // [1, 2, 3, 4]
    
    // map 遍历数组, 会返回一个新数组, 不会改变原来数组里的内容
    
    let temp2 = array.map(String);  // 把数组里的元素都转成字符串
    

    3. filter()

    let array = [1, 2, 3, 4];
    
    let temp = array.filter((item, index, array) => {
    
      return item >  3;
    
    });
    
    console.log(temp);  // [4]
    
    console.log(array);  // [1, 2, 3, 4]
    
    // filter 会过滤掉数组中不满足条件的元素, 把满足条件的元素放到一个新数组中, 不改变原数组
    

    4. reduce()

    let array = [1, 2, 3, 4];
    
    let temp = array.reduce((x, y) => {
    
      console.log("x": x);
    
      console.log("y": y);
    
      return x + y;
    
    });
    
    console.log(temp);  // 10
    
    console.log(array);  // [1, 2, 3, 4]
    
    // x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
    
    // y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素
    

    5. every()

    let array = [1, 2, 3, 4];
    
    let bo = array.every((item, index, array) => {
    
      return item > 2;
    
    });
    
    console.log(bo);    // false;
    
    // every遍历数组, 每一项都是true, 则返回true, 只要有一个是false, 就返回false
    

    6. some()

    let array = [1, 2, 3, 4];
    
    let tmep = array.some((item, index, array) => {
    
      return item > 1;
    
    });
    
    console.log(temp);  // true
    
    // 遍历数组的每一项, 有一个返回true, 就停止循环
    

    以上6个方法IE9及以上才支持。不过可以通过babel转义支持IE低版本。
    以上均不改变原数组。
    some、every返回true、false。
    map、filter返回一个新数组。
    reduce让数组的前后两项进行某种计算,返回最终操作的结果。
    forEach 无返回值。

  • 相关阅读:
    SecureCRT
    MySQL
    流式计算概述
    WEB加密算法
    drop、truncate和delete的区别
    JVM参数
    HTTP1.0与HTTP1.1区别
    HTTP请求方法
    Java查看JVM转态的命令总结
    go二次更新
  • 原文地址:https://www.cnblogs.com/web-record/p/9203703.html
Copyright © 2011-2022 走看看