最有用的 JavaScript 数组函数——第 2 部分

在最有用的 JavaScript 数组函数 – 第 1 部分中，我们讨论了两个数组函数，即Array.Prototype.Every()和
Array.prototype.some() 。需要注意的是，这两个数组函数都访问了数组元素，但没有修改/更改数组本身。今天我们将看看 2 种数组方法，它们修改数组并返回修改后的数组。

• Array.Prototype.filter()
• Array.Prototype.map()

Array.Prototype.filter()：用于获取一个新数组，该数组中只有那些通过回调函数实现的测试的数组元素。它接受一个回调函数作为参数。此回调函数必须返回 true 或 false。回调函数返回 true 的元素将添加到新返回的数组中。

句法：

array.filter(callback(element, index, arr), thisValue)

参数：该函数接受上面提到和下面描述的五个参数：

• callback：此参数保存要为数组的每个元素调用的函数。
• element：参数保存当前正在处理的元素的值。
• index：这个参数是可选的，它保存数组中currentValue元素从0开始的索引。
• array：这个参数是可选的，它保存了调用 Array.every 的完整数组。
• thisArg：这个参数是可选的，它保存了要传递的上下文作为 this 在执行回调函数。如果传递了上下文，它将在每次调用回调函数像这样使用，否则使用 undefined 作为默认值。

示例：过滤掉分数超过 80% 的学生。

• 程序1：过滤掉分数超过80%的学生的函数。这是一个使用循环的幼稚方法

javascript

    function fnFilterStudents_loop(aStudent){
        var tempArr = [];
        for(var i = 0 ; i< aStudent.length; i ++){
            if(aStudent[i].fPercentage > 80.0)
            { 
              tempArr.push(aStudent[i]);}
            }
        return tempArr;
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
          
    console.log(fnFilterStudents_loop(aStudent));

输出：

[{sStudentId : "001" , fPercentage : 91.2},
{sStudentId : "004" , fPercentage : 81.4}];

• 程序 2：这里我们将使用 Array.prototype.filter()

javascript

    function fnFilterStudents_filter(aStudent){
        return aStudent.filter(function(oStudent){
            return oStudent.fPercentage > 80.0 ? true : false;
              
        });
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
          
    console.log(fnFilterStudents_filter(aStudent));

输出：

[{sStudentId : "001" , fPercentage : 91.2},
{sStudentId : "004" , fPercentage : 81.4}];

示例：从数组中删除未定义的元素

• 程序：从数组中删除未定义元素的函数。在下面示例的回调函数中，我们直接返回元素。因此，如果元素具有值，则将其视为真，如果元素未定义，则将自动视为假。

javascript

    function removeUndefined(myArray){
        return myArray.filter(
function(element, index, array)
        {
            return element;
        });
    }
      
    var arr = [1,undefined,3,undefined,5];
      
    console.log(arr);
      
    console.log( removeUndefined(arr));

输出：

[1,undefined,3,undefined,5];
[1,3,5];

Array.Prototype.map()：用于根据回调函数修改数组的每个元素。 Array.prototype.map()依次为数组中的每个元素调用一次回调函数。需要注意的一点是，回调函数是在已赋值的元素的索引上调用的，包括未定义的。
句法：

array.map(callback(element, index, arr), thisValue)

参数：该函数接受上面提到和下面描述的五个参数：

• callback：此参数保存要为数组的每个元素调用的函数。
• element：参数保存当前正在处理的元素的值。
• index：这个参数是可选的，它保存数组中currentValue元素从0开始的索引。
• array：这个参数是可选的，它保存了调用 Array.every 的完整数组。
• thisArg：这个参数是可选的，它保存了要传递的上下文作为 this 在执行回调函数。如果传递了上下文，它将在每次调用回调函数像这样使用，否则使用 undefined 作为默认值。

示例：用户必须将数组中的每个金额减少特定税额的场景

• 程序 1：使用循环向数组中的每个对象添加属性 bIsDistinction 的函数。

javascript

    function fnAddDistinction_loop(aStudent){
        for(var i = 0 ; i< aStudent.length; i ++){
            aStudent[i].bIsDistinction = 
              (aStudent[i].fPercentage >= 75.0) ? true : false;
            }
        return aStudent;
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
           
    console.log(fnAddDistinction_loop(aStudent));

输出：

[{sStudentId : "001" , fPercentage : 91.2 , bIsDistiction : true},
 {sStudentId : "002" , fPercentage : 78.7 , bIsDistiction : true},
 {sStudentId : "003" , fPercentage : 62.9 , bIsDistiction : false},
 {sStudentId : "004" , fPercentage : 81.4 , bIsDistiction : true}];

• 程序 2：这里我们将使用 Array.prototype.map()函数。

javascript

    function fnAddDistinction_map(aStudent){
        return aStudent.map(function(student, index, array){
            aStudent.bIsDistinction = 
              (aStudent.fPercentage >= 75.0) ? true : false;
            return aStudent;
        });
    }
    aStudent = [
        {sStudentId : "001" , fPercentage : 91.2},
        {sStudentId : "002" , fPercentage : 78.7},
        {sStudentId : "003" , fPercentage : 62.9},
        {sStudentId : "004" , fPercentage : 81.4}];
           
    console.log(fnAddDistinction_map(aStudent));

• 输出：

[
{sStudentId : "001" , fPercentage : 91.2 , bIsDistiction : true},
{sStudentId : "002" , fPercentage : 78.7 , bIsDistiction : true},
{sStudentId : "003" , fPercentage : 62.9 , bIsDistiction : false},
{sStudentId : "004" , fPercentage : 81.4 , bIsDistiction : true}];

示例：用户必须为现有对象数组中的每个对象创建新属性的场景。

• 程序： Array.prototype.Map() 与标准 JavaScript 函数一起使用。例如，使用Math.sqrt()函数计算数组中每个元素的平方根或将字符串值解析为浮点数。

javascript

[1,4,9].map(Math.sqrt); // Output : [1,2,3]
["1.232","9.345","3.2345"].map(parseFloat) 
// Output : [1.232, 9.345, 3.2345]

• 在将 Array.prototype.map() 与标准函数一起使用时必须小心，因为可能会发生这样的事情。

javascript

["1","2","3"].map(parseInt);
//Output : [1, NaN, NaN]

为什么上面的代码片段返回 NaN？发生这种情况是因为 parseInt函数接受两个参数，第一个是要解析为 Integer 的元素，第二个是作为转换基础的基数。当我们与 Array.prototype.map() 一起使用时，虽然第一个参数是元素，但第二个参数是当前正在处理的数组元素的索引。对于第一次迭代，索引为 0 作为基数传递给 parseInt，它默认为 10，因此您会看到第一个元素解析成功。之后就乱了。

• 以下是上述混乱的修复。

javascript

["1","2","3"].map(function(val){return parseInt(val,10)});
// output : [1, 2, 3]

如上例所示，Array.prototype.filter() 和 Array.prototype.map() 都可以使用 for 循环来实现。但在上述场景中，我们正在尝试处理非常具体的用例。保留一个计数器变量，然后检查数组长度，然后增加计数器变量。牢记这些事情不仅很麻烦，而且会使代码容易出现错误。例如，开发人员可能会不小心将“array.length”拼错为“array.lenght”。因此，根据经验，避免编程错误的最佳方法是减少手动跟踪的事物数量。而这些数组函数就是这样做的。

浏览器对这些函数的支持非常好，但它们在 IE8 或更低版本中仍然不受支持，因为这些数组函数是在 ECMAScript 5 中引入的。如果您也需要在旧浏览器中使用它，那么您可以使用 es5-shim 或任何像 Underscore 或 Lodash 这样的库可以帮助你，它具有等效的实用函数。

必须使用 JavaScript 数组函数 – 第 3 部分

此外，如果您想更深入地了解上述功能，可以参考以下官方链接
1. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.20
2. http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19

关于作者：

“Harshit 是一名技术爱好者，对编程有着浓厚的兴趣。他持有一个

B.技术在诺伊达 JIIT 获得计算机科学学位，目前在 SAP 担任前端开发人员。他还是国家级乒乓球运动员。除此之外，他喜欢通过看电影和英语情景喜剧来放松。他在德里工作，您可以通过https://in.linkedin.com/pub/harshit-jain/2a/129/bb5与他联系

如果您还想在这里展示您的博客，请参阅GBlog ，了解GeeksforGeeks 上的客座博客写作。