所谓数据结构，就是计算机存储和组织数据的方式。说得通俗一点，主要就是指将数据以什么样的结构存储到计算机里面。
在程序里面，最为常见的数据结构，就是数组，这种结构将多个数据有序的排列在一起，形成了一个组合。除了数组以外，集合，映射等 ECMAScript 6 新增加的数据结构，也会在本章中向大家详细介绍。
本章中我们将学习如下的内容：
- 数组基础知识
- 数组相关属性和方法
- 集合
- 映射
4-1 数组基础
数组是大多数语言里面最常见的一种数据结构，它是一个有序的值列表。
4-1-1 创建数组
创建数组的方式大致可以分为两种：字面量创建数组和使用构造函数创建数组。示例如下：
1. 字面量创建数组
let arr = [];
2. 构造函数创建数组
let arr = new Array();
需要注意的是，无论是字面量形式创建的数组，还是构造函数创建的数组，当我们使用typeof来打印其数据类型的时候，都会返回一个object，如下：
let arr1 = [];
let arr2 = new Array();
console.log(typeof arr1); // object
console.log(typeof arr2); // object
4-1-2 数组赋值
给数组赋值的方法也非常简单，不过可以分为先声明再赋值和声明时直接赋值，如下：
1. 先声明再赋值
let arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
注意下标是从 0 开始的。
2. 声明时直接赋值
let arr = [1,2,3,4,5];
需要注意的是我们可以在数组的任意位置进行赋值，数组的长度会自动改变，空的位置使用undefined来进行填充
let arr = [];
arr[0] = 1;
arr[4] = 10;
console.log(arr);
// [ 1, <3 empty items>, 10 ]
由于 JavaScript 是动态语言，所以 JavaScript 里面数组的数据类型可以是任意类型
let arr = [1,"Hello",3.14,true];
4-1-3 访问数组元素
通过数组的下标，我们可以轻松的访问到存储在数组里面的元素，如下：
let arr = [1,2,3,4,5];
console.log(arr[0]); // 1
需要注意数组里面的第一个元素是从下标 0 开始的。
除了这种常规的访问方式，我们还可以使用变量的方式来进行访问，如下：
let arr = [1,2,3,4,5];
let i = 2;
console.log(arr[i]); // 3
4-1-4 删除元素
我们可以使用delete运算符来删除数组中的某一个元素，示例如下：
let arr = [1,2,3,4,5];
delete arr[2]; // 删除数组中的第3个元素
console.log(arr);
// [ 1, 2, <1 empty item>, 4, 5 ]
4-1-5 数组的遍历
接下来我们来看一下数组的遍历，在 JavaScript 中，遍历数组的方式非常的多。这里先介绍几种常见的数组遍历方式。
通过 for 循环来遍历数组
最简单的方式就是通过for循环来进行数组的遍历，这也是一直以来被使用得最多的方式，示例如下：
let arr = [1, 2, 3, 4, 5];
for (let i=0;i通过 for-in 来遍历数组
for-in主要迭代的是数组的键，然后我们通过键就可以找到相应的数组元素，示例如下：
let arr = [1, 2, 3, 4, 5];
for (let i in arr) {
console.log(`键为${i}的元素值为${arr[i]}`);
}
// 键为 0 的元素值为 1
// 键为 1 的元素值为 2
// 键为 2 的元素值为 3
// 键为 3 的元素值为 4
// 键为 4 的元素值为 5
通过 for-of 来遍历数组
上面介绍的for-in是迭代数组的键，这里所介绍的for-of是直接迭代数组的值，示例如下：
let arr = [1, 2, 3, 4, 5];
for (let i of arr) {
console.log(i);
}
// 1
// 2
// 3
// 4
// 5
通过 forEach 来遍历数组（扩展）
最后再介绍一种通过forEach的方式来遍历数组，不过这里涉及到了回调函数的知识。在第 5 章我们就会学习回调函数，所以这里大家先了解一下这种遍历的方式即可，示例如下：
let arr = [1,2,3,4,5,6,7,8,9,10];
// 将数组的每一项传入到回调函数，然后执行回调函数里面的操作
let i = arr.forEach(function(item){
console.log(item);
});
使用迭代器进行遍历
在 ECMAScript 6 中，还专门提供了 3 个用于迭代可迭代元素的方法，分别是keys()，values()以及entries()方法。
其中keys()是找到可迭代元素的键，values()是找到可迭代元素的值，entries()是同时找到可迭代元素的键和值。
示例：使用keys()方法遍历出数组的键
let arr = [3,5,8,1];
for(let i of arr.keys()){
console.log(i);
}
// 0
// 1
// 2
// 3
示例：使用values()方法遍历出数组的值
let arr = [3,5,8,1];
for(let i of arr.values()){
console.log(i);
}
// 3
// 5
// 8
// 1
注意：根据 Node.js 环境的版本，可能出现数组里面无法使用
values()方法情况。
示例：使用entries()方法遍历出数组的键和值
let arr = [3,5,8,1];
for(let i of arr.entries()){
console.log(i);
}
// [ 0, 3 ]
// [ 1, 5 ]
// [ 2, 8 ]
// [ 3, 1 ]
4-1-6 解构数组
首先我们需要了解什么是解构，所谓解构，就是将一个复杂类型的数据分解为一个普通类型数据。解构是从 ECMAScript 6 开始新添加的功能。可以对数组和对象进行解构。
这里我们先来看一下数组的解构，如下：
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
这里，就是将 arr 这个数组里面的值分解给了 a，b，c
可以使用逗号来跳过不想要解构的元素，如下：
let arr = [1,2,3];
let [a,,b] = arr;
console.log(a); // 1
console.log(b); // 3
在解构出现之前，我们交换两个数需要使用到一个中间变量，但是现在我们可以使用解构来交换两个数
let a = 1,b = 2;
[a,b] = [b,a];
console.log(a); // 2
console.log(b); // 1
关于对象的解构，我们会在后面进行介绍，详细参见对象的相关章节。
4-1-7 多维数组
首先需要说明的是，JavaScript 里面不支持传统编程语言中的多维数组。但是，由于 JavaScript 的数组里面所存放的数据的数据类型可以是任意类型，所以我们可以模拟出多维数组
let a = ["Bill","Mary","Lucy"];
let b = [21,24,27];
let c = [a,b]; // 这里 c 就是一个多维数组
如果要访问多维数组里面的数据，可以使用下面的形式
let a = ["Bill","Mary","Lucy"];
let b = [21,24,27];
let c = [a,b];
console.log(c[0][2]); // Lucy
利用前面所介绍的解构，我们可以来解构一个多维数组，示例如下：
let arr = [[1,2,3],4,5];
let [a,b,c] = arr;
console.log(a); // [1,2,3]
console.log(b); // 4
console.log(c); // 5
4-1-8 扩展运算符
扩展运算符是 ECMAScript 6 开始新添加的运算符，用于取出可迭代对象的每一项。这里我们可以用它来快速的展开一个数组
let a = ["Bill","Mary","Lucy"];
let b = [21,24,27];
let c = [...a,...b];
console.log(c);
// [ 'Bill', 'Mary', 'Lucy', 21, 24, 27 ]
我们再来看一个例子：
let a = [1,2,3];
let b = [...a,4,5,6];
console.log(b);
// [ 1, 2, 3, 4, 5, 6 ]
有了这个运算符以后，我们可以使用它将字符串快速转为数组
let str = "Hello";
let arr = [...str];
console.log(arr);
// [ 'H', 'e', 'l', 'l', 'o' ]
Comments