【JavaScript基礎】你真正瞭解如今的Js陣列嗎，看這篇就（Go）夠了

歸子莫發表於2022-01-12
JavaScriptJS陣列Go

【JavaScript基礎】你真正瞭解如今的Js陣列嗎，看這篇就（Go）夠了

? 部落格說明

??? 文章所涉及的部分資料來自網際網路整理，當然還有自己個人的總結和看法，分享的目的在於共建社群和鞏固自己。

??? 引用的資料如有侵權，請聯絡本人刪除！

??? 幸好我在，感謝你來！

? 說明

陣列用過很多了，應該是太平常了。在迴圈♻️的時候，我這麼說是不是不太專業呀（有點不太聰明的樣子）！

那好，這樣說？

在遍歷陣列時候，甚至想對陣列有所操作的（是不是已有內建的方法了？），都可以考慮一下，先別自己寫一大坨（我以前就是！！！），特別是在加入了es6語法之後。

熟悉陣列的操作是一項基本工，在刷LeetCode的時候，因為對陣列不熟悉而不能落實自己的思路，那簡直就是，太可惜了！所以學陣列，從現在起！！！

不過話說回來，你看了本文也不一定記得全部，一定要多用，多練，多總結！然後多出點BUG（這個法子特別靈，一下就會！）

? 什麼是陣列？

那當然是一堆數字的組合？這樣說有點不準！

陣列：小子！注意！是相當不準！

我：是一堆元素的組合！

陣列：。。。

來看百度百科的解釋

陣列（Array）是有序的元素序列。 若將有限個型別相同的變數的集合命名，那麼這個名稱為陣列名。

組成陣列的各個變數稱為陣列的分量，也稱為陣列的元素，有時也稱為下標變數。

用於區分陣列的各個元素的數字編號稱為下標。陣列是在程式設計中，為了處理方便， 把具有相同型別的若干元素按有序的形式組織起來的一種形式。 這些有序排列的同類資料元素的集合稱為陣列。

陣列是用於儲存多個相同型別資料的集合。

? 陣列的屬性

  • constructor 返回建立陣列物件的原型函式。

    [].length = 2
// 2

  • length 設定或返回陣列元素的個數。

    [1,3].length
// 2

  • prototype 允許你向陣列物件新增屬性或方法。

    // 新增屬性
Array.prototype.myToUser = 'hahah'
// 'hahah'
[].myToUser
// 'hahah'

// 新增方法
Array.prototype.toOne = function() {
  for (i = 0; i < this.length; i++) {
    this[i]='one';
  }
}
var arr = ["red","hi","good","hello"];
arr.toOne()
// arr ['one', 'one', 'one', 'one']

我知道xdm估計只有length用的最多，別問我怎麼知道?！

不過現在既然看了文章，也同時瞭解一下其他的兩個屬性吧！

? 陣列的方法

高階函式相關

這些高階陣列操作，你看看有幾個眼熟？

filter()

方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

注意

filter() 不會對空陣列進行檢測。

filter() 不會改變原始陣列。

語法

array.filter(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]

arr.filter(item => item > 2)
// 注意是返回值！
(2) [3, 4]

forEach()

方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式。

注意

forEach() 對於空陣列是不會執行回撥函式的。

語法

array.forEach(function(currentValue, index, arr), thisValue)

示例

const arr = [1,2,3,4]
let sum = 0
arr.forEach(item => sum += item)
// arr 10

every()

方法用於檢測陣列所有元素是否都符合指定條件。

注意

every() 方法使用指定函式檢測陣列中的所有元素：

  • 如果陣列中檢測到有一個元素不滿足，則整個表示式返回 false ，且剩餘的元素不會再進行檢測。
  • 如果所有元素都滿足條件，則返回 true。

every() 不會對空陣列進行檢測。

every() 不會改變原始陣列。

語法

array.every(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]
arr.every(item => item > 1)
// false
arr.every(item => item > 0)
// true

find()

方法返回通過測試（函式內判斷）的陣列的第一個元素的值。

注意

find() 方法為陣列中的每個元素都呼叫一次函式執行：

  • 當陣列中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再呼叫執行函式。
  • 如果沒有符合條件的元素返回 undefined

find() 對於空陣列，函式是不會執行的。

find() 並沒有改變陣列的原始值。

語法

array.find(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.find(item => item > 1)
// 2

findIndex()

方法返回傳入一個測試條件（函式）符合條件的陣列第一個元素位置。

注意

findIndex() 方法為陣列中的每個元素都呼叫一次函式執行：

  • 當陣列中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之後的值不會再呼叫執行函式。
  • 如果沒有符合條件的元素返回 -1

注意: findIndex() 對於空陣列，函式是不會執行的。

注意: findIndex() 並沒有改變陣列的原始值。

語法

array.findIndex(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.findIndex(item => item > 1)
// 1
arr.findIndex(item => item === 7)
// -1

some()

方法返回通過測試（函式內判斷）的陣列的第一個元素的值。

注意

方法用於檢測陣列中的元素是否滿足指定條件（函式提供）。

some() 方法會依次執行陣列的每個元素：

  • 如果有一個元素滿足條件，則表示式返回true , 剩餘的元素不會再執行檢測。
  • 如果沒有滿足條件的元素，則返回false。

注意： some() 不會對空陣列進行檢測。

注意： some() 不會改變原始陣列。

語法

array.some(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.some(item => item > 1)
// true
arr.some(item => item > 5)
// false

map()

方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。

注意

map() 方法按照原始陣列元素順序依次處理元素。

map() 不會對空陣列進行檢測。

map() 不會改變原始陣列。

語法

array.map(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]
const arr2 = arr.map(item => item + 1)
// arr2
// (4) [2, 3, 4, 5]

sort()

方法用於對陣列的元素進行排序。

排序順序可以是字母或數字，並按升序或降序。

預設排序順序為按字母升序。

注意

當數字是按字母順序排列時"40"將排在"5"前面。

使用數字排序，你必須通過一個函式作為引數來呼叫。

這種方法會改變原始陣列！

語法

array.sort(sortfunction)

示例

var arr = [1,3,5,3,2];
arr.sort(function(a,b){return a-b});
// arr [1, 2, 3, 3, 5]

運算元組相關

pop()

方法用於刪除陣列的最後一個元素並返回刪除的元素。

注意

此方法改變陣列的長度！

語法

array.pop()

示例

const arr = [1,2,3,4]
arr.pop()
// 4
// arr [1, 2, 3]

push()

方法可向陣列的末尾新增一個或多個元素，並返回新的長度。

注意

新元素將新增在陣列的末尾。

此方法改變陣列的長度！

語法

array.push(item1, item2, ..., itemX)

示例

const arr = [1,2,3,4]
arr.push(5)
// 5
// arr [1, 2, 3, 4, 5]

shift()

方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。

注意

此方法改變陣列的長度！

語法

array.shift()

示例

const arr = [1,2,3,4]
arr.shift()
// 1
// arr 2, 3, 4]

unshift()

方法可向陣列的開頭新增一個或更多元素，並返回新的長度。

注意

該方法將改變陣列的數目。

語法

array.unshift(item1,item2, ..., itemX)

示例

const arr = [1,2,3,4]
arr.unshift(3)
// 5
// arr [3, 1, 2, 3, 4]

查詢陣列相關

indexOf()

方法可返回陣列中某個指定的元素位置。

該方法將從頭到尾地檢索陣列，看它是否含有對應的元素。開始檢索的位置在陣列 start 處或陣列的開頭（沒有指定 start 引數時）。

如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。

如果在陣列中沒找到指定元素則返回 -1。

語法

array.indexOf(item,start)

示例

const arr = [1,2,3,4]
arr.indexOf(3)
// 2

lastIndexOf()

方法可返回一個指定的元素在陣列中最後出現的位置，從該字串的後面向前查詢。

如果要檢索的元素沒有出現，則該方法返回 -1。

該方法將從尾到頭地檢索陣列中指定元素 item。開始檢索的位置在陣列的 start 處或陣列的結尾（沒有指定 start 引數時）。

如果找到一個 item，則返回 item 從尾向前檢索第一個次出現在陣列的位置。陣列的索引開始位置是從 0 開始的。

如果在陣列中沒找到指定元素則返回 -1。

語法

array.lastIndexOf(item,start)

示例

const arr = [1,2,3,4]
arr.lastIndexOf(1)
// 0

includes()

方法用來判斷一個陣列是否包含一個指定的值，如果是返回 true，否則false。

語法

arr.includes(searchElement, fromIndex)

示例

const arr = [1,2,3,4]
arr.includes(1)
// true
arr.includes(1,2)
// false

字串相關

join()

方法用於把陣列中的所有元素轉換一個字串。

元素是通過指定的分隔符進行分隔的。

語法

array.join(separator)

示例

const arr = [1,2,3,4]
arr.join(",")
// '1,2,3,4'

toString()

方法可把陣列轉換為字串，並返回結果。

注意

陣列中的元素之間用逗號分隔。

語法

array.toString()

示例

const arr = [1,2,3,4]
arr.toString()
// '1,2,3,4'

計算陣列相關

reduce()

方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。

reduce() 可以作為一個高階函式，用於函式的 compose。

注意

reduce() 對於空陣列是不會執行回撥函式的。

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

示例

const arr = [1,2,3,4]
arr.reduce((a, b) => a + b)
// 10

reduceRight()

方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從陣列的末尾向前將陣列中的陣列項做累加。

注意

reduce() 對於空陣列是不會執行回撥函式的。

語法

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

示例

const arr = [1,2,3,4]
arr.reduceRight((a, b) => a + b)
// 10

返回可迭代物件

entries()

方法返回一個陣列的迭代物件，該物件包含陣列的鍵值對 (key/value)。

迭代物件中陣列的索引值作為 key， 陣列元素作為 value。

語法

array.entries()

示例

const arr = [1,2,3,4]
arr.entries()
// Array Iterator {}
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]

keys()

方法用於從陣列建立一個包含陣列鍵的可迭代物件。

如果物件是陣列返回 true，否則返回 false。

語法

array.keys()

示例

const arr = [1,2,3,4]
arr.keys()
// Array Iterator {}

基本操作

from()

方法用於通過擁有 length 屬性的物件或可迭代的物件來返回一個陣列。

如果物件是陣列返回 true，否則返回 false。

語法

Array.from(object, mapFunction, thisValue)

示例

const arr = [1,2,3,4]
Array.from(arr, item => item * 10);
// [10, 20, 30, 40]

reverse()

方法用於顛倒陣列中元素的順序。

語法

array.reverse()

示例

const arr = [1,2,3,4]
arr.reverse()
// [4, 3, 2, 1]

slice()

方法可從已有的陣列中返回選定的元素。

slice() 方法可提取字串的某個部分，並以新的字串返回被提取的部分。

注意

slice() 方法不會改變原始陣列。

語法

array.slice(start, end)

示例

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

copyWithin()

方法用於從陣列的指定位置拷貝元素到陣列的另一個指定位置中。

語法

array.copyWithin(target, start, end)

示例

const arr = [1,2,3,4]
arr.copyWithin(2, 0, 2)
// [1, 2, 1, 2]

valueOf()

方法返回 Array 物件的原始值。

注意

該原始值由 Array 物件派生的所有物件繼承。

valueOf() 方法通常由 JavaScript 在後臺自動呼叫，並不顯式地出現在程式碼中。

valueOf() 方法不會改變原陣列。

陣列中的元素之間用逗號分隔。

語法

array.valueOf()

示例

const arr = [1,2,3,4]
arr.valueOf()
// [1, 2, 3, 4]

splice()

方法用於新增或刪除陣列中的元素。

注意

這種方法會改變原始陣列。

語法

array.splice(index,howmany,item1,.....,itemX)

示例

const arr = [1,2,3,4]
arr.splice(2, 1)
// [3]
// arr [1, 2, 4]

const arr = [1,2,3,4]
arr.splice(2, 1, 4)
// [3]
// arr [1, 2, 4, 4]

concat()

方法用於連線兩個或多個陣列。

該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。

語法

arr.concat(arr1,arr2,...,arrN)

案例

const arr = []
const arr1 = [1, 2]
const arr2 = [3, 4]

arr.concat(arr1, arr2)
// 注意是返回值！
(4) [1, 2, 3, 4]

isArray()

方法用於判斷一個物件是否為陣列。

語法

Array.isArray(obj)

注意

不是這樣用的哈，它是Array物件提供的方法，把需要檢測的物件傳參進去

image-20220109174511411

示例

const arr = []
Array.isArray(arr)
// true

fill()

方法用於將一個固定值替換陣列的元素。

語法

array.fill(value, start, end)

示例

var arr = ["good", "yes", "no", "hello"];
arr.fill("one", 2, 4);

// 改變了原陣列
(4) ['good', 'yes', 'one', 'one']

? 總結

這一番總結下來，著實花了我不少時間，不光是讓你們學到的很多，我也是務實了不少基礎。

修修補補，查漏補缺，慢慢堆積成堡壘！你我都是高階，即使不是，將來也是！

? 感謝

❤️‍?❤️‍?❤️‍? 萬能的網路！

??? 以及勤勞的自己，個人部落格，GitHub測試，GitHub

??? 公眾號【歸子莫】，小程式【小歸部落格】

??? 如果你感覺對你有幫助的話，不妨給我點贊吧，持續關注也行哈！

相關文章