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

计算机软件开发 2024-9-22 19:15:56 97 0 来自 中国
关于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:0arr:["王一","王二","王三"]----------item:王二index:1arr:["王一","王二","王三"]----------item:王三index:2arr:["王一","王二","王三"]----------注意:forEach() 没有返回值。也可以明白成:forEach() 的返回值是 undefined
即 let tempArry = myArr.forEach() 这种方式吸收是没故意义的
forEach() 能不能改变原数组?


  • 数组的元素是根本数据范例:(无法改变原数组)
let numArr = [1, 2, 3];numArr.forEach((item) => {    item = item * 2;});console.log(numArr); // 打印效果:[1, 2, 3]

  • 数组的元素是引用数据范例:(直接修改整个元素对象时,无法改变原数组)
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}]

  • 数组的元素是引用数据范例:(修改元素对象里的某个属性时,可以改变原数组)
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);
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-21 20:35, Processed in 0.163365 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表