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

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

大家好,欢迎来到IT知识分享网。

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);

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/47464.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信