JavaScript淺嚐紀錄No.4-Array資料結構處理及應用

發表於 更新於 分類於 ，

資料結構 (data structure)

資料結構是電腦中儲存、組織資料的方式，

陣列資料結構（array data structure

簡稱陣列（Array），是由相同類型的元素（element）的集合所組成的資料結構，分配一塊連續的記憶體來儲存。利用元素的索引（index）可以計算出該元素對應的儲存位址。

物件資料結構

雜湊表(Hash table，也叫哈希表)，是根據鍵(Key)直接查詢在記憶體儲存位置的資料結構。也就是說，它通過計算一個關於鍵值的函數，將所需查詢的數據映射到表中一個位置來查詢記錄，這加快了查找速度。這個映射函數稱做雜湊函數，存放記錄的數組稱做雜湊表，也就是物件所使用的key-value pair。
有關物件的相關應用可以參考Celeste儲藏室-JavaScript淺嚐紀錄No.5-呈現真實世界的物件該如何運用？

陣列（Array）

宣告及運用

宣告

使用字面表達語法(利用[])來宣告陣列，可以在宣告時賦值或是透過索引值來賦值。

1
2
3
4
5
let array = [0,1,2,3,4] //宣告時賦值
let array =[] //空陣列
array[0] = 'red'
array[1] = 'Green'
array[2] = 'Blue'

運用

@tooto1985 所整理的圖解 JavaScript 陣列操作方法

  • length 屬性
    陣列具有length屬性，提供來存取陣列的長度(索引值是從0開始算，而length屬性計算有幾個值在陣列中，所以是從1開始算)，同時也可以透過array.length(永遠比索引大1個數字)作為索引插入新值到原陣列中(會改變原本的陣列內容)。

    1
    2
    3
    let array = [0,1,2,3,4] //索引值到4
    console.log(array.length) //5
    array[array.length] = 5 //索引值5的位置，值是5

  • 從陣列尾巴加入或刪除值

    • push() 加入值的方法(會改變原本的陣列內容)
      跟[array]array.length = 5作用相同，就是將一個新的值加入到原陣列中。

      1
      2
      3
      let array = [0,1,2,3,4]
      array.push(5)
      console.log(array) //[0,1,2,3,4,5]

    • pop() 刪除值的方法(會改變原本的陣列內容)
      移除陣列的最後一個元素。

      1
      2
      3
      let array = [0,1,2,3,4]
      array.pop() //移除4
      console.log(array) //[0,1,2,3]

  • 從陣列開頭加入或刪除值

    • unshift() 加入值的方法(會改變原本的陣列內容)
      在陣列的開頭加入值，跟array[0] = 1不同，unshift()是加入一個以上的新值，並且將原本所有的值往後推，但array[0]= 1是將第一個值改為1，原本首位的值會消失。

      1
      2
      3
      let array = [0,1,2,3,4]
      array.unshift(5) //在第一個位置加入5，原陣列值往後移動1個位置
      console.log(array) //[5,0,1,2,3,4]
      1
      2
      3
      let array = [0,1,2,3,4]
      array[0]= 5 //第一個位置的值變成5
      console.log(array) //[5,1,2,3,4]

    • shift() 刪除值的方法(會改變原本的陣列內容)
      移除陣列的第一個元素，可以宣告一個變數儲存移除的值。

      1
      2
      3
      let array = [0,1,2,3,4]
      array.shift() //移除陣列的第一個元素，剩餘元素素往前移動
      console.log(array) //[1,2,3,4]
      1
      2
      3
      4
      let array = [0,1,2,3,4]
      let first = array.shift() //利用變數first得到被移除的陣列的第一個元素
      console.log(first) //0
      console.log(array) //[1,2,3,4]

  • 合併或切割陣列

    • concat()合併陣列的方法(要創建新的陣列)

      1
      2
      3
      4
      let a = [1,2,3,4]
      let b = a.concat(['a','b','c','d'])
      console.log(a) //[1,2,3,4]
      console.log(b) //[1,2,3,4,'a','b','c','d']

    • splice()新增或切割陣列的方法(會改變原本的陣列內容)
      加入或移除陣列的元素，在適當的位置修改。
      寫法splice(index, count_to_remove, addelement1, addelement2, ...)，index要開始修正的第一個索引值、count_to_remove要修正的的數量(含前面的索引值)、addelement1, addelement2要加入的陣列的元素。

      1
      2
      3
      4
      5
      6
      7
      8
      //移除陣列中的值
      let a = [1,2,3,4]
      a.splice(1,2)
      console.log(a) //[1,4]
      //移除指定值後新增陣列的值
      let b = ['a','b','c','d']
      b.splice(1,2,'e','f')
      console.log(b) // ['a','e','f','d']

    • slice()切割並返回陣列的片斷
      寫法slice (begin_index[, end_index])返回陣列的片斷，該片段含begin_index，不含end_index，如果沒有指定end_index的話，就會從begin_index一直擷取到最後一個陣列值。

      1
      2
      3
      const arr = [0, 1, 2, 3, 4]
      const newArr = arr.slice(1, 3)
      console.log(newArr) //[1,2]

    • join()合併陣列變成字串
      寫法arr.join([separator])，[separator]沒有設定的話，預設值為,。

      1
      2
      3
      4
      const arr = [0, 1, 2, 3, 4]
      const newArr = arr.join('-')
      console.log(typeof newArr) //string
      console.log(newArr) // '0-1-2-3-4'

  • 搜尋陣列索引值及排序

    • reverse()翻轉陣列

      1
      2
      3
      let array = [0,1,2,3,4]
      array.reverse()
      console.log(array) //[4,3,2,1,0]

    • indexOf()找到指定元素(第一個)在陣列中的索引值
      寫法arr.indexOf(searchElement[, fromIndex])，searchElement要找尋的值，fromIndex從第幾個索引值之後開始尋找，預設值為0；找不到該元素的話，索引值會是-1。

      1
      2
      3
      4
      5
      6
      const arr = ['Mark', 'Paul', 'Mary', 'Michelle', 'Smith']
      const arrindex = arr.indexOf('Mary')
      console.log(arrindex) //2

      const arrindex = arr.indexOf('Mary,3') //從索引值3開始尋找'Mary'
      console.log(arrindex) //不存在於陣列中則回傳 -1

    • lastIndexOf()找到指定元素(最後一個)在陣列中的索引值
      寫法跟上面的indexOf()很像，arr.lastIndexOf(searchElement[, fromIndex])，searchElement要找尋的值，fromIndex從第幾個索引值往前開始尋找，預設值為0；找不到該元素的話，索引值會是-1。

      1
      2
      3
      4
      5
      6
      const arr = ['Mark', 'Paul', 'Mary', 'Michelle', 'Smith']
      const arrindex = arr.lastIndexOf('Mary')
      console.log(arrindex) //2

      const arrindex = arr.lastIndexOf('Mary',3) //從索引值3開始往前(3→2→1→0)尋找'Mary'
      console.log(arrindex) //2

利用length、push()、pop()、unshift()、shift()、splice()、reverse()是對原陣列中做新增或刪除值的動作，所以原陣列中的值是會變動的。

參考資料：
TechBridge 技術共筆部落格用-JavaScript 學習資料結構和演算法：陣列（Array）篇
@tooto1985 所整理的圖解 JavaScript 陣列操作方法
MDN-陣列的運用
OxxoStudio-JavaScript Array 陣列操作方法大全 ( 含 ES6 )
MDN-Array