1 直接聲明

JavaScript是弱類型語言，因此你可以直接將一個數組賦值給一個變量，即創(chuàng)建了一個數組：

let arr = [1, 2, 3];

絕大多數情況下使用的都會使用這種語法創(chuàng)建/聲明數組。其中數組使用中括號 [...] 包裹，元素之間用逗號 , 分隔。

有時為了代碼優(yōu)雅，遇到數組元素很長很多時，也可以采用換行方式編寫：

let fruit - [
    "apple",
    "banana",
    "orange",
    "..."
]

2 以對象方式創(chuàng)建數組

這是創(chuàng)建數組的另一種語法，即使用構造函數 Arrary()：

let arr = new Array();
let arr = Array();

備注：  調用 Array() 時可以使用或不使用 new。兩者都會創(chuàng)建一個新的 Array 實例。但出于編程規(guī)范，建議使用 new 關鍵字。

用這種方式創(chuàng)建數組是，里面的參數有兩種使用情況：

2.1. 僅一個Number類型參數

let arr = new Array(6);

當只傳入一個 Number類型 的參數時，傳入的參數則會被認定為是所創(chuàng)建數組的長度，而非元素。且這個數組僅有長度沒有任何元素，若訪問則是undefined。

補充知識：

含空槽的數組又被稱作為稀疏數組。稀疏數組在使用數組迭代方法時，空槽元素都將被跳過。如果訪問空槽元素，結果會是 undefine。

let arr = new Array(6);
console.log(arr); // [ <6 empty items> ]
console.log(arr[0]); // undefined
console.log(arr.length); // 6

2.2. 有一個非Number類型參數 或 有多個參數

續(xù)上回，如只有一個參數但不是 Number類型，則參數會被正常認定為是數組的一個元素。

let arr = new Array("hello");
console.log(arr); // [ 'hello' ]
console.log(arr[0]); // hello
console.log(arr.length); // 1

有多個參數，則效果就如同使用[...]聲明數組一樣，所有參數都被視作數組的元素。

let arr = new Array("hello", "world", "!");
console.log(arr); // [ 'hello', 'world', '!' ]
console.log(arr.length); // 3

此種方式一般不會使用，不但有可能會引起一些誤會，也沒有中括號[...]方式簡潔。

3 使用 Array.from() 方法創(chuàng)建

上面兩種創(chuàng)建數組的基礎方式都無法創(chuàng)建一個初始化的數組，這在一些情況下無法滿足我們的需求，例如創(chuàng)建哈希數組等等。這便是 Array.from() 能解決的第一個問題。

Array.from()  是一個全局下的靜態(tài)方法，其作用是從可迭代或類數組對象創(chuàng)建一個新的淺拷貝的數組實例。不僅如此，還可以附帶一個映射函數為數組內部的元素進行初始化操作。

首先我們先搞明白Array.from()要求傳入的第一個參數 —— 一個 類數組對象 或 可迭代對象。

3.1. 由類數組對象創(chuàng)建數組

該方法會根據類數組對象創(chuàng)建一個長度為length的數組，其中的元素key是合理下標值的元素。

什么是類數組對象？

顧名思義，就是形似數組的對象。對象的屬性都含有key與value，而這個關系也可以看作是數組的下標與值的關系——key為下標，value為值。此外還有一個特別的key是length，用于表示數組長度。

類數組對象還有個別名叫arguments對象。

所以一個形似數組的對象是：

let arguments = {
    0: 1,
    1: 2,
    2: 3,
    3: 4,
    length: 4
}

同時，這里舉幾個用不符合規(guī)則的類數組對象創(chuàng)建數組的樣例：

• 長度與元素數量不符

元素數量會嚴格按照length的值執(zhí)行。如果沒有length，則默認為0——即一個空數組。

let arguments = {
    0: 1,
    1: 2,
    2: 3,
    length: 4
}

let arr = Array.from(arguments);
console.log(arr); // [1, 2, 3, undefined]

let arguments = {
    0: 1,
    1: 2,
    2: 3,
    length: 0
}

let arr = Array.from(arguments);
console.log(arr); // []

• 鍵值不符合下標規(guī)范

如鍵值不符合下標規(guī)范，則這個鍵值對會被直接忽略。其它符合規(guī)則的鍵值對則被當作數組元素。

let arguments = {
    0: 1,
    1: 2,
    3: 3,
    length: 4
}

let arr = Array.from(arguments);
console.log(arr); // [1, 2, undefined]

3.2. 由可迭代對象創(chuàng)建數組

除了從類數組對象創(chuàng)建數組，Array.from()也可以從任何可迭代對象創(chuàng)建數組。

什么是可迭代對象？

可迭代對象是實現了[Symbol.iterator]方法的對象，這個方法返回一個迭代器。這個迭代器對象又具有next()方法，每次調用next()方法就會返回一個包含value和done屬性的對象，用于遍歷該可迭代對象。

常見的內置可迭代對象有:

• Array
• TypedArray（例如 Uint8Array）
• NodeList
• HTMLCollection
• arguments對象
• 用戶自定義的可迭代對象

比如從String創(chuàng)建數組:

let str = 'hello';
let arr = Array.from(str);
console.log(arr); // ["h", "e", "l", "l", "o"]

3.3. 映射函數

除此之外，Array.from()還可以接受第二個參數，作為一個映射函數，用于對每個元素進行處理后再放入新數組，達到初始化的效果：

let set = new Set([1, 2, 3]);
let arr = Array.from(set, x => x * x);
console.log(arr); // [1, 4, 9]

這個映射函數類似于數組的 map() 方法：

關于 map() 方法

map()的作用是創(chuàng)建一個新數組，其中每個元素都由原數組中的每個元素都調用一次提供的函數后的返回值組成。

map()包含兩個參數：

callbackFn：為數組中的每個元素執(zhí)行的函數。它的返回值作為一個元素被添加為新數組中。

thisArg（可選）：執(zhí)行 callbackFn 時用作 this 的值。

其中的callbackFn被調用時將傳入 3 個參數:

currentValue： 正在處理的當前元素。

index（可選）： 正在處理的當前元素的索引。

array（可選）： 調用了 map() 的數組本身。

但是Array.from()中的映射函數被調用時只傳入 2 個參數（element、index），不接受 map() 中callbackFn的第三個參數array。因為Array.from()的執(zhí)行過程中數組仍然在構建。

除此之外，Array.from() 方法還接受第三個可選參數,這個參數被稱為"this 值"，與map()的thisArg參數一致。

let person = {
  name: 'John',
  sayHello: function() {
    return `Hello, my name is ${this.name}`;
  }
};

let nameArr = Array.from([1, 2, 3], function() {
  return this.sayHello();
}, person);

console.log(nameArr); // ["Hello, my name is John", "Hello, my name is John", "Hello, my name is John"]

所以可以說Array.from(obj, mapFn, thisArg) 和 Array.from(obj).map(mapFn, thisArg) 會具有相同的結果。只是Array.from()不會創(chuàng)建中間數組，而是直接構建一個新數組。

Array.from() 映射函數使用案例

• 初始化哈希函數

let hash = Array.from({length: 26}, (item) => item = 0);

• 將字符串轉換為大寫

let str = 'hello';
let arr = Array.from(str, (char) => char.toUpperCase());
console.log(arr); // ["H", "E", "L", "L", "O"]

• 平方數組元素

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = Array.from(numbers, (x) => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

• 獲取元素及其索引

let colors = ['red', 'green', 'blue'];
let colorDetails = Array.from(colors, (color, index) => `${index}. ${color}`);
console.log(colorDetails); // ["0. red", "1. green", "2. blue"]

• 使用箭頭函數作為映射函數

let set = new Set([1, 2, 3]);
let doubledSet = Array.from(set, x => x * 2);
console.log(doubledSet); // [2, 4, 6]

總結

在JavaScript中，創(chuàng)建數組有 3 種主要方式，每種方式都有其獨特的特點和適用場景，選擇合適的數組創(chuàng)建方式可以提高代碼的可讀性和性能。

直接聲明

• 特點：語法簡潔、直觀，適用于大部分場景。

• 使用場景：適合絕大多數的數組創(chuàng)建需求，尤其是需要創(chuàng)建包含已知元素的數組。

• 案例：

let arr = [1, 2, 3];
let fruits = [
    "apple",
    "banana",
    "orange",
    "..."
];

以對象方式創(chuàng)建數組

• 特點：使用Array()構造函數，可以創(chuàng)建空數組或指定長度的數組。適用于一些特殊情況。

• 使用場景：適合需要創(chuàng)建特定長度的空數組或從單個非數字參數創(chuàng)建數組的情況。

• 案例：

let arr = new Array(6); // 創(chuàng)建一個長度為6的空數組
let singleElementArray = new Array("hello"); // 創(chuàng)建一個包含單個元素的數組
let multipleElementsArray = new Array("hello", "world", "!"); // 創(chuàng)建一個包含多個元素的數組

使用Array.from()方法創(chuàng)建：

• 特點：從類數組對象或可迭代對象創(chuàng)建數組，同時可以使用映射函數對數組元素進行初始化操作。

• 使用場景：適合從類數組對象（如arguments對象）、可迭代對象（如Set、String）創(chuàng)建數組，或需要對元素進行初始化操作時使用。

• 案例：

// 從類數組對象創(chuàng)建數組
let arguments = {
    0: 1,
    1: 2,
    2: 3,
    length: 4
};
let arr = Array.from(arguments);
console.log(arr); // [1, 2, 3, undefined]

// 從字符串創(chuàng)建數組
let str = 'hello';
let strArray = Array.from(str);
console.log(strArray); // ["h", "e", "l", "l", "o"]

// 使用映射函數
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = Array.from(numbers, x => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

以上就是詳解JavaScript創(chuàng)建數組的三種方式的詳細內容，更多關于JavaScript創(chuàng)建數組的資料請關注腳本之家其它相關文章！

最新評論