最有用的JavaScript数组函数–第2部分-yiteyi-C++库

在里面 最有用的JavaScript数组函数——第1部分 ，我们讨论了两个数组函数： 大堆原型每 和 大堆原型一些 。需要注意的是，这两个数组函数都访问了数组元素，但没有修改/更改数组本身。今天我们将看两个数组方法，它们修改数组并返回修改后的数组。

null

大堆原型过滤器（）： 它用于获取一个新数组，该数组只包含通过回调函数实现的测试的数组元素。它接受回调函数作为参数。此回调函数必须返回true或false。回调函数返回true的元素被添加到新返回的数组中。

语法：

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

参数： 此函数接受上述五个参数，如下所述：

回拨： 此参数保存要为数组的每个元素调用的函数。
要素： 该参数保存当前正在处理的元素的值。
索引： 此参数是可选的，它保存数组中从0开始的currentValue元素的索引。
数组： 此参数是可选的，它保存在哪个数组上的完整数组。每个人都被称为。
thisArg： 此参数是可选的，它保存要传递的上下文，以便在执行回调函数时使用。如果传递了上下文，则每次调用回调函数时都会像这样使用它，否则默认使用undefined。

例如： 筛选出得分超过80%的学生。

项目1： 函数筛选出得分超过80%的学生。这是一种使用循环的简单方法

Javascript

                         <script>                       
                                                 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));                       
                         </script>                       

输出：

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

项目2： 这里我们将使用数组。原型过滤器（）

Javascript

                         <script>                       
                                                 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));                       
                         </script>                       

输出：

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

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

节目： 函数从数组中删除未定义的元素。在下面示例的回调函数中，我们直接返回元素。因此，如果元素有值，它将被视为true，如果元素未定义，它将被自动视为false。

Javascript

                         <script>                       
                                                 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));                       
                         </script>                       

输出：

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

大堆原型map（）： 它用于根据回调函数修改数组的每个元素。 大堆原型地图（） 按顺序为数组中的每个元素调用回调函数一次。需要注意的是，回调函数是在具有赋值（包括未定义）的元素的索引上调用的。

语法：

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

参数： 此函数接受上述五个参数，如下所述：

回拨： 此参数保存要为数组的每个元素调用的函数。
要素： 该参数保存当前正在处理的元素的值。
索引： 此参数是可选的，它保存数组中从0开始的currentValue元素的索引。
数组： 此参数是可选的，它保存在哪个数组上的完整数组。每个人都被称为。
thisArg： 此参数是可选的，它保存要传递的上下文，以便在执行回调函数时使用。如果传递了上下文，则每次调用回调函数时都会像这样使用它，否则默认使用undefined。

例如： 一种场景，用户必须将数组中的每个金额减少一个特定的税值

项目1： 函数使用循环向数组中的每个对象添加属性。

Javascript

                         <script>                       
                                                 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));                       
                         </script>                       

输出：

[{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： 这里我们将使用数组。原型map（）函数。

Javascript

                         <script>                       
                                                 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));                       
                         </script>                       

输出：

[{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}];

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

节目： 大堆原型Map（）与标准JavaScript函数一起使用。例如 数学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]

使用数组时必须小心。原型map（）使用标准函数，因为这样的事情可能会发生。

Javascript

[ "1" , "2" , "3" ].map(parseInt);

//Output : [1, NaN, NaN]

为什么上面的代码段返回NaN？这是因为parseInt函数接受两个参数，第一个是要解析为整数的元素，第二个是用作转换基础的基数。当我们使用数组时。原型map（），虽然第一个参数是元素，但第二个参数是当前正在处理的数组元素的索引。对于第一次迭代，索引0作为基数传递给parseInt，默认值为10，因此您可以看到第一个元素被成功解析。在那之后，一切都变得一团糟。

下面是解决上述问题的方法。

Javascript

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

// output : [1, 2, 3]

如上面的例子所示，两个数组。原型filter（）和数组。原型map（）可以使用for循环实现。但是在上面的场景中，我们正在尝试处理非常具体的用例。保留一个计数器变量，然后检查数组长度，然后递增计数器变量。记住这些不仅是一件麻烦事，而且会使代码容易出现错误。例如，开发人员可能会意外地将“array.length”拼写为“array.length”。因此，根据经验，避免编程错误的最佳方法是减少手动跟踪的内容。这些数组函数就是这样做的。

浏览器对这些函数的支持非常好，但IE8或以下版本仍然不支持这些函数，因为这些数组函数是在ECMAScript 5中引入的。如果您还需要在较旧的浏览器中使用它，那么您可以使用es5 shim或任何具有同等实用功能的库，如下划线或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

关于作者：

“哈希特是一名技术爱好者，对编程非常感兴趣。他持有

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

如果你也想在这里展示你的博客，请参见 吉微博 在Geeksforgek上写客博。

文章版权归作者所有，未经允许请勿转载。

THE END