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

iKcamp 發布于2019-08-26 10:46 / 1469人閱讀

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

定場詩

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

此處應該有掌聲...

前言

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

數組

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

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

一、數組基礎 創建和初始化數組

new Array()

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

字面量語法：[]

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)

二、數組元素操作 添加元素

數組尾部添加元素

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

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

使用push方法

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

數組開頭插入元素

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

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

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方法的行為是一樣的。

常見面試問題：

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

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

追問：性能會好嗎？

答：肯定是不好的！如包含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	連接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

使用for循環倒序拼接

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

借助數組函數reverse、join與字符串函數split

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

后記

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

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

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

云服務器 GPU云服務器 javascript高級程序設計第三版匯編語言第三版人工智能第三版 python基礎教程第三版

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106743.html

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

摘要：定場詩守法朝朝憂悶，強梁夜夜歡歌損人利己騎馬騾，正值公平挨餓修橋補路瞎眼，殺人放火兒多我到西天問我佛，佛說我也沒轍前言讀學習數據結構與算法第章數組，本小節將繼續為各位小伙伴分享數組的相關知識數組的新功能。定場詩守法朝朝憂悶，強梁夜夜歡歌；損人利己騎馬騾，正值公平挨餓；修橋補路瞎眼，殺人放火兒多；我到西天問我佛，佛說：我也沒轍！前言讀《學習JavaScript數據結構與算法...

William_Sang 2019-08-26 14:01 評論0 收藏0
重讀《學習JavaScript數據結構與算法-第三版》-第2章 ECMAScript與TypeScr

摘要：第二種接口的概念和面向對象編程相關接口視為一份合約，在合約里可以定義這份合約的類或接口的行為接口告訴類，它需要實現一個叫做的方法，并且該方法接收一個參數。定場詩八月中秋白露，路上行人凄涼；小橋流水桂花香，日夜千思萬想。心中不得寧靜，清早覽罷文章，十年寒苦在書房，方顯才高志廣。前言洛伊安妮·格羅納女士所著的《學習JavaScript數據結構與算法》第三版于2019年的5月份...

TZLLOG 2019-08-26 10:44 評論0 收藏0
重讀《學習JavaScript數據結構與算法-第三版》- 第6章鏈表（一）

摘要：前言本章為重讀學習數據結構與算法的系列文章，該章節主要講述數據結構鏈表，以及實現鏈表的過程和原理。鏈表，是存儲有序的元素集合。鏈表中的元素在內存中并不是連續放置的，每個元素由一個存儲自身的元素節點和一個指向下一個元素的引用指針或鏈接組成。定場詩傷情最是晚涼天，憔悴廝人不堪言；邀酒摧腸三杯醉.尋香驚夢五更寒。釵頭鳳斜卿有淚，荼蘼花了我無緣；小樓寂寞新雨月.也難如鉤也難圓。前言...

lmxdawn 2019-08-26 11:00 評論0 收藏0
重讀《學習JavaScript數據結構與算法-第三版》- 第5章隊列

摘要：定場詩馬瘦毛長蹄子肥，兒子偷爹不算賊，瞎大爺娶個瞎大奶奶，老兩口過了多半輩，誰也沒看見誰前言本章為重讀學習數據結構與算法第三版的系列文章，主要講述隊列數據結構雙端隊列數據結構以及隊列相關應用。定場詩馬瘦毛長蹄子肥，兒子偷爹不算賊，瞎大爺娶個瞎大奶奶，老兩口過了多半輩，誰也沒看見誰！前言本章為重讀《學習JavaScript數據結構與算法-第三版》的系列文章，主要講述隊列數據結構、...

charles_paul 2019-08-26 14:05 評論0 收藏0
JavaScript書籍測評

摘要：前言今天和大家一起聊聊的推薦書籍，每一本都是精選，做前端開發的朋友們如果沒讀過，可以嘗試一下。如果怕麻煩，也可以關注曉舟報告，發送獲取書籍，四個字，就可以得到電子書的提取碼。前言今天和大家一起聊聊JavaScript的推薦書籍，每一本都是精選，做前端開發的朋友們如果沒讀過，可以嘗試一下。下面給大家簡單介紹了書的內容，還有讀書的方法，希望可以幫大家提升讀書效率。一、《JavaScr...

X1nFLY 2019-08-21 17:44 評論0 收藏0