【總結系列】對JS數組來一次總結

前言

數組是最常用的數據類型之一,那麼按道理講已經非常熟悉了吧,爲什麼還要來一次總結呢??其實目的還是爲了一些不常用的屬性和方法,或者通過這些方法實現一些異想天開的小需求吧。所以,本文將總結一切關於數組的東西,但是不是一個基礎教程,對於簡單的概念以及用法就忽略啦。

通過本文可以學習到:

  • 數組的屬性
  • 數組的靜態方法
  • 數組的實例方法
  • ES6+ 新方法
  • 通過數組的內置方法實現一些小功能

數組的屬性

MDN 文檔上,記錄着數組的屬性只有兩個:length 和指向原型的 prototype 。所以就一筆帶過啦,前者是描述數組長度的屬性,後者是指向原型對象的傢伙。

不過這裏想提點一下 length 的一個另類用法:去除數組的最後一個元素。

移除元素有很多方法,通過 length 也可以移除元素,如果將數組的長度縮小(比原長度小),那麼將會有部分元素被移除。

【示例】:

//原數組,長度爲5
let arr = [1,2,3,4,5]
arr.length -= 1
console.log(arr) //[1,2,3,4]

數組的靜態方法

如果沒有過 Java 經驗,靜態方法這個表達似乎有點不太友好,其實就是定義在 Array 上的方法啦,注意是直接定義在 Array 上的,而不是原型對象上。

Array.from()

這是 ES6 新增的方法,該方法用於將兩類對象轉換爲數組:

  • 可迭代對象(可遍歷對象)
  • 類數組對象(僞數組對象)

轉個字符串試試看:

//將字符串轉數組
let result = Array.from("jonas")
result //["j", "o", "n", "a", "s"]

當然,類數組,Set,甚至是 Map 都是可以通過該方法轉換的,通過 Set 元素的唯一性和這個方法就可以實現數組去重了:

Array.from(new Set(arr))

Array.isArray()

該方法是 ES5 的方法了,所以基本可以放心使用。用於判斷一個對象是否爲數組,返回布爾值。

用於很簡單,這裏不貼代碼咯。需要注意的是,Array.prototype 也是一個數組,該方法會返回 true

Array.of()

該方法用於創建數組,將不定長的參數作爲數組的元素,結果返回這個新建的數組。

【示例】:

let arr = Array.of(1,2,3,4,5)
arr //[1,2,3,4,5]

數組的實例方法

實例方法就是定義在 Array.prototype 上的方法,數組實例都可以調用。

遍歷器相關的方法

與遍歷器相關的方法有三個:

  • entries() —— 該方法返回一個遍歷器對象,該對象包含數組中每個元素的索引和值。
  • keys() —— 返回一個包含數組每個元素索引的遍歷器對象
  • values() —— 返回一個包含數組每個元素值的遍歷器對象

【示例】:

let arr = [1,2,3,4,5]
let result = arr.entries()
result.next() //{value: [0,1], done: false}

let result2 = arr.keys()
result2.next() //{value: 0, done: false}

let result3 = arr.values()
result3.next() //{value: 1, done: false}

遍歷元素的方法

forEach()

這是最純粹遍歷數組元素的方法,該方法接受兩個參數,第一個參數是回調函數,每個元素都會執行一次,函數接受三個參數,分別是當前元素的值,索引,以及原數組;第二個參數能給回到函數指定 this

該方法沒有返回值。

filter()

該方法用於過濾數組元素,接受兩個參數,第一個參數是一個回調函數,用於設置過濾條件;第二個參數可以設置函數中的 this

需要注意的是,該方法不會改變原數組,而是返回一個新的數組,新的數組只會留下能通過回調函數檢測的元素。

【示例】:

let arr =  [1,2,3,4,5]
let result = arr.filter(item => item > 2)
console.log(result) //[3, 4, 5]

map()

該方法可以給數組的元素加工,同樣接受兩個參數,第一個是回調函數,第二個參數可以設置函數中的 this

【示例】:

let arr = [1,2,3,4,5]
let result = arr.map(item => item * 2)
console.log(result) //[2, 4, 6, 8, 10]

every()

該方法用於測試數組中的每個元素是否都能通過某個指定函數的測試,返回一個布爾值。如果參數爲空數組,則返回 true

【示例】:

let arr = [1,2,3,4,5]
let result = arr.every(item => item > 0)
console.log(result) //true

some()

every() 是相似的,上面的方法是全部通過才返回 true,而 some() 只要有一個元素通過一個函數的測試就返回 true。如果參數是一個空數組,則返回 false

let arr = [1,2,3,4,5]
let result = arr.some(item => item > 10)
console.log(result) //false

操作元素的方法

push()

該方法用於向數組末尾添加一個或多個元素,接收一個不定長參數,返回數組最新的長度。該方法會改變原數組。

pop()

刪除數組的最後一個元素,返回被刪除的值。該方法會改變原數組。

unshift()

向數組的開頭添加一個或多個元素,該方法接收一個不定長參數,返回新的長度。該方法會改變原數組。

shift()

刪除數組中的第一個元素,並返回這個值。該方法會改變原數組。

splice()

該方法可以添加,插入,修改,刪除元素。這是一個多功能方法,該方法會改變原數組。

slice()

截取數組,該方法接收兩個參數,分別表示開始索引和結束索引。截取的結果放到一個新數組中,該方法不會改變數組。

注意:該方法是倩考本的!

flat()

該方法用於數組的扁平化,參數表示層數。可以傳入 Infinity 表示將所有層次扁平,得到一個一維數組。

copyWithin()

該方法用於複製數組的一部分到同一個數組的另外一個位置,該方法不會改變原數組。該方法接收三個參數:

  • 第一個參數是目標位置的索引
  • 第二個參數是截取片段的開始索引
  • 第三個參數截取片段的結束索引(不包括這個位置)

注意:結果會覆蓋原位置上的元素,而不是插入操作

【示例】:

let arr = [1,2,3,4,5]
let result = arr.copyWithin(2,0,2)
console.log(result) //[1, 2, 1, 2, 5]

查找元素的方法

find()

返回數組中滿足提供的函數的第一個元素的值,否則返回 undefined

let arr = [1,2,3,4,5]
let result = arr.find(item => item > 0)
console.log(result) //1

findIndex()

方法返回數組中滿足提供函數的第一個元素的索引。

indexOf()

方法返回在數組中可以找到一個給定元素的第一個索引,如果不存在,則返回 -1

與之相似的還有一個方法: lastIndexOf() 不同的是該方法會從個數組的末尾往前檢索。

includes()

該方法用於判斷一個數組是否包含一個指定的值,返回一個布爾值。

排序方法

sort()

該方法用原地算法對數組的元素進行排序,並返回數組。該方法不會改變原數組,返回排序後的數組。

該方法接收一個函數作爲參數,函數接受兩個參數,這兩個參數就是一次排序比較中從數組取出的兩個元素。如果返回值小於0,則不交換順序。

let arr = [1,4,2,5,3]
let result = arr.sort((a,b) => a-b) //升序,降序改爲b-a即可

reverse()

取數組的倒序,並返回排序後的數組。

轉換方法

join()

默認返回一個以逗號分隔每個元素的字符串,接收一個參數,該參數表示分隔符。

toString()

返回一個以逗號分隔每個元素的字符串。

注意:toString() 是調用 Array.prototype 上的,而不是 Object 原型上的。

concat()

以調用該方法的數組爲副本創建一個數組,參數爲不定長參數,如果參數爲數組,那麼直接將數組中的所有元素淺拷貝到調用該方法的數組中;如果參數爲非數組,那麼直接將這個參數作爲新數組的元素。

【示例】:

//原數組
let arr = [1,2,3]
let result = arr.concat(4,5,6,[7,8,9])
result //[1,2,3,4,5,6,7,8,9]

結語

文中故意省略了一個常用的方法 reduce() ,原因是該方法的用途和功能太多了,會另外以一篇文章來介紹。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章