天天看點

Javascript數組應用及場景——建立數組的N種方式詳解

前言

Javascript數組 是一種 特殊的對象 資料類型,它由一組不同類型的值組成。比如字元串、數字、布爾值、對象、函數等等,相當于任何Javascript資料類型都可以。

Javascript數組應用及場景——建立數組的N種方式詳解

聲明|建立

1、字面量方式建立

使用方括号 [] 定義,各個元素采用逗号分隔。

// 數字元素
let arr1 = [1, 2, 3]; 

// 字元串元素
let arr2 = ['apple', 'banana', 'orange']; 

// 布爾元素
let arr3 = [true, false, true]; 

// 不同類型元素
let arr4 = [1, 'apple', true];            

2、構造函數方式建立

使用Array構造函數建立數組。可以接受任意個數參數。

注意:new Array(number)方式建立資料,也就是隻傳入一個數字時,實際為建立了一個指定長度為 n 的空數組。

Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解

如果您希望不管傳入1個還是多個資料時,希望最終這個數組為傳遞參數的新數組,那麼請您使用其它方式或者 Array.of(data...) 。

3、Array.of方式建立

Javascript數組應用及場景——建立數組的N種方式詳解

4、空數組方式建立

建立後通過push方法添加元素。

注:有時您可能需要push多個元素。

Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解

5、Array.from方式建立

可以将類數組對象或可疊代對象轉為數組,轉換後就可以使用數組相關的函數了。

// 将字元串轉換為數組
let arr = Array.from('hello'); 
// ['h', 'e', 'l', 'l', 'o']

// 建立Set對象
let set = new Set([1, 2, 3]); 
// 将Set對象轉換為數組
let arr2 = Array.from(set); 
console.log(arr2);// [1, 2, 3]           
Javascript數組應用及場景——建立數組的N種方式詳解

6、其它資料類型的函數建立

字元串分割

Javascript數組應用及場景——建立數組的N種方式詳解

正規表達式方式

Javascript數組應用及場景——建立數組的N種方式詳解

擷取所有的屬性

Javascript數組應用及場景——建立數組的N種方式詳解

7、使用擴充運算符 ... 建立

可以将一個可疊代對象擴充為數組。

Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解

8、已知數組建立數組及處理

使用Array.fill、Array.filter、Array.reduce、Array.map、Array.concat等可以在已知數組基礎上,根據不同情況建立或處理數組,以此擷取想要結果。

fill 填充數組

Javascript數組應用及場景——建立數組的N種方式詳解

filter 過濾數組 并傳回一個新數組

Javascript數組應用及場景——建立數組的N種方式詳解

map 根據編碼邏輯 傳回一個新數組

Javascript數組應用及場景——建立數組的N種方式詳解

sort 原數組排序

Javascript數組應用及場景——建立數組的N種方式詳解

slice 在已知數組中截取一個新數組

slice() 方法接受兩個參數,分别表示截取子數組的起始位置和結束位置。

Javascript數組應用及場景——建立數組的N種方式詳解

splice 删除已知數組中的資料,并傳回被删除的資料

splice() 方法接受三個參數,分别為開始修改的位置、要删除的元素個數(如果不删除任何元素,則此參數為0),以及要插入到數組中的新元素。splice() 方法将修改原始數組,而不是建立一個新的數組。

Javascript數組應用及場景——建立數組的N種方式詳解
Javascript數組應用及場景——建立數組的N種方式詳解

reverse 反轉數組

Javascript數組應用及場景——建立數組的N種方式詳解

concat 合并多個數組

Javascript數組應用及場景——建立數組的N種方式詳解

那麼還有其它方式嗎?

人人為我,我為人人,謝謝您的浏覽,我們一起加油吧。

繼續閱讀