总结一波数组使用方法
该篇文章用于自己记忆，比较通俗没有专业术语，大家绕道。
-
filter
筛选、过滤数组
找出数组中符合条件的元素时使用。
方法特点：
- 遍历/回调次数=数组长度；
- 本身返回值：筛选之后的新数组；
- 回调函数内部return ： return true 满足筛选条件，放入新数组
举例：
// 找到数组中的偶数
const numbers = [1, 2, 3, 4, 5, 6];
// 由于箭头函数如果函数体只有一行代码，return 和 {} 可以省略
// const evenNumbers = numbers.filter(num => {return num % 2 === 0 });
const evenNumbers = numbers.filter(num => num % 2 === 0); // 简写
console.log(evenNumbers); // [2, 4, 6]
-
findIndex
找下标的
返回数组中第一个通过函数条件的元素的索引，没找到就返回-1。
方法特点：
与indexOf()类似一般用于基本类型的数组，findIndex 一般用于对象数组
- 回调次数不等于数组长度，因为满足条件就结束不再循环了；
- 回调函数内部return： return true 找到了，循环立即结束，返回当前的index
引用类型比较的是地址
举例：
const numbers = [1, 2, 3, 4, 5, 6];
const index = numbers.findIndex(num => num > 3);
console.log(index); // 3 （元素 4 的索引）
-
find
找第一个符合条件的元素
返回数组中第一个通过函数条件的元素，没找到就返回undefined。
方法特点：
findIndex 是返回符合条件的下标,find是返回符合条件的对象
- 回调次数不等于数组长度，因为满足条件就结束不再循环了；
- 回调函数内部return： return true 找到了，循环立即结束，返回当前的index
-
map 映射
对数组每一个元素进行某种处理，得到一个全新数组。
使用场景：当你需要对数组的每个元素进行某种操作，并返回新的数组时。
方法特点：
- 遍历的次数 = 数组长度；
- 本身返回值 ： 映射之后的新数组；
- 回调函数内部的return： return 映射之后的值； 不return 就返回undefined。
举例：
在之前的文章中有举例过 # forEach和map
- map方法的本意是不改变原始数组,所以以下加上
...item很有必要; ...item(展开运算符)的作用是将item对象的所有属性都复制到新的对象中;- 如果不使用
...item，新对象中就不会包含原对象的其他属性，而只包含你显式声明的属性。
// 给数组每一项年龄加2
const arr = [
{ name: 'Tom', age: 16 },
{ name: 'Aaron', age: 18 },
{ name: 'Denny', age: 20 }
]
const result = arr.map(item => ({
...item,
age: item.age + 2
}));
console.log('arr', arr);
console.log('result', result);
// 如果不加...item, arr会返回: [{"age": 18},{"age": 20},{"age": 22}]
扩展:展开运算符
-
数组展开：合并、复制、传递参数等。
-
对象展开：合并、复制、修改属性等。
-
函数参数展开：将数组元素展开成独立的参数。
-
解构赋值中的展开：提取剩余的元素或属性。
-
forEach 遍历
forEach和map的使用区别
map：返回一个新数组，新数组的元素是回调函数的返回值。forEach：没有返回值，它总是返回undefined。它的目的是对数组中的每个元素执行某个操作，而不是生成新的数组。forEach：由于不返回数组，因此不能与其他数组方法（如filter、reduce等）链式调用。
