文章目录
- 前言
- 一、Map函数的使用
- 案例： 单纯的提取数组对象中的某个属性值，返回一个数组 或 数组对象。
- map函数总结
- 二、forEach函数的使用
- 案例一： 对数组中的元素进行求和及给所有元素乘2。
- 案例二： 替换数组对象中的某个属性值。
- 三、some函数 和 every函数的使用及区别
- 案例一： 判断数组 / 数组对象中==每一项==是否存在某个属性值。
- 案例二： 判断数组 / 数组对象中==任一项==是否存在某个属性值。
- every() 与 some() 总结
- 四、find函数 和 filter函数的使用及区别
- 语法
- 案例一： 使用find() 获取 数组中 符合条件的第一个元素。
- 案例二： 使用filter() 获取 数组中 符合条件的所有元素，并返回一个新数组
- find() 和 filter() 总结
前言
在日常开发中，我们时常需要对一些后端返回的数据进行筛选 或 解构重组之类的操作。在Js迭代升级的今天，Js中已经自带了许多我们可以利用的原生数据处理方法，合理使用这些方法，能够有效的提高代码效率、减少代码庸余 以及 提高代码的可读性。例如，最基础的 for 循环，以及常用的 forEach，除此之外，Js还提供了许多类似的循环处理数组的方法，如 map()、find()、some()、filter()等。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Map函数的使用
当需提取数组对象中的某个属性值，并返回一个新数组时。我们可以使用Map函数对数组对象进行解构，重组出开发时所需要数据。也可以用于当后端返回数据过多，开发中只使用部分，可重组出所需部分，避免数据全部暴露 或 混用。
案例： 单纯的提取数组对象中的某个属性值，返回一个数组 或 数组对象。
let detailList = [
{
id:1,
name:'张三',
age: 25
},
{
id:2,
name:'李四',
age: 26
},
{
id:3,
name:'王五',
age: 27
}
]
let result = detailList.map((item) => {
// 可在方法中进行数据解构重组
let { label = '', value = null } = {
label: item.name || '匿名',
value: item.id || 'ID缺失'
};
/*
此处返回的数据类型可为 普通类型、对象、数组、函数等。
但其内容都是在一个数组中。 [ 返回内容1, 返回内容2 ]
*/
return {
label,
value
};
});
console.log(result, '新数组');
/*
[
{
"label": "张三",
"value": 1
},
{
"label": "李四",
"value": 2
},
{
"label": "王五",
"value": 3
}
]
*/map函数总结
map对数组重构有着很大的作用，相比forEach方法来说，map最大的好处就是 map方法不会对原先数据造成影响，避免了数据被污染的问题。其返回的是一个新数组，将其中的项赋值及数据处理时，不需要考虑深浅拷贝的问题。
二、forEach函数的使用
当需修改数组对象中的某个属性值，做逻辑操作时。我们可以使用forEach函数对数组中的数据进行增删改查的操作，调用数组每个元素，并将元素传递给回调函数（注意没有办法跳出或终止forEach语句，除非抛出异常）
forEach 遍历的范围在第一次调用 callback前就会确定。调用forEach 后添加到数组中的项不会被callback访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到
案例一： 对数组中的元素进行求和及给所有元素乘2。
let arr = [1, 2, 3, 4, 5, 6, 7];
let sum = 0;
let ar = arr.forEach((elem) => {
elem += elem*2;
sum += elem;
});
console.log(ar);
/*
undefined，返回值为undefined，里面即便有return语句
返回值依然是undefined
*/
console.log(arr); //[2,4,6,8,10,12,14]
console.log(sum); //56案例二： 替换数组对象中的某个属性值。
let data = [{
name: 'xxx',
status: 0
},
{
name: 'xxx',
status: 1
},
{
name: 'xxx',
status: 0
},
{
name: 'xxx',
status: 1
},
];
data.forEach(item => {
item.status = item.status === 0 ? '非活动' : '活动';
});
console.log(data); //[{ status: '非活动' }...]三、some函数 和 every函数的使用及区别
every() 与 some() 方法都是Js中数组的迭代方法。
every() 是对数组中每一项运行给定函数，函数中返回布尔值，一般用作数组中，对数组每一项进行规则校验，判断是否符合自定义规则。every()返回的是一个布尔值，即 true / false, 返回 true则继续执行循环，返回false则跳出循环。
some() 是对数组中每一项运行给定函数，也是返回布尔值，但是与every() 不同的是，some()中的函数返回true，则跳出循环，false则继续执行循环，常用于判断数组中是否存在某个值。
案例一： 判断数组 / 数组对象中每一项是否存在某个属性值。
let list = [{
id: 1,
name: '张三',
age: 15
},
{
id: 2,
name: '李四',
age: 22
},
{
id: 3,
name: '王五',
age: 18
},
]
let result = list.every((item) => {
// 判断是否存在小于18岁的人
return item.age <= 18;
});
console.log(result) // false案例二： 判断数组 / 数组对象中任一项是否存在某个属性值。
let list = [{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
},
{
id: 3,
name: '王五'
},
]
let result = list.some((item) => {
return item.name === '李四';
})
console.log(result) //trueevery() 与 some() 总结
some() 和 every() 均可以对数组中 数组项的值进行规则判断， 但some更适用于索引出其中一个，有点类似 && 的效果，该数组中，存在指定值，则退出循环，只要存在一个，就退出。而every() 则相反，它是判断数组中每一项，判断是否符合规则，除非返回false或不返回，否则持续循环，直到结束。
四、find函数 和 filter函数的使用及区别
find()方法为数组中的每个元素都调用一次函数执行，当数组中的元素在测试条件时返回true，find() 返回符合条件的第一个元素，之后的值不会再执行函数。如果没有符合条件的元素则返回undefined。
filter()：返回一个创建的一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
find() 在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
filter遍历的元素范围在第一次调用 callback之前就已经确定了。在调用filter之后被添加到数组中的元素不会被filter遍历到。如果已经存在的元素被改变了，则他们传入callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
语法
array[ find/filter ](function(value, index, arr), thisValue)value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值。
find() 返回值: 返回符合测试条件的第一个数组元素的值(item)，如果没有符合条件的则返回undefined。
filter() 返回值: 返回数组，包含了符合条件的所有元素，如果没有符合条件的则返回空数组。
案例一： 使用find() 获取 数组中 符合条件的第一个元素。
let arr = [1, 2, 3, 4, 5, 6, 7];
let ar = arr.find((elem) => {
return elem > 5;
});
console.log(ar); //6
console.log(arr); //[1,2,3,4,5,6,7], 并不会影响原数组案例二： 使用filter() 获取 数组中 符合条件的所有元素，并返回一个新数组
let arr = [1, 2, 3, 4, 5, 6, 7];
let ar = arr.filter((elem) => {
return elem > 5;
});
console.log(ar); //[6,7]
console.log(arr); //[1,2,3,4,5,6,7], 并不会影响原数组find() 和 filter() 总结
find() 和 filter() 功能相近，均是用于筛选数组中，符合条件的元素，区别就是筛选范围不一样，一个是筛选符合条件的第一个元素，而filter() 则是 筛选数组中 所有符合条件的元素，且返回值类型不一样， find() 返回数组中的元素（元素什么类型，返回值相同），filter() 则返回一个包含符合条件的新数组。
