（JS基础）Array

JavaScript 的Array对象是用于构造数组的全局对象，数组是相似于列表的高阶对象。

基本操做

建立

数组内存放的能够是任意类型的数据。

let arr1 = [1, { a: 1 }, 'b', [22, 11], true];
let arr2 = new Array(1, { a: 1 }, 'b', [22, 11], true);
let arr3 = Array(1, { a: 1 }, 'b', [22, 11], true);

// 建立指定长度的空数组
let arr4 = new Array(3);    // 长度为3的空数组 [ <3 empty slots> ]
let arr4 = Array(3);    // 效果同上
复制代码

获取和修改为员

获取数组成员的方式：[]运算。

let arr = [1, { a: 1 }, 'b', [22, 11], true];
console.log(arr[1]);    // { a: 1 }
arr[0] = 100;
console.log(arr);       // [100, { a: 1 }, 'b', [22, 11], true]
复制代码

引用类型

Object是Array的基类，和Object同样，数组也是引用类型的数据。因此简单的赋值并不能复制数组，只是单纯的把"指针"复制给新的变量。看以下例子：

let arr = [1, 2, 3];
let arr2 = arr;
arr2[1] = 200;
console.log(arr);    // [ 1, 200, 3 ]复制代码

能够看出，arr2的修改也会对arr形成影响，其缘由是二者指向是同一个对象。要想二者互不影响，必须使用"深拷贝"。（看另外一篇文章讲述深拷贝）

成员的增减

添加/删除数组成员的方法有几个，能够从任意位置操做任意多个的成员，且都会改变数组的长度。下面介绍最简单的从数组尾部添加/删除。

let arr = [1, 2, 3];
arr.pop();
console.log(arr);    // [ 1, 2 ]
arr.push(100);
console.log(arr);    // [ 1, 2, 100 ]复制代码

还有一种"特别的"删除成员方法，就是使用delete运算符，但不会改变数组长度，只会把成员变为"空"：

let arr = [1, 2, 3];
delete arr[0];
console.log(arr);    // [ <1 empty slot>, 2, 3 ]复制代码

实例属性

目前经常使用的属性就一个：length。用于获取数组的长度。

实例方法

这些方法都是对数组的增删改查。其中"增"、"删"、"改"都会改变原数组。

增

• push(el1[, el2[, ...[, elN]]])：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
• unshift(el1[, el2[, ...[, elN]]])：将一个或多个元素添加到数组的开头，并返回该数组的新长度。
• fill(value[, start[, end]])：用一个固定值填充一个数组中从起始索引到终止索引内的所有元素。不包括终止索引。

// 【fill】
let arr2 = Array(3).fill('a');
console.log(arr2);  // [ 'a', 'a', 'a' ]
复制代码

删

• pop()：从数组中删除最后一个元素，并返回该元素的值。
• shift()：从数组中删除第一个元素，并返回该元素的值。

改

• copyWithin(target[, start[, end]])：参数都是索引值。浅复制数组的一部分到同一数组中的另外一个位置，并返回它，原数组长度不变。
• splice(start[, deleteCount[, item1[, item2[, ...]]]])：删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。start​表示修改开始的索引值，负数表示末尾开始；deleteCount表示移除的个数，可选，非负整数，超出边界取边界值；item1, item2, ...表示要添加的元素，省略则只删除。
• reverse()：把数组顺序颠倒，并返回该数组。
• sort([compareFunction])：以指定的算法对数组排序。compareFunction表示规定排序规则的函数，接收两个参数：currentEl当前元素，nextEl下一个元素。compareFunction返回 -1 表示currentEl < nextEl；返回 0 表示currentEl = nextEl；返回 1 表示currentEl < nextEl。

// 【sort】
let arr = [ 'b', 'a', 4, 3, 2, 1 ]
arr.sort((a, b) => {
  return a - b
})
console.log(arr);   // [ 'b', 'a', 1, 2, 3, 4 ]
复制代码

查

• indexOf(searchElement[, fromIndex])：返回在数组中能够找到一个给定元素的第一个索引值，若是不存在，则返回 -1 。searchElement表示要查找的元素；fromIndex表示开始查找的索引值，能够为负数，表示从末尾开始。
• lastIndexOf(searchElement[, fromIndex])：和indexOf()相似，只是从末尾开始，很少介绍。

遍历

正常状况下，遍历都不会修改原数组，除非你利用索引值对原数组进行修改。方法内传入的callback表示回调函数，该回调函数可传入三个参数，分别是：当前值value，当前索引值index，调用该方法的整个数组array。thisArg则表示执行callback时做为this对象的值。

• find(callback[, thisArg])：返回数组中知足callback函数的第一个元素的值。不然返回undefined。
• findIndex(callback[, thisArg])：与find()相似，只是返回的是索引值。若是不存在，则返回 -1 。

• filter(callback[, thisArg])：以callback为条件过滤数组。即对数组每一个元素执行一次callback，返回以callback返回值为true的元素组成的新数组，全部元素的callback都是false则返回[]。
• forEach(callback[, thisArg])：对数组的每一个元素执行一次callback函数，无返回值。
• map(callback[, thisArg])：对每一个元素执行callback函数，返回以callback的返回值所组成的新数组。
• reduce(callback[, initialValue])：以callback函数每次返回的值进行特定的运算，直到把数组全部元素"累积"成一个值。和上面的方法不同，callback接收的参数有四个：accumulator表示上一次调用回调时返回的累积值，初始值等于initialValue；currentValue表示正在处理的元素；currentIndex表示正在处理的元素的索引值，可选；array表示调用该方法的数组。initialValue表示计算的初始值，可选。
• reduceRight(callback[, initialValue])：与reduce()相似，只是从右边开始，很少介绍。

let arr = [1, 2, 3, 4, 5];
// 【filter】
let result1 = arr.filter(value => {
  return value > 2
});
console.log(result1);    // [ 3, 4, 5 ]
// 【reduce】
let result2 = arr.reduce((sum, current) => {
  return sum += current
}, 15);
console.log(result2);    // 30
复制代码

测试

返回的结果都是布尔值，表示是否含有特定值或知足特定的条件。callback函数接受的参数参照上面的"遍历"。

• every(callback[, thisArg])：测试一个数组内的全部元素是否都能经过callback函数的测试。
• some(callback[, thisArg])：测试一个数组内的全部元素是否有其中一个经过callback函数的测试。
• includes(valueToFind[, fromIndex])：查找数组是否包含指定元素。valueToFind表示要查找的元素，fromIndex表示开始查找的索引值，默认为 0 ，能够为负数，表示从末尾开始。

// 【every】
let arr = [1, 2, 3, 4];
let result = arr.every((value) => {
  return value > 1
});
console.log(result);    // false
复制代码

迭代器

• entries()：返回一个新的Array Iterator对象，该对象包含数组中每一个索引的键/值对。
• keys()：返回一个新的Array Iterator对象，该对象包含数组中每一个索引值。（对于数组，该方法实用性不大）
• value()：返回一个新的Array Iterator对象，该对象包含数组中每一个值。

// 【entries】
let arr = ['a', 'b', 'c'];
let iterator1 = array1.entries();
console.log(iterator1.next().value);    // [0, "a"]
console.log(iterator1.next().value);    // [1, "b"]
复制代码

浅拷贝

如下方法都是返回新数组，不会改变原数组。

• concat(value1[, value2[, ...[, valueN]]])：合并两个或多个数组组成新数组，返回新数组。valueN表示将数组和/或值链接成新数组。

• slice(begin, end)：提取数组，从索引begin到end(不包括end)的浅拷贝到一个新数组，返回新数组。begin和end都是索引值，均可以是负数，表示从末尾开始，若值超过数组边界，取边界值。
• flat(depth)：depth指定要提取嵌套数组的结构深度，默认值为 1。按照一个可指定的深度递归遍历数组，并将全部元素与遍历到的子数组中的元素合并为一个新数组返回。简单说就是把多维数组平铺，返回新数组，原数组不变。

// 【concat】
let arr = [1, 2, 3, 4];
let newArr = arr.concat([11, 22], 33);
console.log(newArr);    // [ 1, 2, 3, 4, 11, 22, 33 ]
// 【flat】
let arr = [1, [2, 3], [4, [5, 6], 7], 8]
let result4 = arr.flat(1);
let result5 = arr.flat(2);
console.log(result4);    // [ 1, 2, 3, 4, [5, 6], 7, 8 ]
console.log(result5);    // [ 1, 2, 3, 4, 5, 6, 7, 8 ]复制代码

其余

• join([separator])：用指定的分隔符把数组全部元素拼接成字符串（即除了最后一个，每一个元素转化成字符串并加上分隔符，最后把全部字符串按顺序链接），返回该字符串。separator表示分隔符，默认为","。
• toLocaleString()：返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。
• toString()：返回一个字符串，表示指定的数组及其元素。
  
• [Symbol.iterator]：经过这个方式能够改写数组对象默认的迭代器方法，固然了，通常状况不建议改写。

静态方法

目前静态方法有三个：

• from(arrayLike[, mapFn[, thisArg]])：从一个相似数组或可迭代对象中建立一个新数组实例，返回新数组。例如，函数内部的arguments对象就是一个类数组，Array.from(arguments)能够获得一个数组对象。arrayLike表示要转换成数组的伪数组对象或可迭代对象；mapFn表示新数组中的每一个元素会执行该回调函数，可选；thisArg表示执行回调函数mapFn时this对象，可选。
• of(element0[, element1[, ...[, elementN]]])：建立一个包含指定元素的新数组。与Array构造函数相似，二者惟一差异在于参数为单个整数，Array构造函数获得的是指定长度的空数组，而Array.of()获得的是包含该数字的一个数组。
• isArray(target)：用于肯定target的值是不是一个Array。返回布尔值。

展开运算符（...）

这部份内容在另外一篇文章有介绍。

其余

reduce() 方法的妙用

前面介绍到reduce()能够将数组的成员以特定的方法"累积"成特定的值。

加入数组存放的不是"值"，而是"方法"，数组就能够做为一个"方法栈"，把某个值通过"方法栈"后获得计算结果。例子以下：

let funcStack = [
  n => n + 2,
  n => n ** 3,
  n => n * 8
]
let input = 0,
  result = funcStack.reduce((computed, fn) => {
    return fn(computed);
  }, input);
// ((0 + 2) ^ 3) * 8 = 64
console.log(result);  // 64复制代码

输入值input依次经历了三个数学运算，获得最终的结果。