重讀《學習JavaScript數據結構與演算法-第三版》- 第3章 數組（一）

定場詩

大將生來膽氣豪，腰橫秋水雁翎刀。
風吹鼉鼓山河動，電閃旌旗日月高。
天上麒麟原有種，穴中螻蟻豈能逃。
太平待詔歸來日，朕與先生解戰袍。

此處應該有掌聲...

前言

讀《學習JavaScript數據結構與演算法》- 第3章 數組，本節將為各位小伙伴分享數組的相關知識：概念、創建方式、常見方法以及ES6數組的新功能。

數組

數組是最簡單的記憶體數據結構，用於存儲一系列同一種數據類型的值。

註：雖然數組支持存儲不同類型的值，但建議遵守最佳實踐。

一、數組基礎

創建和初始化數組

1. new Array()

   // 空數組
   let heros = new Array()
   // 指定長度的數組 - 預設每個索引位置的值為undefined
   heros = new Array(7)
   // 直接將數組元素以參數的形式傳入數組構造器
   heros = new Array('鐘馗', '張良', '虞姬', '亞瑟', '荊軻')

2. 字面量語法：[]

   let heros = ['魯班', '呂布', '王昭君', '蔡文姬', '孫悟空']

   推薦使用[]定義數組

數組索引

• 數組的索引從0開始，依次累加；
• 數組索引的最大值為數組的長度-1;
• 每個數組的值都對應了一個數組的索引。

索引亦可稱之為下標或鍵

數組長度

數組的.length屬性可獲取元素的長度

let heros = ['魯班', '呂布', '王昭君', '蔡文姬', '孫悟空']
console.log('數組students的長度為：' + heros.length)

數組取值

使用 數組名[索引]的形式獲取數組的值

let heros = ['凱', '蘭陵王', '瑤', '雲中君', '典韋']
console.log('第一位英雄：' + heros[0]) // 凱

迭代數組

此處我們使用高大上的名詞迭代，拒絕低調的遍歷，不要問我為什麼！

數組的迭代我們可以選擇最簡單的迴圈結構

for (let i = 0; i < heros.length; i++) {
  console.log(heros[i])
}

常見面試題：斐波那契數列

斐波那契數列概念：第一項為1，第二項為1，從第三項開始，值為前兩項之和;
如 1, 1, 2, 3, 5, 8, 13 ...

// 求斐波那契數列前20個數
let fibonacci = []
fibonacci[0] = 1
fibonacci[1] = 1

for (let i = 2; i < 20; i++) {
  fibonacci[i] = fibonacci[i - 1] + fibonacci[i - 2]
}

// 輸出
console.log(fibonacci)

二、數組元素操作

添加元素

數組尾部添加元素

1. 將值賦值在數組的最後一個空位上的元素即可

   let heros = ['豬八戒', '嫦娥', '孫策']
   heros[heros.length] = ['蘇烈']

2. 使用push方法

   heros.push('黃忠')
   console.log(heros) // [ '豬八戒', '嫦娥', '孫策', '黃忠' ]

數組開頭插入元素

1. 自定義實現數組開頭插入元素的方法

   實現邏輯思考：在數組的開頭插入一個元素，需要空出數組第一個元素的位置，將所有的元素都向右移動一位

   Array.prototype.insertFirstPosition = function (value) {
     for (let i = this.length; i >= 0; i--) {
       this[i] = this[i - 1]
     }
     this[0] = value
   }
   heros.insertFirstPosition('周瑜')
   console.log(heros) // [ '周瑜', '豬八戒', '嫦娥', '孫策', '黃忠' ]

2. 使用unshift方法

   heros.unshift('元歌')

   此方法背後的邏輯和insertFirstPosition方法的行為是一樣的。

   常見面試問題：

   思考：如果有一個存儲了大量數據的數組，在執行插入操作時，將值插入到指定的位置會發生什麼情況？

   答：從當前插入值的位置開始，後面所有數組元素都要向右移動一位。

   追問：性能會好嗎？

   答：肯定是不好的！ 如包含1000個元素的數組，在數組索引0位置插入一個元素，需要移動1000個元素，性能肯定不好

   追問：如何優化呢？

   答：採用JS的鏈表結構 --- 啥是鏈表結構呢，請看持續關註公眾號文中呦...

刪除元素

數組尾部刪除元素

heros.pop()

數組開頭刪除元素

heros.shift()

在任意位置添加或刪除元素 -- splice

// array.splice(index[, number][, newValue1][, newValue2...])
// 從指定索引位置開始，執行刪除相應數量的元素，並添加執行的元素
let heros = ['周瑜', '豬八戒', '嫦娥', '孫策', '黃忠']
heros.splice(2, 1, '孫悟空')
console.log(heros) //  [ '周瑜', '豬八戒', '孫悟空', '孫策', '黃忠' ]

二維數組與多維數組

// 二維數組
let heros = [
  ['甄姬', '女媧', '安琪拉', '貂蟬'],
  ['典韋', '亞瑟', '曹操', '夏侯惇']
]

// 二維數組取值
console.log(heros[0][1]) // 女媧

// 多維數組
heros = [
  [
    ['甄姬', '安琪拉']
  ],
  [
    ['操作', '夏侯惇']
  ]
]
// 多維數組取值
console.log(heros[0][0][1]) // 安琪拉

無論是幾維的數組，只要按照索引去取值就好

三、數組常見方法

在JS中，數組是改進過的對象。這意味著創建的每一個數組都有一些可用的方法。

核心方法一覽表

數組合併

concat方法可以向一個數組傳遞數組、對象或元素，數組會按照該方法傳入的參數順序連接指定的數組

let hz = '黃忠'
let partOfHeros = ['孫悟空', '孫斌', '李白']
let heros = ['鐘馗']
let herosList = heros.concat(hz, partOfHeros)
console.log(heroList) // [ '鐘馗', '黃忠', '孫悟空', '孫斌', '李白' ]

迭代器函數

一定要說迭代，不要說遍歷，不要問我為什麼！

every

every會迭代數組中的每個元素，直到返回false

// 判斷數組中是否全部是偶數
let arr = [1, 2, 3, 4]
let res = arr.every(v => v % 2 === 0)
conso.e.log(res) // false

some

some會迭代數組中的每個元素，直到返回true

// 判斷數組中是否有偶數
let arr = [1, 2, 3]
let res = arr.some(v => v % 2 === 0)
console.log(res) // true

forEach

迭代數組每一個元素

let arr = ['張良', '姜子牙', '露娜', '凱']

map

map會迭代數組的每個元素，對每個元素運行給定的方法，返回每次的結果

// 計算數組元素的乘方結果
let arr = [1, 2, 3]
let newArr = arr.map(v => v ** 2)
console.log(newArr) // [ 1, 4, 9 ]

filter

filter會迭代數組的每個元素，對每個元素運行給定的方法，返回的新數組由返回true的元素組成

// 返回數組中所有的女性英雄
let heros = [
  {
    name: '甄姬',
    sex: '女'
  },
  {
    name: '亞瑟',
    sex: '男'
  },
  {
    name: '貂蟬',
    sex: '女'
  }
]
let nvHeros = heros.filter(hero => hero.sex === '女')
console.log(nvHeros) // [ { name: '甄姬', sex: '女' }, { name: '貂蟬', sex: '女' } ]

reduce

接收一個函數作為累加器，最後返回一個計算的值

// 計算數組元素的和
let arr = [1, 2, 3, 4, 5, 6]
let sum = arr.reduce((previous, current) => previous + current)
console.log(sum) // 21

常見面試題-反轉字元串

如字元串 abcdef 輸出為 fedcba

1. 使用for迴圈倒序拼接

   let str = 'abcdef'
   let newStr = ''
   for (let i = str.length - 1; i >= 0; i--) {
     newStr += str[i]
   }
   console.log(newStr) // fedcba

2. 藉助數組函數reverse、join與字元串函數split

   let str = 'abcdef'
   let newStr = str.split('').reverse().join('')
   console.log(newStr) // fedcba

   後記

   以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關註，更帥更漂亮呦！關註胡哥有話說公眾號，可與胡哥繼續深入交流呦！