首页 > 编程语言 >8 个你应该知道的JavaScript 数组方法

8 个你应该知道的JavaScript 数组方法

时间:2022-11-08 15:02:33浏览次数:58  
标签:const name age JavaScript user 数组 方法 users

8 个你应该知道的JavaScript 数组方法_javascript

原文 | https://javascript.plainenglish.io/8-javascript-array-methods-you-should-know-81947c9e46de

原译 | 杨小二


数组构成了几乎任何编程语言的组成部分。了解数组对于揭示编程概念非常重要。

根据维基百科的解释,数组可以定义为由一组元素组成的数据结构,每个元素由至少一个数组索引或键标识。存储一个数组,以便可以通过数学公式从其索引元组计算每个元素的位置。

在本文中,我们将研究 JavaScript 数组方法以及如何使用它们。

简单来说,数组只是一个变量,在给定时间可以保存多个值。

另外需要注意的是,几乎所有主流浏览器都支持这些数组方法。

1、map() 方法

map() 方法是一种数组方法,它通过对父数组中存在的每个元素调用函数来创建数组。

此方法不会为没有值的数组元素执行函数。

map() 数组方法的行为就像一个纯函数,不会改变原始数组。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const userAge=users.map((user)=>{
return user.name
})
console.log(userAge)

这将返回给定数组中的所有名称。

2、filter() 方法

filter() 数组方法返回一个给定的数组,该数组从原始数组传递给定的计算。在filter()内部,我们提供了如下所示的功能。

filter() 函数不能用于没有值的数组元素。

filter() 函数不会改变原始数组,因此它的行为就像一个纯函数。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const filterUsers = users.filter((user)=>{
return user.age <=27
})
console.log(filterUsers)

3、find() 方法

find() 数组方法用于在数组中查找给定对象。

此方法返回通过给定语句测试的第一个元素的值。

此方法对数组中存在的每个元素执行一次给定的函数。

find() 方法不会改变提供的原始数组。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const findUser= users.find((user)=>{
return user.name === ‘Debby’
})
console.log(findUser)

4、forEach() 方法

forEach() 数组方法用于为数组中的每个元素调用特定的函数。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
users.forEach((user)=>{
console.log(user.name)
})

该函数将返回给定数组中的所有名称。在大多数情况下,forEach() 方法使处理数组变得非常容易。

5、some() 方法

some() 数组方法用于检查数组中给定的一组元素是否通过特定测试。

some() 数组方法的行为就像一个纯函数。

如果传递了值,则返回true(并且不检查剩余值),否则返回false。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const midUsers = users.some((user)=>{
return user.name <= 27
})
console.log(midUsers)

6、every()方法

every() 方法执行并检查给定数组中的所有元素是否通过提供的测试。

它的行为就像一个纯函数,不会改变原始数组。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const everyUsers = users.every((user)=>{
return user.name <= 25
})
console.log(everyUsers)

7、reduce() 方法

顾名思义,它将原始数组简化为一对值,并为每个给定的值执行给定的函数。

例子:

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const totalAge= users.reduce((curr, user)=>{
return user.age + curr
}, 0)
console.log(totalAge)

8、includes()  方法

includes() 数组方法检查数组中是否包含给定元素。

例子:

const ages = [19,56,45,54,30,32,21,33,21,18,23,23]
const hasTwentyThree=ages.includes(23)

如果给定的测试通过,则返回 true,否则返回 false。

最后的想法

如果你喜欢阅读这篇文章并认为其他人也会喜欢它,请不要犹豫,分享它。

感谢你的阅读,编程愉快!





8 个你应该知道的JavaScript 数组方法_数组_02


标签:const,name,age,JavaScript,user,数组,方法,users
From: https://blog.51cto.com/u_15809510/5833139

相关文章

  • 30+实用的JavaScript 开发技巧,立刻提升你的工作效率
    英文|https://javascript.plainenglish.io/35-javascript-short-hands-coding-methodologies-28ea2d7d0a5e翻译|杨小二我是RakshitShah,我在IT行业的工作经验已经超过......
  • 7个JavaScript中的基本数组方法
    原文| https://javascript.plainenglish.io/7-essential-array-methods-in-javascript-you-need-2021-246e2f3d6052原译|杨小二如果你正在寻找从数组中添加、删除或查找......
  • JavaScript 中的去抖动
    英文| https://medium.com/pragmatic-programmers/debouncing-in-javascript-4c6dd704695a翻译|杨小二JavaScript语言的发明是为了响应用户在网页上的交互。虽然大多数......
  • 20个你需要知道的JavaScript简写代码片段
    英文| https://javascript.plainenglish.io/20-javascript-short-hands-you-need-to-know-in-2021-c0ed25a40837翻译|杨小二1、可选链你尝试访问对象上的嵌套属性时,你可......
  • idea自动生成类注释和方法注释
    一,自动生成类注释打开Setting,选在Editor,然后是FileandCodeTemplates 最后是Files 中的Class,点击class后,编辑右边的红色边框,里边是模板,将模板设置好,点击ok即可。 ......
  • python第三十课---面向对象的魔法方法,元类相关知识
    昨日内容回顾派生方法实战案例1.继承某个类2.重写被继承类里面的某个方法3.在方法内添加一些额外的操作4.最后利用super重新调用被继承类里面的方法"""super:子类......
  • 【JavaScript 教程】第五章 字符串01— JavaScript 字符串
    英文 | https://www.javascripttutorial.net/译文|杨小爱在上节,我们学习了JavaScript流程中的 continue 语句,错过的小伙伴可以点击文章《​​【JavaScript教程】第四......
  • 6 个 JavaScript 算术运算符
    英文|https://javascript.plainenglish.io/the-6-javascript-arithmetic-operators-you-need-to-know-about-4255ae8f2502翻译|杨小爱在您的开发项目中,您总是会遇到一些......
  • 工厂方法模式
    目前常用的加密算法有DES(DataEncryptionStandard)和IDEA(InternationalDataEncryptionAlgorithm)国际数据加密算法等,请用工厂方法实现加密算法系统。类图   源码......
  • JavaScript超大文件上传解决方案:分片断点上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1. 通过form表单向后端发送请求    ......