前端数组Array的常用属性和方法

Array.isArray(对象)---判断这个对象是不是数组

var abc=['aa','bb','cc']
console.log(Array.isArray(abc)) //输出：true

concat(数组1，数组2，···)---拼接数组，返回一个新数组

var abc=['aa','bb','cc']
var def=['dd','ee','ff']
console.log(abc.concat(def)) //输出：['aa', 'bb', 'cc', 'dd', 'ee', 'ff']

push()---把值追加到数组的最后

var abc=['aa','bb','cc']
abc.push('de')
console.log(abc) //输出：['aa', 'bb', 'cc', 'de']

pop()---删除数组的最后一个元素，返回值是删除的这个值

var abc=['aa','bb','cc']
console.log(abc.pop()) //输出：cc

shift()---删除数组的第一个元素，返回值是删除的这个值

var abc=['aa','bb','cc']
console.log(abc.shift()) //输出：aa

unshift()---像数组的第一个元素前插入一个元素，返回值是插入的这个值

var abc=['aa','bb','cc']
abc.unshift('haha')
console.log(abc) //输出：['haha', 'aa', 'bb', 'cc']

every(函数)---返回值是布尔类型，函数作为参数使用(有三个参数，第一个参数是元素的值，第二个参数是索引值，第三个参数是原来的数组)，如果这个数组中每一个元素都符合条件才会返回true。

filter(函数)---返回数组中符合条件的元素，组成一个新数组。

forEach(函数)---遍历数组

indexOf（值）---返回的是索引值，没有则返回-1

join（字符串）---返回一个字符串

map（函数）---数组中每个元素都要执行这个函数，把执行后的结果放到一个新数组

reverse()---反转数组

sort()---排序

slice(开始的索引，结束的索引)---截取的值放到一个新数组中（不包含结束位置）

splice(开始的位置，要删除的个数，替换的元素值)---一般用来删除数组中的元素，或替换，或插入。

注，ES6数组属性：

(1)Array.from()将类似数组的对象转为真正的数组；(克隆数组)

1、类数组对象指具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组；

2、类数组对象的属性名必须为数值型或字符串型的数字；

ps: 该类数组对象的属性名可以加引号，也可以不加引号。

let arrayLike = {
    '0': 'a',   // 若前面的属性名不是数字或字符串类型的数字，那么拿到的就是undefined
    '1': 'b',
    '2': 'c',
    length: 3,   //必须有length，不然就是空数组
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arr = [11,12,13,14,15,16]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [12,13,14,15,16,17]

Array.from可以将字符串转换为数组

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

如果参数是一个真正的数组，Array.from()会返回一个一模一样的新数组。

Array.from([1, 2, 3])
// [1, 2, 3]

Array.from()还可以传入第三个参数，用来绑定this。Array.from()可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

上面代码中，Array.from()的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活

（2）find()方法，用于找出第一个符合条件的数组成员。

[1, 4, -5, 10].find((n) => n < 0)
// -5

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

👆🏻find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

findLast()和findLastIndex()，从数组的最后一个成员开始，依次向前检查。

（3）Array.reduce 可以用于：数组去重、构建对象、数组扁平化、求和、统计等，这里将简单演示一些使用情景。

Array.reduce((did,cur,index,arr) => {} , initVal)
did：累计器（操作后的结果）
cur：当前值
index：当前索引（如果有 initVal 索引从0开始，否侧从1开始）
arr：数组本身

//1、参数展示
		let arr = [1, 2, 3, 4];
		arr.reduce((did, cur, index, arr) => {
			console.log(did, cur, index, arr);
			return did;
		}, {});
		// {} 1 0 (4) [1, 2, 3, 4]
		// {} 2 1 (4) [1, 2, 3, 4]
		// {} 3 2 (4) [1, 2, 3, 4]
		// {} 4 3 (4) [1, 2, 3, 4]

		//2、求数组元素之和
		let arr2 = [1, 2, 3, 4];
		let sum2 = arr2.reduce((did, cur) => {
			did += cur;
			return did;
		});
		console.log(sum2); // 10

		//3、统计数组中元素出现的次数
		let arr3 = ['a', 'a', 'a', 'b', 'b', 'c'];
		let sum3 = arr3.reduce((did, cur) => {
			if (!did.hasOwnProperty(cur)) {
				did[cur] = 1;
			} else {
				did[cur]++;
			}
			return did;
		}, {});
		console.log(sum3); //{a: 3, b: 2, c: 1}

		//4、分组累加
		const arr4 = [{
				count: 10,
				weight: 1,
				height: 2
			},
			{
				count: 20,
				weight: 2,
				height: 4
			},
			{
				count: 30,
				weight: 3,
				height: 6
			}
		];
		let sum4 = arr4.reduce((did, cur) => {
			for (let key in cur) {
				if (!did.hasOwnProperty(key)) {
					did[key] = 0;
				} else {
					did[key] += cur[key];
				}
			}
			return did;
		}, {});
		console.log(sum4); //{count: 50, weight: 5, height: 10}

		//5、二维数组转化为一维数组
		let arr5 = [1, 2, [3, 4, 5], 6, [7, 8, 9]];
		let sum5 = arr5.reduce((did, cur) => {
			return did.concat(cur)
		}, []);
		console.log(sum5, '555'); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

		//6、数组去重
		let arr6 = [1, 2, 2, 3, 3, 3];
		let sum6 = arr6.reduce((did, cur) => {
			if (!did.includes(cur)) {
				did.push(cur);
			}
			return did;
		}, []);
		console.log(sum6); // [1, 2, 3]