JavaScript中数组超级好用的方法

开发 前端
一说到JavaScript的数组,大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等,今天给大家分享几个开发中常用的js数组方法。

一说到JavaScript的数组,大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等,今天给大家分享几个开发中常用的JS数组方法。

[[425130]]

1、filter() 

  1. 语法:array.filter(function(currentValue,index,arr), thisValue) 
  2. 参数说明: 
  3. currentValue:当前元素对象(必选) 
  4. index:当前元素的索引值(可选) 
  5. arr:当前元素属于的数组对象(可选) 
  6. thisValue:对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 
  7. 如果省略了 thisValue ,"this" 的值为 "undefined"(可选) 

  

  1. //过滤年龄大于10的元素 
  2. var ages = [5, 32, 7, 10, 33, 12, 40]; 
  3. var res = ages.filter(function (currentValue) { 
  4.   return currentValue > 10; 
  5. }) 
  6. console.log(res.toString()); 
  7. //输出结果:32,33,12,40 
  8.  
  9. //箭头函数写法 
  10. var res1 = ages.filter(item => item > 10) 
  11. console.log(res.toString()); 
  12. //输出结果:32,33,12,40 

2、forEach() 

  1. 语法:array.forEach(function(currentValue, index, arr), thisValue) 
  2. 参数用法同上 

  

  1. //循环输出每个参数 
  2. var ages = [5, 32, 7, 10, 33, 12, 40]; 
  3. ages.forEach(function (currentValue, index) { 
  4.   console.log("参数:" + currentValue + "索引:" + index); 
  5. }) 
  6.  
  7.  
  8. //箭头函数写法 
  9. ages.forEach((item, index) => { 
  10.   console.log("参数:" + item + "索引:" + index); 
  11. }) 

再看下面一段代码: 

  1. //把10修改成20 
  2. var ages = [5, 32, 7, 10, 33, 12, 40]; 
  3. ages.forEach(function (currentValue, index) { 
  4.   if (currentValue === 10) { 
  5.     ages[index] = 20 
  6.     return 
  7.   } 
  8.   console.log(index); 
  9. }) 
  10.  
  11. console.log(ages); 

我们在代码中将10的值改成20后,加了一个return,但是运行结果显示还是打印了7次index的值,这就是forEach的一个缺点,只有循环结束才能停止。那如何解决呢?

3、some() 

  1. 语法:array.some(function(currentValue,index,arr),thisValue) 
  2. 参数用法同上 

  

  1. //把10修改成20 
  2. var ages = [5, 32, 7, 10, 33, 12, 40]; 
  3. ages.some(function (currentValue, index) { 
  4.   if (currentValue === 10) { 
  5.     ages[index] = 20 
  6.     return true 
  7.   } 
  8.   console.log(index); 
  9. }) 
  10.  
  11. console.log(ages); 
  12.  
  13. //把10修改成20 箭头函数 
  14. var ages = [5, 32, 7, 10, 33, 12, 40]; 
  15. ages.some((item, index) => { 
  16.   if (item === 10) { 
  17.     ages[index] = 20 
  18.     return true 
  19.   } 
  20.   console.log(index); 
  21. }) 
  22.  
  23. console.log(ages); 

上面的代码中运行结果只会打印三次index的值,通过some就可以完美解决forEach()的不足,开发过程中就看大家的需要就行选择。

4、every() 

  1. 语法:array.every(function(currentValue,index,arr), thisValue) 
  2. 参数用法同上 

  

  1. //判断每个元素的值是否都大于4 
  2. var ages = [5, 32, 7, 10, 33, 12, 40]; 
  3.  
  4.  
  5. var res = ages.some(function (currentValue) { 
  6.   return currentValue > 4 
  7. }) 

  8. console.log(res); 
  9. //输出:true 
  10.  
  11. //箭头函数 
  12. var res = ages.some(item => item > 4) 
  13. console.log(res); 

5、reduce() 

  1. 语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 
  2. 参数说明: 
  3. total:必需。初始值, 或者计算结束后的返回值。 
  4. currentValue:   必需。当前元素 
  5. currentIndex:可选。当前元素的索引 
  6. arr:可选。当前元素所属的数组对象。 
  7. initialValue:可选。传递给函数的初始值 
  1. //计算所有元素的和 
  2. var numbers = [15.5, 2.3, 1.1, 4.7]; 
  3. var res = numbers.reduce(function (total, currentValue) { 
  4.   return total += currentValue 
  5. }, 0) 
  6.  
  7. console.log(res); 
  8. //23.6 
  9.  
  10. //计算大于4的元素的和 
  11. var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) 
  12. console.log(result); 
  13. //20.2 

6、合并数组 

  1. 用法:var arr = [...数组1,...数组2] 
  2. 结果:将数组2的元素值拼接到数组1元素值后面 

 

  1. var arr = [1, 2, 3] 
  2. var arr2 = [4, 5, 6] 
  3.  
  4. var res = [...arr, ...arr2] 
  5. console.log(res); 
  6. //输出结果:[1, 2, 3, 4, 5, 6] 
  7.  
  8. var res = [...arr2, ...arr] 
  9. console.log(res); 
  10. //输出结果: [4, 5, 6, 1, 2, 3] 

 【编辑推荐】

 

责任编辑:华轩 来源: 今日头条
相关推荐

2023-08-18 15:12:00

JavaScript开发

2016-10-13 19:33:10

javascript数组indexOf

2016-12-27 10:19:42

JavaScriptindexOf

2015-07-16 14:51:13

下载助手断点续传多任务

2013-05-27 15:07:36

Eclipse插件

2024-03-21 14:27:13

JavaScript数组

2020-06-24 07:44:12

Python数据技术

2022-11-13 15:33:30

JavaScript数组开发

2021-02-07 22:59:55

JavaScript编程方法链

2022-10-26 10:15:53

GoFramePHP数组

2021-04-26 07:51:00

JavaScript方法函数

2020-06-30 10:37:55

JavaScript开发技术

2023-02-01 08:31:48

2023-07-04 15:52:49

JavaScript数组

2021-07-26 05:20:47

JavaScript解构赋值数组解构

2021-08-27 13:20:06

PythonAddict模块

2019-07-25 10:08:05

JavaScript数组转换

2022-07-06 10:04:45

JavaScript数组前端

2021-03-18 10:45:02

JavaScript数组运算符

2021-03-11 23:43:20

JavaScript数组开发
点赞
收藏

51CTO技术栈公众号