前端数据结构之数组

对象允许存储键值聚集，这很好。但许多时候我们发现还需要 有序聚集，里面的元素都是按顺序排列的。比方，我们可能需要存储一些列表，比如用户、商品以及 HTML 元素等。这里利用对象就不是很方便了，因为对象不能提供可以或许管理元素顺序的方法。我们不能在已有的元素“之间”插入一个新的属性。这种场景下对象就不太适用了。这时一个特殊的数据结构数组（Array）就派上用场了，它能存储有序的聚集。
  1.1 声明：

1.         创建一个空数组有两种语法：

复制代码

1.         let arr = new Array();
2.         let arr = [];
3.         let fruits = ["Apple", "Orange", "Plum"];

复制代码

数组元素从 0 开始编号。
我们可以通过方括号中的数字获取元素：

1.         let fruits = ["Apple", "Orange", "Plum"];
2.                 alert( fruits[0] ); // Apple
3.                 alert( fruits[1] ); // Orange
4.                 alert( fruits[2] ); // Plum

复制代码

可以替换元素：

1.         fruits[2] = 'Pear'; // 现在变成了 ["Apple", "Orange", "Pear"]

复制代码

……大概向数组新加一个元素：

1.         fruits[3] = 'Lemon'; // 现在变成 ["Apple", "Orange", "Pear", "Lemon"]

复制代码

length 属性的值是数组中元素的总个数：

1.         let fruits = ["Apple", "Orange", "Plum"];
2.         alert( fruits.length ); // 3

复制代码

也可以用 console来表现整个数组。

1.         let fruits = ["Apple", "Orange", "Plum"];
2.         console.log( fruits ); // Apple,Orange,Plum       

复制代码

数组可以存储任何范例的元素。

1.         // 混合值
2.         let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];
3.        
4.         // 获取索引为 1 的对象然后显示它的 name
5.         alert( arr[1].name ); // John
6.        
7.         // 获取索引为 3 的函数并执行
8.         arr[3](); // hello

复制代码

**留意：**以逗号末端

1.         数组就像对象一样，可以以逗号结尾：
3.         let fruits = [
4.           "Apple",
5.           "Orange",
6.           "Plum",
7.         ];
8.         因为每一行都是相似的，所以这种以“逗号结尾”的方式使得插入/移除项变得更加简单。

复制代码

1.2 利用 “at” 获取最后一个元素

1. 最近新增的特性
2. 这是一个最近添加到 JavaScript 的特性。 旧式浏览器可能需要 polyfills.
3. 假设我们想要数组的最后一个元素。
4. 一些编程语言允许我们使用负数索引来实现这一点，例如 fruits[-1]。
5. 但在 JavaScript 中这行不通。结果将是 undefined，因为方括号中的索引是被按照其字面意思处理的。
6. 我们可以显式地计算最后一个元素的索引，然后访问它：fruits[fruits.length - 1]。

复制代码

1.         let fruits = ["Apple", "Orange", "Plum"];
2.         alert( fruits[fruits.length-1] ); // Plum
3.         有点麻烦，不是吗？我们需要写两次变量名。幸运的是，这里有一个更简短的语法 fruits.at(-1)：
4.         // 与 fruits[fruits.length-1] 相同
5.         alert( fruits.at(-1) ); // Plum

复制代码

1. 换句话说，arr.at(i)：
2. 如果 i >= 0，则与 arr[i] 完全相同。
3. 对于 i 为负数的情况，它则从数组的尾部向前数。

复制代码

1.3 pop/push, shift/unshift 方法

1. 队列（queue）是最常见的使用数组的方法之一。在计算机科学中，这表示支持两个操作的一个有序元素的集合：
2.     push 在末端添加一个元素.
3.     shift 取出队列首端的一个元素，整个队列往前移，这样原先排第二的元素现在排在了第一。
4. 队列的应用在实践中经常会碰到。例如需要在屏幕上显示消息队列。
5. 数组还有另一个用例，就是数据结构 栈。
6. 它支持两种操作：
7.     push 在末端添加一个元素.
8.     pop 从末端取出一个元素.
9. 所以新元素的添加和取出都是从“末端”开始的。
10. 对于栈来说，最后放进去的内容是最先接收的，也叫做 LIFO（Last-In-First-Out），即后进先出法则。
11. 而与队列相对应的叫做 FIFO（First-In-First-Out），即先进先出。
12. JavaScript 中的数组既可以用作队列，也可以用作栈。它们允许你从首端/末端来添加/删除元素。
13. 这在计算机科学中，允许这样的操作的数据结构被称为 双端队列（deque）。

复制代码

1.3.1 作用于数组末了的方法：

1.pop:取出并返回数组的最后一个元素：会修改原数组

1. let fruits = ["Apple", "Orange", "Pear"];
2. alert( fruits.pop() ); // 移除 "Pear" 然后 alert 显示出来
3. alert( fruits ); // Apple, Orange

复制代码

1. fruits.pop() 和 fruits.at(-1) 都返回数组的最后一个元素，
2. 但 fruits.pop() 同时也删除了数组的最后一个元素，进而修改了原数组。

复制代码

2.push：在数组末了添加元素：

1.         let fruits = ["Apple", "Orange"];
2.         fruits.push("Pear");
3.         alert( fruits ); // Apple, Orange, Pear

复制代码

调用 fruits.push(…) 与 fruits[fruits.length] = … 是一样的。大概利用新的扩展运算符**…**进行数组的添加
1.3.2 作用于数组首端的方法：

1.shift：取出数组的第一个元素并返回它：

1.         let fruits = ["Apple", "Orange", "Pear"];
2.         alert( fruits.shift() ); // 移除 Apple 然后 alert 显示出来
3.         alert( fruits ); // Orange, Pear       

复制代码

2.unshift 在数组的首端添加元素：

1.         let fruits = ["Orange", "Pear"];
2.         fruits.unshift('Apple');
3.         alert( fruits ); // Apple, Orange, Pear

复制代码

3.push 和 unshift 方法都可以一次添加多个元素：

1.         let fruits = ["Apple"];
2.         fruits.push("Orange", "Peach");
3.         fruits.unshift("Pineapple", "Lemon");
4.         // ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
5.         alert( fruits );

复制代码

1.4 内部

数组是一种特殊的对象。利用方括号来访问属性 arr[0] 现实上是来自于对象的语法。它其实与 obj[key] 相同，此中 arr 是对象，而数字用作键（key）。
它们扩展了对象，提供了特殊的方法来处置处罚有序的数据聚集以及 length 属性。但从本质上讲，它仍然是一个对象。
记着，在 JavaScript 中只有 8 种基本的数据范例。数组是一个对象，因此其行为也像一个对象。
比方，它是通过引用来复制的：

1.         let fruits = ["Banana"]
2.         let arr = fruits; // 通过引用复制 (两个变量引用的是相同的数组)
3.         alert( arr === fruits ); // true
4.         arr.push("Pear"); // 通过引用修改数组
5.         alert( fruits ); // Banana, Pear — 现在有 2 项了

复制代码

但是数组真正特殊的是它们的内部实现。JavaScript 引擎实验把这些元素一个接一个地存储在一连的内存区域，就像本章的插图表现的一样，而且另有一些其它的优化，以使数组运行得非常快。
但是，假如我们不像“有序聚集”那样利用数组，而是像常规对象那样利用数组，这些就都不见效了。
比方，从技能上讲，我们可以这样做:

1.         let fruits = []; // 创建一个数组
2.         fruits[99999] = 5; // 分配索引远大于数组长度的属性
3.         fruits.age = 25; // 创建一个具有任意名称的属性

复制代码

这是可以的，因为数组是基于对象的。我们可以给它们添加任何属性。
但是 Javascript 引擎会发现，我们在像利用常规对象一样利用数组，那么针对数组的优化就不再适用了，然后对应的优化就会被关闭，这些优化所带来的优势也就荡然无存了。
数组误用的几种方式:

1. 添加一个非数字的属性，比如 arr.test = 5。
2. 制造空洞，比如：添加 arr[0]，然后添加 arr[1000] (它们中间什么都没有)。
3. 以倒序填充数组，比如 arr[1000]，arr[999] 等等。

复制代码

请将数组视为作用于 有序数据 的特殊结构。它们为此提供了特殊的方法。数组在 JavaScript 引擎内部是经过特殊调整的，使得更好地作用于一连的有序数据，以是请以正确的方式利用数组。假如你需要任意键值，那很有可能现实上你需要的是常规对象 {}。
1.5 性能：

push/pop 方法运行的比力快，而 shift/unshift 比力慢。
为什么作用于数组的末了会比首端快呢？让我们看看在实行期间都发生了什么：

1. fruits.shift(); // 从首端取出一个元素

复制代码

只获取并移除索引 0 对应的元素是不敷的。其它元素也需要被重新编号。
shift 操纵必须做三件事:
1.移除索引为 0 的元素。
2.把所有的元素向左移动，把索引 1 改成 0，2 改成 1 以此类推，对其重新编号。
3.更新 length 属性。
数组里的元素越多，移动它们就要花越多的时间，也就意味着越多的内存操纵。
unshift 也是一样：为了在数组的首端添加元素，我们起首需要将现有的元素向右移动，增加它们的索引值。
那 push/pop 是什么样的呢？它们不需要移动任何东西。假如从末了移除一个元素，pop 方法只需要清理索引值并收缩 length 就可以了。
pop 操纵的行为：

1. fruits.pop(); // 从末端取走一个元素

复制代码

pop 方法不需要移动任何东西，因为其它元素都生存了各自的索引。这就是为什么 pop 会特别快。
push 方法也是一样的。
1.6 循环

1.遍历数组最古老的方式就是 for 循环：

1. let arr = ["Apple", "Orange", "Pear"];
3. for (let i = 0; i < arr.length; i++) {
4.   alert( arr[i] );
5. }

复制代码

但对于数组来说另有另一种循环方式，for…of：

1. let fruits = ["Apple", "Orange", "Plum"];
3. // 遍历数组元素
4. for (let fruit of fruits) {
5.   alert( fruit );
6. }

复制代码

for…of 不能获取当前元素的索引，只是获取元素值，但大多数情况是够用的。而且这样写更短。
技能上来讲，因为数组也是对象，以是利用 for…in 也是可以的：

1. let arr = ["Apple", "Orange", "Pear"];
2. for (let key in arr) {
3.   alert( arr[key] ); // Apple, Orange, Pear
4. }

复制代码

但这其实是一个很不好的想法。会有一些潜在问题存在：

1. for..in 循环会遍历 所有属性，不仅仅是这些数字属性。
2. 在浏览器和其它环境中有一种称为“类数组”的对象，它们 看似是数组。
3. 也就是说，它们有 length 和索引属性，但是也可能有其它的非数字的属性和方法，这通常是我们不需要的。
4. for..in 循环会把它们都列出来。所以如果我们需要处理类数组对象，这些“额外”的属性就会存在问题。
5. for..in 循环适用于普通对象，并且做了对应的优化。但是不适用于数组，因此速度要慢 10-100 倍。
6. 当然即使是这样也依然非常快。只有在遇到瓶颈时可能会有问题。但是我们仍然应该了解这其中的不同。

复制代码

通常来说，我们不应该用 for…in 来处置处罚数组。
1.7 关于 “length”

当我们修改数组的时候，length 属性会自动更新。准确来说，它现实上不是数组里元素的个数，而是最大的数字索引值加一。
比方，一个数组只有一个元素，但是这个元素的索引值很大，那么这个数组的 length 也会很大：

1.         let fruits = [];
2.         fruits[123] = "Apple";
3.         alert( fruits.length ); // 124

复制代码

要知道的是我们通常不会这样利用数组。
length 属性的另一个故意思的点是它是可写的。
假如我们手动增加它，则不会发生任何风趣的事儿。但是假如我们减少它，数组就会被截断。该过程是不可逆的，下面是例子：

1.         let arr = [1, 2, 3, 4, 5];
2.         arr.length = 2; // 截断到只剩 2 个元素
3.         alert( arr ); // [1, 2]
4.         arr.length = 5; // 又把 length 加回来
5.         alert( arr[3] ); // undefined：被截断的那些数值并没有回来

复制代码

以是，清空数组最简单的方法就是：arr.length = 0;。
1.8 new Array()

这是创建数组的另一种语法：

1. let arr = new Array("Apple", "Pear", "etc");

复制代码

它很少被利用，因为方括号 [] 更短更简洁。而且，这种语法另有一个棘手的特性。
假如利用单个参数（即数字）调用 new Array，那么它会创建一个 指定了长度，却没有任何项 的数组。
让我们看看怎样搬起石头砸自己的脚:

1. let arr = new Array(2); // 会创建一个 [2] 的数组吗？
2. alert( arr[0] ); // undefined！没有元素。
3. alert( arr.length ); // length 2

复制代码

为了避免这种意外情况，我们通常利用方括号，除非我们真的知道自己在做什么。
1.9 多维数组

数组里的项也可以是数组。我们可以将其用于多维数组，比方存储矩阵：

1. let matrix = [
2.   [1, 2, 3],
3.   [4, 5, 6],
4.   [7, 8, 9]
5. ];
6. alert( matrix[1][1] ); // 最中间的那个数

复制代码

1.10 toString

数组有自己的 toString 方法的实现，会返回以逗号隔开的元素列表。

1. let arr = [1, 2, 3];
2. alert( arr ); // 1,2,3
3. alert( String(arr) === '1,2,3' ); // true

复制代码

此外，我们试试运行一下这个：

1. alert( [] + 1 ); // "1"
2. alert( [1] + 1 ); // "11"
3. alert( [1,2] + 1 ); // "1,21"

复制代码

数组没有 Symbol.toPrimitive，也没有 valueOf，它们只能实行 toString 进行转换，以是这里 [] 就变成了一个空字符串，[1] 变成了 “1”，[1,2] 变成了 “1,2”。
当 “+” 运算符把一些项加到字符串后面时，加号后面的项也会被转换成字符串，以是下一步就会是这样：

1.         alert( "" + 1 ); // "1"
2.         alert( "1" + 1 ); // "11"
3.         alert( "1,2" + 1 ); // "1,21"

复制代码

1.11 不要利用 == 比力数组

JavaScript 中的数组与其它一些编程语言的差别，不应该利用 == 运算符比力 JavaScript 中的数组。
该运算符不会对数组进行特殊处置处罚，它会像处置处罚任意对象那样处置处罚数组。
让我们回顾一下规则：

1. 仅当两个对象引用的是同一个对象时，它们才相等 ==。
2. 如果 == 左右两个参数之中有一个参数是对象，另一个参数是原始类型，
3. 那么该对象将会被转换为原始类型，
4. ……null 和 undefined 相等 ==，且各自不等于任何其他的值。
5. 严格比较 === 更简单，因为它不会进行类型转换。
6. 所以，如果我们使用 == 来比较数组，除非我们比较的是两个引用同一数组的变量，否则它们永远不相等。

复制代码

1.         alert( [] == [] ); // false
2.         alert( [0] == [0] ); // false

复制代码

从技能上讲，这些数组是差别的对象。以是它们不相当。== 运算符不会进行逐项比力。
与原始范例的比力也可能会产生看似很奇怪的结果：

1.         alert( 0 == [] ); // true
2.         alert('0' == [] ); // false

复制代码

在这里的两个例子中，我们将原始范例和数组对象进行比力。因此，数组 [] 被转换为原始范例以进行比力，被转换成了一个空字符串 ‘’。

1. // 在 [] 被转换为 '' 后
2. alert( 0 == '' ); // true，因为 '' 被转换成了数字 0
3. alert('0' == '' ); // false，没有进一步的类型转换，是不同的字符串

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。