常用的JavaScript数组方法

 更新时间:2021年09月23日 08:56:57   作者:拥抱每一天  
一说到JavaScript的数组,大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等,今天小编就给大家分享几个开发中常用的js数组方法即他们的用法。需要的朋友可以参考下面文章的具体内容

1、filter()

语法:

array.filter(function(currentValue,index,arr), thisValue)

参数说明:
currentValue:当前元素对象(必选)
index:当前元素的索引值(可选)
arr:当前元素属于的数组对象(可选)
thisValue:对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"(可选)

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


输出结果

32,33,12,40

2、forEach()

语法:

array.forEach(function(currentValue, index, arr), thisValue)

参数用法同上

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


再看下面一段代码:

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


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

3、some()

语法:

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

//把10修改成20 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.some(function (currentValue, index) { 
  if (currentValue === 10) { 
    ages[index] = 20 
    return true 
  } 
  console.log(index); 
}) 
 
console.log(ages); 
 
//把10修改成20 箭头函数 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.some((item, index) => { 
  if (item === 10) { 
    ages[index] = 20 
    return true 
  } 
  console.log(index); 
}) 
 
console.log(ages); 


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

4、every()

语法:

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

//判断每个元素的值是否都大于4 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
 
 
var res = ages.some(function (currentValue) { 
  return currentValue > 4 
}) 
console.log(res); 
//输出:true 
 
//箭头函数 
var res = ages.some(item => item > 4) 
console.log(res); 

5、reduce()

语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明:

total:必需。初始值, 或者计算结束后的返回值。
currentValue:   必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值

//计算所有元素的和 
var numbers = [15.5, 2.3, 1.1, 4.7]; 
var res = numbers.reduce(function (total, currentValue) { 
  return total += currentValue 
}, 0) 
 
console.log(res); 
//23.6 
 
//计算大于4的元素的和 
var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) 
console.log(result); 
//20.2 

6、合并数组

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

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

到此这篇关于常用的JavaScript数组方法的文章就介绍到这了,更多相关 数组 JavaScript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文详解cornerstone Tools 基础概念

    一文详解cornerstone Tools 基础概念

    这篇文章主要为大家介绍了cornerstone Tools 基础概念详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 微信小程序左滑删除效果的实现代码

    微信小程序左滑删除效果的实现代码

    这篇文章主要介绍了微信小程序左滑删除效果的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JavaScript实现放大镜详细

    JavaScript实现放大镜详细

    这篇文章主要介绍了js实现放大镜,借助宽高等比例放大的两张图片,结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成;左侧遮罩移动Xpx,右侧大图移动X*倍数px,具体内容请需要的小伙伴出差下面文章内容
    2021-12-12
  • 采用CSS和JS,刚好我最近有个站点要用到下拉菜单!

    采用CSS和JS,刚好我最近有个站点要用到下拉菜单!

    采用CSS和JS,刚好我最近有个站点要用到下拉菜单!...
    2006-06-06
  • 编程式安装依赖install-pkg源码解析

    编程式安装依赖install-pkg源码解析

    这篇文章主要为大家介绍了编程式安装依赖install-pkg源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • js展示百度地图及添加标注实现

    js展示百度地图及添加标注实现

    这篇文章主要为大家介绍了js展示百度地图及添加标注实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 微信小程序 Canvas增强组件实例详解及源码分享

    微信小程序 Canvas增强组件实例详解及源码分享

    这篇文章主要介绍了微信小程序 Canvas增强组件实例详解及源码分享的相关资料,WeZRender是一个微信小程序Canvas增强组件,这里详细介绍,需要的朋友可以参考下
    2017-01-01
  • JavaScript 中有了Object 为什么还需要 Map 呢

    JavaScript 中有了Object 为什么还需要 Map 呢

    Map 是用于存储键值的,而 JavaScript 中对象也是由键值对组成的,那么 Map 存在的意义是什么呢?下面文章小编就来向大家详细介绍吧,需要的朋友可以参考下
    2021-09-09
  • 纯js实现高度可扩展关键词高亮方案详解

    纯js实现高度可扩展关键词高亮方案详解

    这篇文章主要为大家介绍了纯js实现高度可扩展关键词高亮方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • js作用域及作用域链工作引擎

    js作用域及作用域链工作引擎

    这篇文章主要为大家介绍了js作用域及作用域链工作引擎,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论