＜ Javascript中数据处理小技巧 --- 数组篇 ＞

---

前言

在日常开发中，我们时常需要对一些后端返回的数据进行筛选 或 解构重组之类的操作。在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) //true

every() 与 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() 则返回一个包含符合条件的新数组。