扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >常用的JavaScript数组方法
  • 412

0
分享到

常用的JavaScript数组方法

2024-04-02 19:04:59 412人浏览 八月长安
摘要

目录1、filter()2、forEach()3、some()4、every()5、reduce()6、合并数组1、filter() 语法： array.filter(functi

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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 常用的JavaScript数组方法

本文链接: https://lsjlt.com/news/136406.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 常用的JavaScript数组方法
    目录1、filter()2、forEach()3、some()4、every()5、reduce()6、合并数组1、filter() 语法： array.filter(functi...
    99+
    2024-04-02
  • 详解JavaScript数组的常用方法
    目录数组的常用方法pop()unshift()shift()slice()splice()数组元素去重concat()join()reverse()sort()总...
    99+
    2024-04-02
  • JavaScript常用数组去重方法
    本篇内容主要讲解“JavaScript常用数组去重方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript常用数组去重方法”吧!数组去重，一般都是在面试的时候才会碰到，一般是要求手...
    99+
    2023-06-20
  • JavaScript中常用的数组操作方法
    目录一、concat()二、join()三、push()五、shift()六、unshift()七、slice()八、splice()九、substring() ...
    99+
    2024-04-02
  • JavaScript数组常用的方法有哪些
    这篇文章主要介绍“JavaScript数组常用的方法有哪些”，在日常操作中，相信很多人在JavaScript数组常用的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • JavaScript常用的数组方法有哪些
    这篇文章主要讲解了“JavaScript常用的数组方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript常用的数组方法有哪些”吧！不会...
    99+
    2024-04-02
  • JavaScript中常用的数组过滤方法
    在 JavaScript 编程中，经常会遇到需要对数组进行筛选和过滤的情况。本文将介绍几种常用的数组过滤方法，帮助你在处理数组数据时更加灵活高效。 1. 使用filter()方法 filter() 方...
    99+
    2023-10-21
    javascript 前端 开发语言
  • 常用的JavaScript数组方法有哪些
    常用的JavaScript数组方法有：1. push()：将一个或多个元素添加到数组的末尾，并返回新数组的长度。2. pop()：删...
    99+
    2023-10-12
    JavaScript
  • javascript数组常用方法有什么
    本篇内容主要讲解“javascript数组常用方法有什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript数组常用方法有什么”吧!常用方法：1、...
    99+
    2024-04-02
  • Javascript数组常用方法是什么
    这篇文章将为大家详细讲解有关Javascript数组常用方法是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。push 向数组内添加一个或多个元素，添加到数组的最后面，方法返回值是新数组的长度。arr....
    99+
    2023-06-29
  • JavaScript数组有哪些常用方法
    这篇文章主要介绍了JavaScript数组有哪些常用方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1、前言数组方法有太多了，本文记录一些本人容易记错的一些数组方法，用于巩...
    99+
    2023-06-25
  • JavaScript操作数组的常用方法总结
    我们在日常开发过程中，使用到原生 JavaScript的时候，有时候会频繁的对数组进行操作，今天我把工作以来，经常用到的有关 JavaScript数组的方法总结一...
    99+
    2024-04-02
  • JavaScript数组 几个常用方法总结
    目录1、前言2、filter()3、map()4、sort()5、reduce()6、forEach()7、方法列表8、本文参考1、前言 数组方法有太多了，本文记录一些本人容易记错的...
    99+
    2024-04-02
  • 常用的javascript数组操作方法有哪些
    这篇文章主要介绍“常用的javascript数组操作方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“常用的javascript数组操作方法有哪些”文章能帮助...
    99+
    2024-04-02
  • JavaScript中数组Array的常用方法有哪些
    这篇文章主要为大家展示了“JavaScript中数组Array的常用方法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript中数组Array的常用方法有哪些”这篇文章吧。一....
    99+
    2023-06-25
  • JavaScript中常用的数组操作方法总结
    目录前言数组基础遍历方法forfor offor in数组的基础操作方法push：尾部追加元素pop：尾部移出元素unshift：头部追加元素shift：头部移出元素splice：删...
    99+
    2024-04-02
  • JavaScript数组Array的一些常用方法总结
    目录一.JavaScript中创建数组的方式二、数组方法概括三、方法详解1.join()2.pop()3.shift()4.push()5.unshift()6.concat...
    99+
    2024-04-02
  • JavaScript数组常用方法解析及数组扁平化
    目录前言一、常用数组操作方法push末尾追加元素pop删除数组末尾元素sort排序shift数组开头添加元素 && unshift数组开头删除元素数组合并concat...
    99+
    2024-04-02
  • Javascript数组常用方法你都知道吗
    我用这些方法主要从五个方面去学习。 1.方法是干什么的。 2.谁能用 (当然是数组啦)。 3.有没有返回值，返回值是什么。 4.修不修改原来的对象。 5.如何使用。 接下来就是干货了...
    99+
    2024-04-02
  • JavaScript数组常见使用方法有哪些
    今天小编给大家分享一下JavaScript数组常见使用方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1. push...
    99+
    2023-07-04
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作