JS陣列詳細解析

阿新 • • 發佈：2021-01-05

技術標籤：js javascript 佇列

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 );
}

但這其實不是個好想法。會有一些潛在問題存在：

for..in迴圈會迭代所有屬性，不僅僅是這些數字屬性。

在瀏覽器和其它環境中有一種“類陣列”的物件，它們看似是陣列，也就是說，它們有length和索引屬性，但是也可能有其它的非數字的屬性和方法，這通常是我們不需要的。for..in迴圈會把它們都列出來。所以如果我們需要處理類陣列物件，這些“額外”的屬性就會存在問題。
for..in迴圈適用於普通物件，不適用於陣列，而且會慢 10-100 倍。當然即使是這樣也依然非常快。只有在遇到瓶頸或者一些不相關的場景增速可能會有問題。但是我們仍然應該瞭解這其中的不同。

通常來說， for迴圈 來處理陣列。

4、陣列方法

4.1、新增、移除元素

佇列是最常見的使用陣列的方法之一. 在電腦科學中，這意味著一個有序的元素的集合支援兩個操作：

push在末端新增一個元素.
shift取出佇列最前端的一個元素，整個佇列往前移，這樣原先排第二的元素現在排在了第一。

這兩種運算元組都支援.

佇列的應用在實踐中經常會碰到，例如需要在螢幕上顯示訊息佇列。

陣列還有另一個用例，就是資料結構棧。

它支援兩種操作：

push在末端新增一個元素.
pop從末端取出一個元素.

所以新元素的新增和取出都是從“末端”開始的。

棧通常被被形容成一疊卡片：要麼新增卡片放到最上面，要麼從最上面拿走卡片

對於棧來說，最後放進去的是最先接收的，也叫做 LIFO（後進先出）法則。而與佇列相對應的叫做 FIFO（先進先出）。

JavaScript 中的陣列既可以用作佇列，也可以用作棧。它們允許從前端/末端來新增/刪除元素。

這在電腦科學中叫做雙端佇列。

作用於陣列末端的方法：

`pop`

取出並返回陣列的最後一個元素：

 <script>

        let fruits = ["Apple", "Orange", "Pear"];


        alert(fruits.pop()); // 移除 "Pear" 然後 alert 顯示出來

        alert(fruits); // Apple, Orange
   

  </script>

`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" <-- 被刪除元素的陣列