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

定場詩

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

此處應該有掌聲...

前言

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

數組

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

注：雖然數組支持存儲不一樣類型的值，但建議遵照最佳實踐。

1、數組基礎

建立和初始化數組

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)
複製代碼

2、數組元素操做

添加元素

數組尾部添加元素

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]) // 安琪拉
複製代碼

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

3、數組常見方法

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

核心方法一覽表

方法	描述
concat	鏈接2個或多個數組，返回結果
every	對數組中的每一個元素運行給定函數，若是該函數對每一個元素都返回true，則返回true
filter	對數組中的每一個元素運行給定函數，返回該函數會返回true的元素組成的數組
forEach	對數組中的每一個元素運行給定函數，這個方法沒有返回值
join	將全部的數組元素鏈接成一個字符串
indexOf	返回第一個與給定參數相等的數組元素的索引，沒有找到返回-1
lastIndexOf	返回數組中搜索到的與給定參數相等的元素的索引裏最大的值
map	對數組中的每一個元素運行給定函數，返回每次函數調用的結果組成的數組
reverse	顛倒數組中元素的順序，反轉
reduce	接收一個函數做爲累加器，返回一個最終計算的值
slice	傳入索引值，將數組裏對應索引範圍內的元素做爲新數組返回
some	對數組中的每一個元素運行給定函數，若是任意元素返回true，則返回true
sort	按照字母順序進行排序，支持傳入指定排序方法的函數做爲參數
toString	將數組做爲字符串返回
valueOf	和toString相似，將數組做爲字符串返回

數組合並

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
   複製代碼

後記

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

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

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