第二章 数组
几乎所有的编程语言都原生支持数组类型，因为数组是最简单的内存数据结构。JavaScript里也有数组类型，虽然它的第一个版本并没有支持数组。本章将深入学习数组数据结构和它的能力。
为什么用数组
需求：保存所在城市每个月的平均温度，可以这么实现
var averageTemp1 = 43.3;
var averageTemp2 = 53.2;
var averageTemp3 = 14.2;
var averageTemp4 = 42.8;
var averageTemp5 = 14.8;
var averageTemp6 = 78.9;
只是保存前六个月就用了6个变量，显然这种方式不适合保存这类需求。通过数组可以简单地实现我们的需求。
var averageTemp = [];
averageTemp[0] = 43.3;
averageTemp[1] = 53.2;
averageTemp[2] = 14.2;
averageTemp[3] = 42.8;
averageTemp[4] = 14.8;
averageTemp[5] = 78.9;
创建和初始化数组
声明、创建和初始化数组的方式很简单
var temp = new Array(); // 使用 new 关键字，简单声明并初始化一个数组
var temp = new Array(8); // 还可以创建一个指定长度的数组
var temp = new Array(1,2,4,9); // 直接将数组元素作为参数传递给它的构造器
除了用 new创建数组，还可以通过中括号 []简单创建数组。
var temp = [1,2,4,9];
访问元素和迭代数组
通过在数组里指定特定位置的元素，可以获取该值或者赋值。而要知道一个数组里所有的元素，可以通过循环遍历数组。
for(var i = 0; i < temp.length; i++){
console.log(temp[i]); // 1,2,4,9
}
案例：斐波那契数列
已知斐波那契数列中的第一个数字是1，第二个数字是2，从第三项开始，每一项都等于前两项之和。求斐波那契数列的前20个数
var fibonacci = [];
fibonacci[1] = 1;
fibonacci[2] = 2;
for(var i =3; i < 20; i++){
fibonacci[i] = fibonacci[i-1] + fibonacci[i-2];
}
console.log(fibonacci); // [ 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765]
添加元素
var number = [1,2,3];
number[number.length] = 4;
number // 1,2,3,4
上述代码可以在数组的最后一位添加元素，但其实还有更加简便的方法：
push
push 能添加任意个元素在数组的末尾
number.push(5); // 5
number.push(6,7); //7
number // [1,2,3,4,5,6,7]
数组使用 push 会返回数组的长度
插入元素到数组首位
首先我们要腾出数组的第一个元素的位置，把所有的元素向右移动一位。我们可以循环数组中的元素，从最后一位+1（长度）开始，将其对应的前一个元素的值赋给它，依次处理，最后把我们想要的值赋给第一个位置（-1）上。
for(var i = number.length; i>=0; i--){
number[i] = number[i-1];
}
number[0] = -0;
unshift
或者直接 使用 unshift 方法，可以将数值插入数组的首位：
var number = [1,2,3,4];
number.unshift(-2); // 5
number.unshift(-4,-3); // 7
number // [-4, -3, -2, 1, 2, 3, 4]
数组使用 unshift 会返回数组的长度
删除元素
从数组尾部删除元素
pop
要删除最靠后的元素可以使用 pop 方法，会删除并返回数组的最后一个元素。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
var number = [1,2,3,4];
number.pop(); //4
number // [1,2,3]
number.pop() // 3
number // [1]
从数组首部删除元素
如果要移除数组里的第一个元素，可以使用下面的代码
var number = [1,2,3,4];
for(var i = 0;i < number.length; i++){
number[i] = number[i+1];
}
number // [2, 3, 4, undefined]
可以看出，我们将数组左移了一位，但数组的长度仍然没有变化，这意味着数组中有一个额外的元素，因为没有定义，所以是 undefined
shift
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 数组的长度也会发生变化。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。
小结
| 修改数组的方法 | 描述 |
|---|---|
| push | push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 |
| unshift | unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 |
| pop | pop() 方法用于删除并返回数组的最后一个元素。 如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。 |
| shift | shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值 |
push() 方法和 pop() 方法，能用数组模拟基本的栈的数据结构（先进后出）。
shift()方法和unshift()方法，能用数组模拟基本的队列的数据结构（先进先出 ）。
在任意位置添加或者删除元素
已经知道如何删除数组开头和结尾的元素，那么该怎么在数组中的任意位置删除或者添加元素？
splice
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
例子
var number = [1,2,3,4];
number.splice(2,0,4,4,5); // []
number //[1, 2, 4, 4, 5, 3, 4]
number.splice(2,5,7); // [4, 4, 5, 3, 4]
number //[1, 2, 7]
二维或者多维数组
我们知道如果要记录数天内每个小时的气温，可以使用数组来保存这些数据。那么要保存两天每小时气温的数据的时候可以这样。
var averageTemp1 = [32,53,45,23,46,53];
var averageTemp2 = [98,32,74,34,63,73];
然而这不是最好的方法。可以使用矩阵（二维数组）来存储这些信息。矩阵的行保存每天的数据，列对应小时级别的数据。
var averageTemp = [];
averageTemp[0] = [32,53,45,23,46,53];
averageTemp[1] = [98,32,74,34,63,73];
JavaScript只支持一维数组，并不支持矩阵。但是，可以用数组套数组来模拟矩阵或者任一多维数组。
迭代二维数组的元素
如果想看到这矩阵的输出，可以创建一个通用函数，专门输出其中的值：
function printMatrix(x){
for(var i = 0; i < x.length; i++){
for(var j = 0; j< x[i].length; j++){
console.log(x[i][j]);
}
}
}
printMatrix(averageTemp);
多维数组
我们也可以用这种方式来处理多维数组。假如我们要创建一个3x3x3的矩阵，每一个格子里包含矩阵的i（行）、j（列）、z（深度）之和：
var matrix3x3x3 = [];
for(var i = 0; i < 3; i++){
matrix3x3x3[i] = [];
for(var j = 0; j < 3; j++){
matrix3x3x3[i][j] = [];
for(var z = 0; z < 3; z++){
matrix3x3x3[i][j][z] = i+j+z;
}
}
}
数据结构中有几个维度都没有关系，都可以用循环遍历每个维度来访问所有格子
for(var i = 0; i < matrix3x3x3.length; i++){
for(var j = 0; j< matrix3x3x3[i].length; j++){
for(var z = 0; z < matrix3x3x3[i][j].length; z++){
console.log(matrix3x3x3[i][j][z]);
}
}
}
如果是一个3x3x3x3的矩阵，代码中就会用四层嵌套的 for 语句，以此类推。
JavaScript 的数组方法参考
在JavaScript里，数组是可以修改的对象。这意味着创建的每一个数组都有一些可用的方法。
下面表格是数组的一些核心方法。
| 方法名 | 描述 |
|---|---|
| concat | 连接2个或者更多数组，并返回结果 |
| every | 对数组中的每一项运行给定函数，如果该函数对每一项都但返回true,则返回true |
| filter | 对数组中度过每一项运行给定函数，返回该函数会返回true的项组成分数组 |
| forEach | 对数组中更多每一项运行给定函数，这个方法没有返回值 |
| join | 将所有的数组元素连接成一个字符串 |
| indexOf | 返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1 |
| lastIndexOf | 返回在数组中搜索到的与给定参数相等的元素的索引里最大的值 |
| map | 对数组中的每一项运行给定函数，返回每次函数调用结果组成的数组 |
| reverse | 颠倒数组中的元素的顺序，原先第一个元素现在变成了最后一个，同样原先的最后一个元素变成了现在的第一个 |
| slice | 传入索引值，将数组里对应索引范围内的元素作为新数组返回 |
| some | 对数组中每一项运行给定函数，如果任一项返回true,则返回true |
| sort | 按照字母的顺序对数组排序，支持传入指定排序方法的函数作为参数 |
| toString | 将数组作为字符串返回 |
| valueOf | 和 toString 相似，将数组作为字符串返回 |
数组合并
有多个数组，需要合并起来成为一个数组。我们可以迭代各个数组，然后把每个元素加入最终的数组。
JavaScript也有提供相对应的方法 concat()
var a = 0;
var b = [1,2,3];
var c = [-3,-2,-1];
var s = c.concat(a,b);
s // [-3, -2, -1, 0, 1, 2, 3]
迭代器函数
有时候，我们需要迭代数组中的元素。可以使用循环语句（前面提到的for语句等）。而其实 JavaScript 内置了许多数组可以使用的迭代方法。
对于本节的例子，我们需要函数和数组。假如有一个数组，值是从1到15，如果数组里面的元素可以被2整除（偶数），函数就要返回true,否则就返回false:
var isEven = function(x){
// 如果是 2的倍数，就返回 true
return (x % 2 == 0);
}
var number = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
every
every 会迭代数组中的每个元素，直到返回 false。
number.every(isEven)
在这个例子中，数组number第一个元素是1，不是2的倍数，因此 isEven 函数返回false,然后 every 执行结束。
some
some 方法和 every 相似，不过some方法会迭代数组中的每个元素，直到函数返回true
number.some(isEven)
这个例子中，数组的第二个参数是2，为2的倍数，因此返回true，迭代结束
forEach
如果要迭代整个数组可以用 forEach 方法，和使用 for 循环相同：
number.forEach(function(x){
console.log((x % 2 == 0));
});
map & filter
JavaScript还有两个会返回新数组的遍历方法。第一个是 map：
var myMap = number.map(isEven);
myMap // [false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]
从上面代码可以看出，myMap保存了传入 map 方法的 isEven函数运行的结果。这样就可以很容易知道一个元素是否偶数。
还有一个filter方法，它返回的新数组由使函数返回 true 的元素组成：
var evenNumbers = number.filter(isEven);
evenNumbers // [2, 4, 6, 8, 10, 12, 14]
reduce
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
| 参数 | 描述 |
|---|---|
| total | 必需。初始值, 或者计算结束后的返回值。 |
| currentValue | 必需。当前元素 |
| currentIndex | 可选。当前元素的索引 |
| arr | 可选。当前元素所属的数组对象。 |
如果要对一个数组中所有元素进行求和，这就很有用
number.reduce(function(total,currentValue,index){
return total + currentValue;
});
// 120
ES6 和数组的新功能
下表是ES6/7新增的数组方法
| 方法 | 描述 |
|---|---|
| @@iterator | 返回一个包含数组键值对的迭代器对象，可以通过同步调用得到数组元素的键值对 |
| copyWithin | 复制数组中一系列元素到同一数组指定的起始位置 |
| entries | 返回包含数组所有键值对的@@iterator |
| includes | 如果数组中存在某个元素则返回 true,否则返回false,ES7新增 |
| find | 根据回调函数给定的条件从数组中查找元素，如果找到就返回该元素 |
| findIndex | 根据回调函数给定的条件从数组中寻找元素，如果找到就返回该元素在数组中的索引 |
| fill | 用静态值填充数组 |
| from | 根据已有数组创建一个新数组 |
| keys | 返回包含数组所有索引的@@iterator |
| of | 根据传入的参数创建一个新数组 |
| values | 返回包含数组中所有值的@@iterator |
除了这些新的方法，还有一种用 for... of循环来迭代数组的新做法，以及可以从数组实例得到的迭代器对象。
使用 forEach 和箭头函数
箭头函数可以简化使用 forEach迭代数组元素的做法
number.forEach(function(x){
console.log (x % 2 == 0);
})
// 等于
number.forEach(x => {
console.log(x % 2 == 0);
});
使用 for...of 循环迭代
for(let n of number){
console.log(n % 2 == 0);
}
使用ES6新的迭代器（@@iterator）
ES6还为 Array 类增加了一个 @@iterator 属性，需要通过 Symbol.iterator来访问。
let iterator = number[Symbol.iterator]();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3
console.log(iterator.next().value); // 4
console.log(iterator.next().value); // 5
console.log(iterator.next().value); // 6
因为number数组中有15个值，所以需要调用15次 iterator.next().value ，数组中所有值都迭代完之后，就会返回 undefined。
-
数组的 entries、keys 和 values 方法
ES6还增加了三种从数组中得到迭代器的方法。
entries 方法返回包含键值对的 @@iterator
let aEntries = number.entries(); // 得到键值对的迭代器
console.log(aEntries.next().value); // [0,1] -- 位置0的值为1
console.log(aEntries.next().value); // [1,2] -- 位置1的值为2
console.log(aEntries.next().value); // [2,3] -- 位置2的值为3number 数组中都是数字，key是数组中的位置，value是保存在数组中索引的值
使用集合、字段、散列表等数据结构时，能够取出键值对是很有用的。后面会详细讲解。
key 方法返回包含数组索引的 @@iterator
let aKeys = number.entries(); // 得到数组索引的迭代器
console.log(aKeys.next()); // { value： 0， done: false}
console.log(aKeys.next()); // { value： 1， done: false}
console.log(aKeys.next()); // { value： 2， done: false}keys方法会返回number数组的索引。一旦没有可以迭代的值，aKeys.next() 就会返回一个value属性为undefined，done属性为 true的对象。如果 done属性为false，就意味着还有可以迭代的值。
使用from方法
Array.from方法根据已有的数组创建一个新数。比如复制number数组：
let number2 = Array.from(number);
number2 // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
使用Array.of
Array根据传入的参数创建一个新数组、
let number3 = Array.of(1);
let number4 = Array.of(1,2,3,4,5,6);
number3 // [1]
number4 // [1,2,3,4,5,6]
// 复制已有的数组
let numberCopy = Array.of(...number4);
numberCopy // [1,2,3,4,5,6]
使用fill方法
fill方法用静态值充填数组。
let numberCopy = Array.of(1,2,3,4,5,6);
numberCopy.fill(0); // [0, 0, 0, 0, 0, 0]
// 指定开始充填的索引
numberCopy.fill(2,1); // [0, 2, 2, 2, 2, 2]
// 指定结束的索引(结束的索引不包括本身)
numberCopy.fill(1,3,5); // [0, 2, 2, 1, 1, 2]
创建数组并初始化的时候，fill 方法就非常好用。
let ones = Array(6).fill(1); // 创建了一个长度为6，所有值都是1的数组
使用copyWithin方法
copyWithin方法复制数组中的一系列元素到同一个数组指定的起始位置。
语法：
array.copyWithin(target, start, end)
| 参数 | 描述 |
|---|---|
| target | 必需。复制到指定目标索引位置。 |
| start | 可选。元素复制的起始位置。 |
| end | 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。 |
let copyArray = [1,2,3,4,5,6];
copyArray.copyWithin(0,3); // [4, 5, 6, 4, 5, 6]
let copyArray1 = [1,2,3,4,5,6];
copyArray1.copyWithin(1,3,5); // [1, 4, 5, 4, 5, 6]
排序元素
反序输出最开始的长度为15的number数组。
number.reverse();
// [15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
尝试使用JavaScript自带的排序函数 sort();
number.sort();
//[1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]
跟我们预期的有些不一样，这是因为 sort 方法在对数组进行排序 的时候，把元素默认成字符串进行相互比较。所以我们要自己定义一个比较函数。
number.sort((a,b) =>{
return a -b;
})
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
上述代码，如果 b 大于 a，会返回负数，反之就是正数。如果相等的话，就会返回0。下面的写法会清晰一点
function compare(a, b){
if(a < b){
return -1;
}
if(a > b){
return 1;
}
return 0;
}
number.sort(compare);
sort 方法接受 compareFunction作为参数来比较元素。然后sort 会用它来排序数组
自定义排序
我们可以对任何对象类型的数组排序，也可以创建 compareFuntion 来比较元素。例如对象 Person 有名字和属性，我们希望根据年龄排序。
var friends = [
{name: 'John', age: 30},
{name: 'Ana', age: 20},
{name: 'Chris', age: 25}
];
friends.sort((a, b) =>{
return a.age - b.age;
})
// {name: "Ana", age: 20}
{name: "Chris", age: 25}
{name: "John", age: 30}
字符串排序
var names = ['Ana', 'ana', 'John', 'john'];
names.sort();
// ["Ana", "John", "ana", "john"]
字符串的比较是根据对应的 ASCⅡ值来比较的。例如 A、J、a、j对应分别是65、74、97、106。
虽然字母表的 a 是排靠前的，但是由于 ASCⅡ值 比较大，所以没有排在首位。如果忽略大小写呢？会是怎么样
names.sort((a, b) =>{
if(a.toLowerCase() < b.toLowerCase()){
return -1;
}
if(a.toLowerCase() > b.toLowerCase()){
return 1;
}
return 0;
})
// ["Ana", "ana", "John", "john"]
搜索
搜索有两个方法：indexOf方法返回与参数匹配的第一个元素的索引，lastIndexOf返回与参数匹配的最后一个元素的索引。
number.indexOf(10); // 9
number.indexOf(100); // -1 （因为100不存在数组里面）
number.puhs(10);
number.lastIndexOf(10); // 15
number.lastIndexOf(100) // -1
ES6 find 和 findIndex方法
let number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const multipleof13 = (element, index, array) => {
return (element % 13 == 0);
}
number.find(multipleof13); //13
number.findIndex(multipleof13); // 12
find 和 findIndex方法接受一个回调函数，搜索一个满足回调函数条件的值。上面的例子中，我们要从数组里找有个13的倍数。
ES7 使用includes方法
如果数组存在某个元素，includes 方法就会返回 true,否则就返回 false。
number.includes(15) // true
number.includes(20) // false
number.includes(4,4) // false 第二个参数为开始搜索的索引
输出字符串
toString 和 jion 方法
如果想把数组里所有元素输出位一个字符串，可以使用 toString 方法
number.toString(); // "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15"
还可以用不同的分隔符将元素隔开
number.join('-'); // "1-2-3-4-5-6-7-8-9-10-11-12-13-14-15"
类型数组
JavaScript由于不是强类型的，因此可以存储任意类型的数据，而类型数组则用于存储单一的数据。
语法：
let myArray = new TypedArray(length);
| 类型数组 | 数据类型 |
|---|---|
| Int8Array | 8位二进制补码整数 |
| Unit8Array | 8位无符号整数 |
| Unit8ClampedArray | 8位无符号整数 |
| Int16Array | 16位二进制补码整数 |
| Unit16Array | 16位无符号整数 |
| Int32Array | 32位二进制补码整数 |
| Unit32Array | 32位无符号整数 |
| Float32Array | 32位IEEE浮点数 |
| Float64Array | 64位IEEE浮点数 |
let length = 5;
let int16 = new Int16Array(length);
let array16 = [];
array16.length = length;
for(let i = 0;i < length; i++){
int16[i] = i + 1;
}
console.log(int16); // [1, 2, 3, 4, 5]
使用 webGl API、进行位操作、处理文件和图像时候，类型数组都可以大展拳脚。它用起来和普通数组也毫无二致，本节所学的数组方法和功能都可以用于类型数组。
小结
学习了常见的数据结构：数组。学习了怎么声明和初始化数组，给数组赋值后，以及添加和移除数组元素，学了多维数组和数组的一些操作方法。
下一章，学习栈，一种具有特殊行为的数组。
书籍链接： 学习JavaScript数据结构与算法