# 数组的扩展

扩展运算符扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

<script>
	console.log(...[1, 2, 3]);
	// 1 2 3

	console.log(1, ...[2, 3, 4], 5);
	// 1 2 3 4 5

	// 常用场景 合并两个数组
	var arr = [1, 2],
		arrs = [3, 4];
	var newArr = [...arr, ...arrs];
	console.log(newArr); // [1,2,3,4]
</script>

Array.from Array.from 方法用于将类对象转为真正的数组(类数组对象比如 arguments) 类数组对象特点表现像数组却没有数组该有的方法比如 push

<script>
	function aa(a, b) {
		console.log(arguments); //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
		arguments.push(3);
		console.log(arguments); //arguments.push is not a function
	}
	aa(1, 2);
	//  想让类数组对象使用数组该有的方法 Array.from转换
	function aa(a, b) {
		console.log(arguments); //Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
		var arr = Array.from(arguments);
		arr.push(3);
		console.log(arr); //arguments.push is not a function
	}
	aa(1, 2);
</script>

find/findIndex
- find 数组实例的 find 方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 find 方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。
```
<script>
	var ele = [1, 5, 10, 15].find(function(value, index, arr) {
		return value > 9;
	});
	console.log(ele); // 10
</script>
```
- findIndex 数组实例的 findIndex 方法的用法与 find 方法非常类似，返回第一个符合条件的数组成员的下标，如果所有成员都不符合条件，则返回-1。
```
<script>
	[1, 5, 10, 15].findIndex(function(value, index, arr) {
		return value > 9;
	}); // 2
</script>
```

# 常用的数组的操作 map、filter、foreach、some、every、includs、find、findIndex 、reduce

map() JavaScript 数组 map()方法主要创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果。即对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

<script>
	var list = [1, 2, 3, 4];
	var newList = list.map((ele) => {
		return ele * 2;
	});
	console.log(list, newList); // [1,2,3,4] [2,4,6,8]
</script>

forEach 方法对数组的每个元素执行一次提供的函数。 foreach 相当于 for 循环对数据进行便利 foreach 第一个特点不能对每一项进行更改第二个特点不能终止

<script>
	var array1 = ["a", "b", "c"];

	array1.forEach(function(element) {
		console.log(element);
	});

	//  "a"
	//  "b"
	//  "c"
</script>

filter 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

<script>
	var list = [1, 2, 3, 4];
	var newList = list.filter((ele) => ele > 2);
	console.log(list, newList); // [1,2,3,4] [3,4]
</script>

every()与 some()方法都是 JS 中数组的迭代方法。

every()是对数组中每一项运行给定函数，如果该函数对每一项返回 true,则返回 true。

some()是对数组中每一项运行给定函数，如果该函数对任一项返回 true，则返回 true。

<script>
	var arr = [1, 2, 3, 4, 5, 6];

	console.log(
		arr.some(function(item, index, array) {
			return item > 3;
		}),
	); // true

	console.log(
		arr.every(function(item, index, array) {
			return item > 3;
		}),
	); // false
</script>

includes 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。

<script>
	[1, 2, 3].includes(2); // true
	[1, 2, 3].includes(4); // false
	[1, 2, 3].includes(3, 3); // false
	[1, 2, 3].includes(3, -1); // true
	[1, 2, NaN].includes(NaN); // true
</script>

find 和 findIndex find()函数用来查找目标元素，找到就返回该元素，找不到返回 undefined，而 findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。

<script>
	var stu = [
		{
			name: "张三",
			gender: "男",
			age: 20,
		},
		{
			name: "王小毛",
			gender: "男",
			age: 20,
		},
		{
			name: "李四",
			gender: "男",
			age: 20,
		},
	];
	var item = stu.find((element) => element.name == "李四"); // 返回的是{name: "李四", gender: "男", age: 20}
	var index = stu.findIndex((element) => element.name == "李四"); // 返回的是索引下标：2
	console.log(item, index);
</script>

reduce reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
- total 不带初始值的写法

<script>
	var arr = [1, 2, 3, 4];
	//current  当前的元素 total 总和
	var totals = arr.reduce((total, current) => {
		console.log("total=>", total, "current=>", current);
		return (total = total + current);
	});
	console.log(totals);
</script>

total 带初始值的写法

<script>
	var totals = arr.reduce((total, current) => {
		console.log("total=>", total, "current=>", current);
		return (total = total + current);
	}, 0);
</script>

← 变量解构赋值 Set 和 Map 数据结构 →