网站首页 > 教程分享 正文
数组(Array)是JavaScript中内置的全局对象,在构建诸如商品列表等组件(Component)时,时常用到。
除了常见的push、pop、indexOf等方法,js还提供了一些诸如过滤、规约等流处理方法,非常类似于Java的Stream库。
const students = [
{ name: 'Alice', score: 100 },
{ name: 'Bob', score: 90 },
{ name: 'Trunp', score: 80 },
{ name: 'Biden', score: 70 },
{ name: 'Joe', score: 60 },
{ name: 'Sunshine', score: 50 },
{ name: 'Elon', score: 40 },
{ name: 'Jack', score: 30 },];
1、filter
过滤方法,返回符合条件的元素。
//返回成绩大于75的高分学生
const highScores = students.filter(stu => stu.score > 75);
console.log(highScores);
结果:
[
{ name: 'Alice', score: 100 },
{ name: 'Bob', score: 90 },
{ name: 'Trunp', score: 80 }
]
更好的是,由于const类型的值,都是不可变量,因此这些操作的返回的都是一个新对象,并不会影响到原值。
2、map
将数组内的item转化成另一种对象,类似于Java的Fucntion<T,R>接口。
//返回全部对象的name属性
const names = students.map(stu => stu.name);
console.log(names);
结果:
[ 'Alice','Bob', 'Trunp','Biden','Joe', 'Sunshine','Elon','Jack']
3、find
类似于filter方法,但返回第一个符合条件的元素。filter返回一个数组,find返回一个object。
//返回name长度为4的第一个对象
const foundedOne = students.find(stu=>stu.name.length === 4);
console.log(foundedOne);
结果:
{ name: 'Elon', score: 40 }
由结果可见,虽然elon和jack都符合条件,但只返回了elon。
4、forEach
遍历数组内全部元素。
//打印元素
students.forEach(item=>console.log(`stu-name=${item.name},
stu-score=${item.score}`));
结果:
stu-name=Alice,
stu-score=100stu-name=Bob,
stu-score=90stu-name=Trunp,
stu-score=80stu-name=Biden,
stu-score=70stu-name=Joe,
stu-score=60stu-name=Sunshine,
stu-score=50stu-name=Elon,
stu-score=40
5、some
当数组中有一个符合条件,则返回true,否则返回false。
//是否至少有一个name为Jack的const
isSome = students.some(item=>item.name === 'Jack');
console.log(isSome);
结果:true
6、every
功能类似于some,但要求每一个元素都符合条件才返回true。
//是否score都大于70const
isEvery = students.every(item=>item.score > 70);
console.log(isEvery);
结果:false
7、reduce
规约函数。在MDN中给出的API可以简化为,reduce(callback(accumulator,current),initValue)。它有两个参数,第一个是回调函数,第二个initValue是初始值,可选的。current表示数组内的元素,即当前值。
值得一说的是accumulator这个参数,它是中间态的值,一个累加器。换句话数,reduce函数是有状态的,即非纯函数,在多线程执行的时候,需要做一致性处理,否则可能会得到意外值。当然JavaScript是单线程执行的,所以可不考虑,但是用到类似于Java的语言中则需小心。
//求取全部score之和const
result = students.reduce(
(accumulator, current) => accumulator + current.score, 0);
console.log(result);
以上函数中,我们通过accumulator加上每一个元素值,获得最终结果。
结果:520。
8、includes
是否包含指定的元素值。
const isIncludes = students.includes({ name: 'Jack', score: 30 });
console.log(isIncludes);
结果:false。
虽然提供了和最后一个元素的一摸一样的{name: 'Jack', score: 30},但仍然返回false,说明两个对象不是指向同一个引用。
以上,都是很实用的方法,他们使得原来需要很多语句才能做的事情,通过一个简单的调用,即可得出结果。
猜你喜欢
- 2024-10-01 JavaScript 数组的常用方法(javascript数组有哪些方法)
- 2024-10-01 JavaScript中数组的方法(javascript数组有哪些方法)
- 2024-10-01 判断是否为数组的 JavaScript 方法总结
- 2024-10-01 JavaScript 中常用的数组操作方法
- 2024-10-01 JavaScript 数组常见操作(一)(javascript数组的方法)
- 2024-10-01 JavaScript之关联数组(关联数组和索引数组)
- 2024-10-01 程序员须知:高效的JavaScript数组方法
- 2024-10-01 JavaScript 数组方法的介绍(javascript中数组)
- 2024-10-01 JavaScript中5个值得被广泛使用的数组方法
- 2024-10-01 JavaScript 判断数组的方法总结,哪种最靠谱?
你 发表评论:
欢迎- 最近发表
-
- 有了这份900多页的Android面试指南,你离大厂Offer还远吗?
- K2 Blackpearl 流程平台总体功能介绍:常规流程功能
- 零基础安卓开发起步(一)(安卓开发入门视频)
- 教程:让你的安卓像Windows一样实现程序窗口化运行
- Android事件总线还能怎么玩?(事件总线有什么好处)
- Android 面试被问“谈谈架构”,到底要怎样回答才好?
- Android开发工具Parcel和Serialize
- Android 中Notification的运用(notification widget安卓)
- Android退出所有Activity最优雅的方式
- MT管理器-简单实战-去除启动页(mt管理器怎么去除软件弹窗)
- 标签列表
-
- css导航条 (66)
- sqlinsert (63)
- js提交表单 (60)
- param (62)
- parentelement (65)
- jquery分享 (62)
- check约束 (64)
- curl_init (68)
- sql if语句 (69)
- import (66)
- chmod文件夹 (71)
- clearinterval (71)
- pythonrange (62)
- 数组长度 (61)
- javafx (59)
- 全局消息钩子 (64)
- sort排序 (62)
- jdbc (69)
- php网页源码 (59)
- assert h (69)
- httpclientjar (60)
- postgresql conf (59)
- winform开发 (59)
- mysql数字类型 (71)
- drawimage (61)
本文暂时没有评论,来添加一个吧(●'◡'●)