百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分析 > 正文

ES5常见的数组方法:forEach,map,filter,some,every,reduce

liebian365 2024-11-16 23:13 25 浏览 0 评论

ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)


关于forEach

forEach()方法需要一个回调函数(这种函数,是由我们创建但是不由我们调用的)作为参数
回调函数中传递三个参数:
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遍历的元素的索引
第三个参数,就是正在遍历的数组
缺点: 不能使用break和continue

let myArr = ['王一', '王二', '王三'];

myArr.forEach((item, index, arr) => {
    console.log('item:' + item);
    console.log('index:' + index);
    console.log('arr:' + JSON.stringify(arr));
});

结果:

item:王一
index:0
arr:["王一","王二","王三"]
----------
item:王二
index:1
arr:["王一","王二","王三"]
----------
item:王三
index:2
arr:["王一","王二","王三"]
----------

注意:forEach() 没有返回值。也可以理解成:forEach() 的返回值是 undefined

即 let tempArry = myArr.forEach() 这种方式接收是没有意义的

forEach() 能不能改变原数组?

  1. 数组的元素是基本数据类型:(无法改变原数组)
let numArr = [1, 2, 3];

numArr.forEach((item) => {
    item = item * 2;
});
console.log(numArr); // 打印结果:[1, 2, 3]
  1. 数组的元素是引用数据类型:(直接修改整个元素对象时,无法改变原数组)
let objArr = [
    { name: '云牧', age: 20 },
    { name: '许嵩', age: 30 },
];

objArr.forEach((item) => {
    item = {
        name: '邓紫棋',
        age: '29',
    };
});
console.log(JSON.stringify(objArr)); 
// 打印结果:[{"name": "云牧","age": 20},{"name": "许嵩","age": 30}]
  1. 数组的元素是引用数据类型:(修改元素对象里的某个属性时,可以改变原数组)
let objArr = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 30 },
];

objArr.forEach((item) => {
    item.name = '邓紫棋';
});
console.log(JSON.stringify(objArr));
// 打印结果:[{"name":"邓紫棋","age":28},{"name":"邓紫棋","age":30}]

如果你需要通过 forEach 修改原数组,建议用 forEach 里面的参数 2 和参数 3 来做

forEach() 通过参数 2、参数 3 修改原数组:(标准做法)

// 1、数组的元素是基本数据类型
let numArr = [1, 2, 3];

numArr.forEach((item, index, arr) => {
    arr[index] = arr[index] * 2;
});
console.log(JSON.stringify(numArr)); // 打印结果:[2, 4, 6]

// 2、数组的元素是引用数据类型时,直接修改对象
let objArr = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 34 },
];

objArr.forEach((item, index, arr) => {
    arr[index] = {
        name: '小明',
        age: '10',
    };
});
console.log(JSON.stringify(objArr)); 
// 打印结果:[{"name":"小明","age":"10"},{"name":"小明","age":"10"}]

// 3、数组的元素是引用数据类型时,修改对象的某个属性
let objArr2 = [
    { name: '云牧', age: 28 },
    { name: '许嵩', age: 34 },
];

objArr2.forEach((item, index, arr) => {
    arr[index].name = '小明';
});
console.log(JSON.stringify(objArr2)); 
// 打印结果:[{"name":"小明","age":28},{"name":"小明","age":34}]

map映射

遍历数据并返回一个新的数组,对数据的处理会返回原先对应的位置

let newData = data.list.map((item, index) => {
  return {
    id: item.id,
    title: item.title,
    price: item.price * 0.6
  }
})
console.log(newData);
let newData = data.list.map((item, index) => {
  let {id,title,price} = item;
  return {id,title,price: price * 0.6}
})
console.log(newData);

filter

返回符合条件的记录
return true,则把当前记录存入新数组,否则不存

let newData = data.list.filter((item, index) => {
  return item.price > 400
})
console.log(newData);

some

如果有符合条件的记录,则返回真,否则返回假

let newData = data.list.some((item, index) => {
  console.log(index);
  return item.price == 400
})
console.log(newData);

every

如果每一个都符合条件,则返回真,否则返回假

let newData = data.list.every((item, index) => {
  console.log(index);
  return item.price > 600
})
console.log(newData);

reduce

常用来实现累加

// let arr = [300, 600, 200, 100]
// 首次调用时,sum是第一个元素,val是第二个元素,index是1
// 再次调用时,sum是上一次return的结果,val依次是下一个元素
let result = arr.reduce((sum, val, index) => {
  // console.log(sum, val, index);
  return sum + val;
})
console.log(result);

// 第二个参数是sum的初值, 则第一次调用 时, val是第一个元素
let result = data.list.reduce((sum, val, index) => {
  return sum + val.price;
}, 0)
console.log(result);

相关推荐

4万多吨豪华游轮遇险 竟是因为这个原因……

(观察者网讯)4.7万吨豪华游轮搁浅,竟是因为油量太低?据观察者网此前报道,挪威游轮“维京天空”号上周六(23日)在挪威近海发生引擎故障搁浅。船上载有1300多人,其中28人受伤住院。经过数天的调...

“菜鸟黑客”必用兵器之“渗透测试篇二”

"菜鸟黑客"必用兵器之"渗透测试篇二"上篇文章主要针对伙伴们对"渗透测试"应该如何学习?"渗透测试"的基本流程?本篇文章继续上次的分享,接着介绍一下黑客们常用的渗透测试工具有哪些?以及用实验环境让大家...

科幻春晚丨《震动羽翼说“Hello”》两万年星间飞行,探测器对地球的最终告白

作者|藤井太洋译者|祝力新【编者按】2021年科幻春晚的最后一篇小说,来自大家喜爱的日本科幻作家藤井太洋。小说将视角放在一颗太空探测器上,延续了他一贯的浪漫风格。...

麦子陪你做作业(二):KEGG通路数据库的正确打开姿势

作者:麦子KEGG是通路数据库中最庞大的,涵盖基因组网络信息,主要注释基因的功能和调控关系。当我们选到了合适的候选分子,单变量研究也已做完,接着研究机制的时便可使用到它。你需要了解你的分子目前已有哪些...

知存科技王绍迪:突破存储墙瓶颈,详解存算一体架构优势

智东西(公众号:zhidxcom)编辑|韦世玮智东西6月5日消息,近日,在落幕不久的GTIC2021嵌入式AI创新峰会上,知存科技CEO王绍迪博士以《存算一体AI芯片:AIoT设备的算力新选择》...

每日新闻播报(September 14)_每日新闻播报英文

AnOscarstatuestandscoveredwithplasticduringpreparationsleadinguptothe87thAcademyAward...

香港新巴城巴开放实时到站数据 供科技界研发使用

中新网3月22日电据香港《明报》报道,香港特区政府致力推动智慧城市,鼓励公私营机构开放数据,以便科技界研发使用。香港运输署21日与新巴及城巴(两巴)公司签署谅解备忘录,两巴将于2019年第3季度,开...

5款不容错过的APP: Red Bull Alert,Flipagram,WifiMapper

本周有不少非常出色的app推出,鸵鸟电台做了一个小合集。亮相本周榜单的有WifiMapper's安卓版的app,其中包含了RedBull的一款新型闹钟,还有一款可爱的怪物主题益智游戏。一起来看看我...

Qt动画效果展示_qt显示图片

今天在这篇博文中,主要实践Qt动画,做一个实例来讲解Qt动画使用,其界面如下图所示(由于没有录制为gif动画图片,所以请各位下载查看效果):该程序使用应用程序单窗口,主窗口继承于QMainWindow...

如何从0到1设计实现一门自己的脚本语言

作者:dong...

三年级语文上册 仿写句子 需要的直接下载打印吧

描写秋天的好句好段1.秋天来了,山野变成了美丽的图画。苹果露出红红的脸庞,梨树挂起金黄的灯笼,高粱举起了燃烧的火把。大雁在天空一会儿写“人”字,一会儿写“一”字。2.花园里,菊花争奇斗艳,红的似火,粉...

C++|那些一看就很简洁、优雅、经典的小代码段

目录0等概率随机洗牌:1大小写转换2字符串复制...

二年级上册语文必考句子仿写,家长打印,孩子照着练

二年级上册语文必考句子仿写,家长打印,孩子照着练。具体如下:...

一年级语文上 句子专项练习(可打印)

...

亲自上阵!C++ 大佬深度“剧透”:C++26 将如何在代码生成上对抗 Rust?

...

取消回复欢迎 发表评论: