數組

為了存儲有序集合，有一個特殊的數據結構稱為 Array.

Array - 有序的數據集合，其中包含第1，第2，第3個元素等。例如，我們需要它來存儲以下內容的列表：用戶，產品，站點元素等。

創建

2️⃣ 有用於創建空數組的選項：

let arr = new Array(5)
// new Array(5) - creates an array with no elements (which cannot be accessed just like that), but with a given length.
let arr = []

幾乎總是使用第二種變體2️⃣語法used。 在括號中，我們可以指示元素的初始值：

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] return fruits.toString() }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']

  return fruits.toString()
}

结果

Loading...

數組元素從零開始編號

我們可以通過在方括號中指定其編號來獲取元素:

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] return fruits[0] }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']

  return fruits[0]
}

结果

Loading...

我們可以替換元素:

fruits[2] = 'Plum' // now ["Apple", "Orange", "Plum"]

... 或在現有陣列上添加一個新的 :

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] fruits[2] = 'Pear' fruits[3] = 'Lemon' // теперь ["Apple", "Orange", "Pear", "Lemon"] return fruits }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']
  fruits[2] = 'Pear'
  fruits[3] = 'Lemon' // теперь ["Apple", "Orange", "Pear", "Lemon"]

  return fruits
}

结果

Loading...

長度

數組中的元素總數包含在其數組中 .length 財產：

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Plum'] return fruits.length }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Plum']

  return fruits.length
}

结果

Loading...

length 數組更改時，屬性會自動更新。 確切地說，它不是數組中元素的數量，而是最大的數字索引加一。

例如，唯一的具有大索引的實元素為數組提供最大可能的長度 :

实时编辑器

function learnJavaScript() { let fruits = [] fruits[155] = 'Apple' return fruits.length // 156 }

function learnJavaScript() {
  let fruits = []
  fruits[155] = 'Apple'

  return fruits.length // 156
}

结果

Loading...

請注意，我們通常不以這種方式使用數組。

關於 length 屬性是它可以被覆蓋。

如果我們手動增加➕，則不會發生任何有趣的事情。 但是，如果我們減少它，數組將變短。 我們可以從示例中了解到，這個過程是不可逆的 :

实时编辑器

function learnJavaScript() { let arr = [1, 2, 3, 4, 5] arr.length = 2 // shorten to two elements //console.log( arr ) // [1, 2] arr.length = 5 // return length as it was //console.log( arr[3] ) // undefined: values are not restored! return 'The real array was shortened:' + arr }

function learnJavaScript() {
  let arr = [1, 2, 3, 4, 5]

  arr.length = 2 // shorten to two elements
  //console.log( arr )  // [1, 2]

  arr.length = 5 // return length as it was
  //console.log( arr[3] )  // undefined: values are not restored!

  return 'The real array was shortened:' + arr
}

结果

Loading...

所以清除數組的最簡單方法是 arr.length = 0.

項目類型

數組可以存儲任何類型的元素-數字，布爾值，字符串，對像或整個函數：

例如 :

实时编辑器

function learnJavaScript() { let arr = [ 'Apple', { name: 'Nikita' }, true, function () { return 'Hello' } ] // get the element with index 1 {object} and then read its property let x = arr[1].name // name Nikita // get the element with index 3 (function) and execute it let result1 = arr[3] // The function itself let result2 = arr[3]() // 'Hello' return 'Value of 4th element at 3rd index:' + result2 // + '. The function itself: '+ result1 }

function learnJavaScript() {
  let arr = [
    'Apple',
    { name: 'Nikita' },
    true,
    function () {
      return 'Hello'
    }
  ]
  // get the element with index 1 {object} and then read its property
  let x = arr[1].name // name Nikita
  // get the element with index 3 (function) and execute it
  let result1 = arr[3] // The function itself
  let result2 = arr[3]() // 'Hello'

  return 'Value of 4th element at 3rd index:' + result2
  // + '. The function itself: '+ result1
}

结果

Loading...

筆記 result1 = arr [3] 包含函數的文本，以及 result2 = arr [3] () 執行函數的結果是 () 我們運行它。

方法 push / pop

Stack 是使用數組作為數據結構的一種變體。

它支持兩種 2️⃣ 操作類型：

• push ➕ 在最後添加一個元素。

• pop ➖ 刪除最後一個元素。

因此，新元素總是添加或刪除 "end".

堆棧的一個例子通常是金字塔：新的戒指放在頂部，也從上方取下來。

Queue 是數組的最常見用途之一。 在計算機科學中，這是元素的有序集合

處理數組末尾的方法:

推

➕ 將元素添加到數組的末尾:

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange'] fruits.push('Pear') return 'Array: ' + fruits // Apple, Orange, Pear }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange']

  fruits.push('Pear')

  return 'Array: ' + fruits // Apple, Orange, Pear
}

结果

Loading...

流行音樂

➖ 從數組中刪除最後一個元素並返回它 :

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Pear'] let delFruits = fruits.pop() // remove the "Pear" and return it to the delFruits variable return 'Removed item = ' + delFruits + '. Array left: ' + fruits // Apple, Orange }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Pear']

  let delFruits = fruits.pop() // remove the "Pear" and return it to the delFruits variable

  return 'Removed item = ' + delFruits + '. Array left: ' + fruits // Apple, Orange
}

结果

Loading...

處理數組開頭的方法:

轉移

➖ 從數組中刪除第一個並返回 :

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Pear'] fruits.shift() // remove the Apple return fruits }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Pear']

  fruits.shift() // remove the Apple

  return fruits
}

结果

Loading...

不變

➕ 將元素添加到數組的開頭:

实时编辑器

function learnJavaScript() { let fruits = ['Apple', 'Orange', 'Pear'] fruits.unshift('Apricot') return fruits }

function learnJavaScript() {
  let fruits = ['Apple', 'Orange', 'Pear']

  fruits.unshift('Apricot')

  return fruits
}

结果

Loading...

push 和 unshift 方法可以一次添加多個元素 :

实时编辑器

function learnJavaScript() { let fruits = ['Apple'] fruits.push('Orange', 'Pear') fruits.unshift('Pineapple', 'Lemon') return 'In an array ' + fruits.length + ' elements. ' + ' Array: ' + fruits // ["Pineapple", "Lemon", "Apple", "Orange", "Pear"] }

function learnJavaScript() {
  let fruits = ['Apple']

  fruits.push('Orange', 'Pear')
  fruits.unshift('Pineapple', 'Lemon')

  return 'In an array ' + fruits.length + ' elements. ' + ' Array: ' + fruits // ["Pineapple", "Lemon", "Apple", "Orange", "Pear"]
}

结果

Loading...

內部陣列

數組是一種特殊的對象。 用於訪問arr的方括號 [0] 屬性本質上是鍵訪問的常用語法，例如 obj [key], 其中obj是arr，鍵是數字索引。

數組擴展了對象，因為它們提供了用於處理數據的有序集合以及 length 屬性的特殊方法。 “但是它們仍然基於設施。

請記住，在JavaScript中，數組是一個對象，因此其行為類似於對象。

例如，數組通過引用複制 :

实时编辑器

function learnJavaScript() { let fruits = ['Lemon'] let copy = fruits // copied by reference (two variables refer to the same array) copy.push('Pear') // arrays are changed by reference with one command return '1 array:' + fruits + '2 array:' + copy // Lemon, Pear - now two elements }

function learnJavaScript() {
  let fruits = ['Lemon']

  let copy = fruits // copied by reference (two variables refer to the same array)

  copy.push('Pear') // arrays are changed by reference with one command

  return '1 array:' + fruits + '2 array:' + copy // Lemon, Pear - now two elements
}

结果

Loading...

真正使數組與眾不同的是它們的內部表示。 JavaScript引擎試圖將數組的元素一個接一個地存儲在內存的連續區域中。 還有其他優化可以使數組變得非常快。

但是，如果我們停止將數組作為“數據的有序集合”使用，並像常規對像一樣開始使用它，它們將全部失效。

例如，我們可以在技術上執行以下操作：

let fruits = [] // create an empty array

fruits[99999] = 5 // create a property with a redundant index much larger than the required array length

fruits.age = 25 // create a property with an arbitrary name

這是可能的，因為數組基於對象。 我們可以為其分配任何屬性。

可能濫用陣列！

• 例如，添加非數值屬性（索引測試: arr.test = 5
• 的製作"holes", 例如：添加arr [0], 藝術 [1000] （兩者之間沒有任何東西） -以相反的順序填充數組，例如：arr [1000], arr [999], etc.

將數組視為一種特殊的結構，它允許您處理有序數據。 如果您需要任意鍵，則很有可能 {} 對象更適合。

效率

推/彈出方法快，而移位/不移位方法慢。

為什麼在數組的結尾處比在數組的開始處更快？ 讓我們看看運行時會發生什麼：

fruits.shift() // remove the first element from the beginning

It is not enough to simply grab and remove item 0. You also need to re-number the rest of the elements.

移位操作必須做三件事：

-刪除索引為0的元素

• 將所有元素移到左側，重新編號，替換 1 和 0, 2 和 1, etc.

• 更新 length 財產

數組包含的元素越多，移動它們所需的時間越長，則內存操作也就越多。

但是刪除流行音樂呢？ 他不需要移動任何東西。 要刪除數組末尾的元素，pop方法將清除索引並減小長度。 其餘元素保留相同的索引。

fruits.pop() // remove one element from the end

pop方法不需要移動。 這就是為什麼它運行非常快的原因。

push 方法的工作方式相同。

遍曆元素

迭代數組元素的最古老方法之一是 for () 遍歷數字索引 :

实时编辑器

// prettier-ignore function learnJavaScript() { let result = '' let arr = ['Apple', 'Orange', 'Kiwi'] for (let i = 0; i < arr.length; i++) // iterate over elements through for () result += arr[i] + ', ' return result // Apple, Orange, Kiwi }

// prettier-ignore
function learnJavaScript() {
   let result = ''
   let arr = ['Apple', 'Orange', 'Kiwi']

   for (let i = 0; i < arr.length; i++) // iterate over elements through for ()
   result += arr[i] + ', '

   return result // Apple, Orange, Kiwi
}

结果

Loading...

但是數組也可以使用另一種循環形式， for..of :

实时编辑器

function learnJavaScript() { let result = '' let fruits = ['Apple', 'Orange', 'Plum'] for (let fruit of fruits) { // iterate over values through `for..of` result += fruit + ', ' } return result // Apple, Orange, Plum }

function learnJavaScript() {
  let result = ''
  let fruits = ['Apple', 'Orange', 'Plum']

  for (let fruit of fruits) {
    // iterate over values through `for..of`
    result += fruit + ', '
  }
  return result // Apple, Orange, Plum
}

结果

Loading...

for..of 循環不提供對當前元素編號的訪問，僅提供其值的訪問，但是在大多數情況下，這樣做綽綽有餘，而且更短。

多維數組

數組可以包含也是數組的元素。 這可以用於創建омер多維數組，例如，存儲矩陣：

实时编辑器

function learnJavaScript() { let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] return matrix[1][1] // 5, central element }

function learnJavaScript() {
  let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]

  return matrix[1][1] // 5, central element
}

结果

Loading...

全部的

數組是一種特殊類型的對象，旨在與一組有序元素一起使用。

公告:

// square brackets (usually)
let arr = [item1, item2 ...]

// new Array (very rare)
let arr = new Array (item1, item2 ...)

通話 new Array (number) 創建具有給定長度但沒有元素的數組。

length屬性反映了數組的長度。

我們可以使用以下操作將數組用作雙端隊列：

• push (... items)➕ 將項目添加到數組的末尾。
• pop () ➖ 刪除數組末尾的元素並返回它。
• shift () ➖ 刪除數組開頭的元素並返回它。
• unshift (... items) ➕ adds項目到數組的開頭。

要遍歷數組的元素：

• for (let i = 0 i < arr.length i ++) - 工作最快，與舊版瀏覽器兼容。
• for (let item of arr) - 現代語法 僅適用於項目值（無法訪問索引）。
• for (let i in arr) - 永遠不要用於數組！

問題？

寫給 Discord 聊天。

問題:

數組是...

1.具有“數據的有序收集”的對象子類型 2.內部功能 3.具有“無序數據收集”的對象的子類型

創建一個空數組：

1. let arr1 = []
2. let arr2 = {}
3. let arr3 = ()

數組的長度可以由以下屬性確定：

1. pop ()
2. push ()
3. length

該數組可以存儲元素：

1.任何類型 2.數值 3.字符串

在數組的末尾添加一個元素：

1. push ()
2. pop ()
3. shift ()

刪除數組開頭的元素：

1. pop ()
2. shift ()
3. unshift ()

為了了解您學到了多少本課程，請對 mobile application 我們學校就這個話題。

鏈接

1. Article "Arrays"
2. MDN web doc. Article "Arrays"
3. JavaScript Arrays
4. Code for Teens: The Perfect Beginner's Guide to Programming, Volume 1: Javascript - Jeremy Moritz

貢獻者 ✨

感謝這些好人 (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨