1 直接聲明

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

let arr = [1, 2, 3];

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

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

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

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

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

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

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

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

2.1. 僅一個Number類型參數(shù)

let arr = new Array(6);

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

補充知識：

含空槽的數(shù)組又被稱作為稀疏數(shù)組。稀疏數(shù)組在使用數(shù)組迭代方法時，空槽元素都將被跳過。如果訪問空槽元素，結(jié)果會是 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類型參數(shù) 或 有多個參數(shù)

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

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

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

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

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

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

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

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

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

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

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

什么是類數(shù)組對象？

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

類數(shù)組對象還有個別名叫arguments對象。

所以一個形似數(shù)組的對象是：

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

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

• 長度與元素數(shù)量不符

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

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ī)則的鍵值對則被當作數(shù)組元素。

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)建數(shù)組

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

什么是可迭代對象？

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

常見的內(nèi)置可迭代對象有:

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

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

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

3.3. 映射函數(shù)

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

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

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

關(guān)于 map() 方法

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

map()包含兩個參數(shù)：

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

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

其中的callbackFn被調(diào)用時將傳入 3 個參數(shù):

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

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

array（可選）： 調(diào)用了 map() 的數(shù)組本身。

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

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

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) 會具有相同的結(jié)果。只是Array.from()不會創(chuàng)建中間數(shù)組，而是直接構(gòu)建一個新數(shù)組。

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

• 初始化哈希函數(shù)

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

• 將字符串轉(zhuǎn)換為大寫

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

• 平方數(shù)組元素

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"]

• 使用箭頭函數(shù)作為映射函數(shù)

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

總結(jié)

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

直接聲明

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

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

• 案例：

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

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

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

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

• 案例：

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

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

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

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

• 案例：

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

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

// 使用映射函數(shù)
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)建數(shù)組的三種方式的詳細內(nèi)容，更多關(guān)于JavaScript創(chuàng)建數(shù)組的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論