📜  JavaScript ES6 中一些新引入的数组方法

📅  最后修改于: 2022-05-13 01:56:38.608000             🧑  作者: Mango

JavaScript ES6 中一些新引入的数组方法

数组用于在 JavaScript 中完全存储多种数据类型的元素。此外,有时您必须根据网页上的要求处理从 API 收到的响应。有时,响应是对象,必须转换为数组才能执行所需的操作。这些数组操作方法可以节省您的时间。

  1. map() 方法:它遍历数组的每个元素并应用一些功能条件并返回新数组。它不会更改主数组,而是返回新的转换值数组。此外,它使用箭头函数的简写符号来减少单行代码。

    Javascript
    var abc = [10, 20, 30, 40, 50];
    let xyz = abc.map(res => res * 2);
    console.log("The main array: ", abc);
    console.log("The modified array: ", xyz);


    Javascript
    let abc =[10, 20, 30, 40, 50];
    let xyz = abc.filter(res => res > 35);
    console.log("The main array: ", abc);
    console.log("The modified array: ", xyz);


    Javascript
    let abc = [10, 20, 30, 40, 50];
    let xyz = abc.find(res => res > 35);
    console.log("The main array: ", abc);
    console.log("The modified array: ", xyz);


    Javascript
    let abc =[10, 20, 30, 40, 50];
    let xyz = abc.reduce((element, iterator)=>iterator+element, 0);
    console.log("The addition is: ", xyz);


    Javascript
    let abc = [10, 20, 30, 40, 50];
      
    let xyz = abc.reduce((element, iterator) 
              => iterator + element, 2000);
      
    console.log("The main array: ", abc);  
    console.log("The addition is: ", xyz);


    输出:

    The main array:  [10, 20, 30, 40, 50]
    The modified array: [20, 40, 60, 80, 100]
    
  2. Filter() 方法:当您想找出通过某个条件的元素时,此方法很有用。它遍历所有元素并返回一个包含满足条件的数组。
    此外,它不会改变主数组并创建新数组。

    Javascript

    let abc =[10, 20, 30, 40, 50];
    let xyz = abc.filter(res => res > 35);
    console.log("The main array: ", abc);
    console.log("The modified array: ", xyz); 
    

    输出:

    The main array : [10, 20, 30, 40, 50]
    The modified array: [40, 50]
    

    注意: filter()方法在 IE 中广泛兼容,因为它属于 ES5,而find()是在 ES6 中引入的,因此只有最新的浏览器(IE 11)兼容它。

  3. Find() 方法:当您想找出通过某个条件的元素时,可以使用此方法。这与filter()方法非常相似,但它返回满足条件的第一个元素并且不会进一步迭代。

    Javascript

    let abc = [10, 20, 30, 40, 50];
    let xyz = abc.find(res => res > 35);
    console.log("The main array: ", abc);
    console.log("The modified array: ", xyz);
    

    输出:

    The main array: [10, 20, 30, 40, 50] 
    The modified array: [40]
    
  4. Reduce() 方法:当您想将数组的所有元素减少为单个值时,此函数很有用。它可以用来简单地找出数组中所有元素的相加。

    Javascript

    let abc =[10, 20, 30, 40, 50];
    let xyz = abc.reduce((element, iterator)=>iterator+element, 0);
    console.log("The addition is: ", xyz);
    

    输出:

    The addition is: 150
    

    此外,您也可以将元素变量的值初始化为其他值。

    Javascript

    let abc = [10, 20, 30, 40, 50];
      
    let xyz = abc.reduce((element, iterator) 
              => iterator + element, 2000);
      
    console.log("The main array: ", abc);  
    console.log("The addition is: ", xyz); 
    

    输出:

    The main array: [10, 20, 30, 40, 50]
    The addition is: [2150]