摘要：此處應該有掌聲前言讀學習數(shù)據(jù)結構與算法第章數(shù)組，本節(jié)將為各位小伙伴分享數(shù)組的相關知識概念創(chuàng)建方式常見方法以及數(shù)組的新功能。數(shù)組數(shù)組是最簡單的內存數(shù)據(jù)結構，用于存儲一系列同一種數(shù)據(jù)類型的值。

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

此處應該有掌聲...

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

數(shù)組是最簡單的內存數(shù)據(jù)結構，用于存儲一系列同一種數(shù)據(jù)類型的值。

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

new Array()

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

字面量語法：[]

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

推薦使用[]定義數(shù)組

數(shù)組的索引從0開始，依次累加；

數(shù)組索引的最大值為數(shù)組的長度-1;

每個數(shù)組的值都對應了一個數(shù)組的索引。

索引亦可稱之為下標或鍵

數(shù)組的.length屬性可獲取元素的長度

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

使用 數(shù)組名[索引]的形式獲取數(shù)組的值

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

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

數(shù)組的迭代我們可以選擇最簡單的循環(huán)結構

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

常見面試題：斐波那契數(shù)列

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

// 求斐波那契數(shù)列前20個數(shù)
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)

數(shù)組尾部添加元素

將值賦值在數(shù)組的最后一個空位上的元素即可

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

使用push方法

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

數(shù)組開頭插入元素

自定義實現(xiàn)數(shù)組開頭插入元素的方法

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

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) // [ "周瑜", "豬八戒", "嫦娥", "孫策", "黃忠" ]

使用unshift方法

heros.unshift("元歌")

此方法背后的邏輯和insertFirstPosition方法的行為是一樣的。
常見面試問題：
思考：如果有一個存儲了大量數(shù)據(jù)的數(shù)組，在執(zhí)行插入操作時，將值插入到指定的位置會發(fā)生什么情況？
答：從當前插入值的位置開始，后面所有數(shù)組元素都要向右移動一位。
追問：性能會好嗎？
答：肯定是不好的！ 如包含1000個元素的數(shù)組，在數(shù)組索引0位置插入一個元素，需要移動1000個元素，性能肯定不好
追問：如何優(yōu)化呢？
答：采用JS的鏈表結構 --- 啥是鏈表結構呢，請看持續(xù)關注公眾號文中呦...

數(shù)組尾部刪除元素

heros.pop()

數(shù)組開頭刪除元素

heros.shift()

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

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

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

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

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

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

核心方法一覽表

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

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

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

every

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

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

some

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

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

forEach

迭代數(shù)組每一個元素

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

map

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

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

filter

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

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

reduce

接收一個函數(shù)作為累加器，最后返回一個計算的值

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

常見面試題-反轉字符串

如字符串 abcdef 輸出為 fedcba

使用for循環(huán)倒序拼接

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

借助數(shù)組函數(shù)reverse、join與字符串函數(shù)split

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

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

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

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