JS数组详细解析

阳光穿透心脏的1/2处 2023-01-02 04:28 164阅读 0赞

# #

# 1、什么是数组? #

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据（例如：车名字），存在单独变量如下所示：

var car1="Saab";  
var car2="Volvo";  
var car3="BMW";

然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！

最好的方法就是用数组。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

--------------------

# 2、创建一个数组 #

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array("Saab","Volvo","BMW");

2: 省略new方式:

var myCars= Array("Saab","Volvo","BMW");

3: 字面:

var myCars=\["Saab","Volvo","BMW"\];

**new Array（）它很少被使用，因为方括号 `[]` 更短更简洁。而且这种语法还存在一些诡异的特性。**

**如果调用 `new Array` 使用的是一个单独的数字作为参数，那么就会创建一个指定了长度，却没有任何项的数组。**

--------------------

# 3、数组循环 #

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

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

### 但对于数组来说还有另一种循环方式，`for..` in： ###

let fruits = ["Apple", "Orange", "Plum"];
    
    // 迭代数组元素
    for (let fruit in fruits) {
      alert( fruit );
    }

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

1.  `for..in` 循环会迭代**所有属性**，不仅仅是这些数字属性。
    
    在浏览器和其它环境中有一种“类数组”的对象，它们**看似是数组**，也就是说，它们有 `length` 和索引属性，但是也可能有其它的非数字的属性和方法，这通常是我们不需要的。`for..in` 循环会把它们都列出来。所以如果我们需要处理类数组对象，这些“额外”的属性就会存在问题。
2.  `for..in` 循环适用于普通对象，不适用于数组，而且会慢 10-100 倍。当然即使是这样也依然非常快。只有在遇到瓶颈或者一些不相关的场景增速可能会有问题。但是我们仍然应该了解这其中的不同。

通常来说， `for循环` 来处理数组。

--------------------

# 4、数组方法 #

--------------------

## 4.1、添加、移除元素 ##

队列是最常见的使用数组的方法之一. 在计算机科学中，这意味着一个有序的元素的集合支持两个操作：

*  `push` 在末端添加一个元素.
 *  `shift` 取出队列最前端的一个元素，整个队列往前移，这样原先排第二的元素现在排在了第一。

这两种操作数组都支持.

队列的应用在实践中经常会碰到，例如需要在屏幕上显示消息队列。

数组还有另一个用例，就是数据结构栈。

它支持两种操作：

*  `push` 在末端添加一个元素.
 *  `pop` 从末端取出一个元素.

所以新元素的添加和取出都是从“末端”开始的。

栈通常被被形容成一叠卡片：要么添加卡片放到最上面，要么从最上面拿走卡片

对于栈来说，最后放进去的是最先接收的，也叫做 LIFO（后进先出）法则。而与队列相对应的叫做 FIFO（先进先出）。

JavaScript 中的数组既可以用作队列，也可以用作栈。它们允许从前端/末端来添加/删除元素。

这在计算机科学中叫做双端队列。

**作用于数组末端的方法：**

### `pop` ###

取出并返回数组的最后一个元素：

### `push` ###

在数组末端添加元素：

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

调用 `fruits.push(...)` 与 `fruits[fruits.length] = ...` 是一样的。

**作用于数组前端的方法：**

### `shift` ###

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

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

### `unshift` ###

在数组的前端添加元素：

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

`push` 和 `unshift` 可以一次添加多个元素：

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

--------------------

## 4.2、splice ##

如何从数组中删除元素？

arr.splice(str) 方法可以说是数组界的瑞士军刀。它可以做所有事情：添加，删除和插入元素。

语法是：

arr.splice(index[, deleteCount, elem1, ..., elemN])

从 `index` 开始：删除 `deleteCount` 元素并在当前位置插入 `elem1, ..., elemN`。最后返回已删除元素的数组。

实例删除了 3 个元素，并用另外两个元素替换它们：

let arr = ["I", "study", "JavaScript", "right", "now"];
    
    // remove 3 first elements and replace them with another
    arr.splice(0, 3, "Let's", "dance");
    
    alert( arr ) // now ["Let's", "dance", "right", "now"]

返回已删除元素的数组：

let arr = ["I", "study", "JavaScript", "right", "now"];
    
    // remove 2 first elements
    let removed = arr.splice(0, 2);
    
    alert( removed ); // "I", "study" <-- 被删除元素的数组

--------------------

### slice ###

arr.slice方法比 `arr.splice` 简单得多。

它从所有元素的开始索引 `"start"` 复制到 `"end"` (不包括 `"end"`) 返回一个新的数组。`start` 和 `end` 都可以是负数，在这种情况下，从末尾计算索引。

它和字符串的 `str.slice` 有点像，就是把子字符串替换成子数组。

实例:

--------------------

### concat ###

arr.concat 将数组与其他数组和/或元素结合在一起。

它接受任意数量的参数 — 数组或值。

结果是一个包含`arr`，`arg1`，`arg2`等元素的新数组。

如果参数是一个数组或具有 `Symbol.isConcatSpreadable` 属性，则其所有元素都将被复制。否则，复制参数本身。

通常，它只复制数组中的元素（“扩展”它们）。其他对象，即使它们看起来像数组一样，仍然作为一个整体添加

…但是，如果类似数组的对象具有 `Symbol.isConcatSpreadable` 属性，将替换其元素

实例：

--------------------

### [4..3、indexOf/lastIndexOf 和 includes][4..3_indexOf_lastIndexOf _ includes] ###

[arr.indexOf][]、[arr.lastIndexOf][] 和 [arr.includes][] 方法与字符串操作具有相同的语法，并且作用基本上也与字符串的方法相同，只不过这里是对数组元素而不是字符进行操作：

*  `arr.indexOf(item, from)` 从索引 `from` 开始搜索 `item`，在数组中查找第一次出现元素的下标，如果找到则返回索引，否则返回 `-1`。
 *  实例：
    
        <script>
                let i = [1, "67", 5, 5];
                let d = i.indexOf(1);
                alert(d);
            </script>
    
     
 *  `arr.lastIndexOf(item, from)` —— 和上面相同，只是从右向左搜索。
 *  `arr.includes(item, from)` —— 从索引 `from` 开始搜索 `item`，如果找到则返回 `true`（译注：如果没找到，则返回 `false`）。

--------------------

## 4.4、 ##

forEach()

格式：数组.forEach(function(item,index,arr))\{

参数：

item：当前遍历的元素，

index：当前遍历元素的下标

arr：数组

实例：

--------------------

### [4.5、sort(fn)][4.5_sort_fn] ###

[arr.sort][] 方法对数组进行 **原位（in-place）** 排序，更改元素的顺序。(译注：原位是指在此数组内，而非生成一个新数组。)

它还返回排序后的数组，但是返回值通常会被忽略，因为修改了 `arr` 本身。

实例：

浏览器输出：![20210105185758272.png][]

**这些元素默认情况下被按字符串进行排序。**

从字面上看，所有元素都被转换为字符串，然后进行比较。对于字符串，按照词典顺序进行排序，实际上应该是 `"2" > "15"`。

--------------------

### 4.6、  功能：将数组元素反转。 ###

格式:数组.reverse();

该方法会修改原数组。

--------------------

## 5、数组排序 ##

### 5.1、冒泡排序 ###

规则：从左到右，数组中相邻的两个元素进行比较。将较大（较小）的数放在后面。

规律:每一轮都可以找出一个最大（最小）值，放在正确的位置上。

比较的轮次：数组的长度-1

每一轮比较的次数：数组长度-当前的轮次

实例：

### 5.2、选择排序 ###

规则：选出一个位置，让这个位置上的数与后面的数比较，如果大于（小于）后面的数，则交换位置。然后对该位置进行下一轮比较。

规律：每一轮，在当前位置找到正确的值。

比较的轮次：数组的长度-1

每一轮比较的次数：数组长度-当前的轮次

实例：

[4..3_indexOf_lastIndexOf _ includes]: https://zh.javascript.info/array-methods#indexoflastindexof-he-includes
[arr.indexOf]: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
[arr.lastIndexOf]: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
[arr.includes]: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
[4.5_sort_fn]: https://zh.javascript.info/array-methods#sortfn
[arr.sort]: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
[20210105185758272.png]: /images/20221120/559a2d7e41cd430a9587171ab8de2898.png