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

简介: 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() 能不能改变原数组?
数组的元素是基本数据类型:(无法改变原数组)

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);
相关文章
|
1月前
|
存储
`map()`方法在什么场景下会比 `forEach()`方法更高效?
综上所述,当需要对数组元素进行复杂的转换并生成新数组、进行链式调用和函数式编程、处理元素之间存在明确映射关系的情况以及与其他数组方法结合使用时,`map()`方法比`forEach()`方法更高效,能够使代码更加简洁、清晰和易于维护。
57 32
|
1月前
|
存储 JavaScript 前端开发
如何选择使用`map()`方法和`forEach()`方法?
选择使用`map()`方法还是`forEach()`方法主要取决于操作的目的、是否需要返回值、代码的可读性和维护性等因素。在实际开发中,需要根据具体的业务需求和场景来灵活选择合适的方法,以实现更高效、更易读和更易维护的代码。
26 3
|
3月前
|
存储 JavaScript 前端开发
`forEach()`方法和`map()`方法哪个执行效率更高?
`forEach()`方法和`map()`方法哪个执行效率更高?
|
3月前
数组方法中的`forEach()`方法和`map()`方法有什么区别?
数组方法中的`forEach()`方法和`map()`方法有什么区别?
|
6月前
|
Dart
Dart之集合详解(List、Set、Map)
Dart之集合详解(List、Set、Map)
|
3月前
|
Go 定位技术 索引
Go 语言Map(集合) | 19
Go 语言Map(集合) | 19
|
3月前
|
存储 前端开发 API
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
该文章详细介绍了ES6中Set和Map数据结构的特性和使用方法,并探讨了它们在前端开发中的具体应用,包括如何利用这些数据结构来解决常见的编程问题。
ES6的Set和Map你都知道吗?一文了解集合和字典在前端中的应用
|
4月前
|
存储 安全 Java
java集合框架复习----(4)Map、List、set
这篇文章是Java集合框架的复习总结,重点介绍了Map集合的特点和HashMap的使用,以及Collections工具类的使用示例,同时回顾了List、Set和Map集合的概念和特点,以及Collection工具类的作用。
java集合框架复习----(4)Map、List、set
|
4月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。
|
4月前
|
算法 Java 索引
【Java集合类面试四】、 描述一下Map put的过程
这篇文章详细描述了HashMap中put操作的过程,包括首次扩容、计算索引、插入数据以及链表转红黑树和可能的再次扩容。
【Java集合类面试四】、 描述一下Map put的过程