1 直接聲明

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

let arr = [1, 2, 3];

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

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

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

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

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

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

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

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

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

let arr = new Array(6);

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

補(bǔ)充知識(shí)：

含空槽的數(shù)組又被稱作為稀疏數(shù)組。稀疏數(shù)組在使用數(shù)組迭代方法時(shí)，空槽元素都將被跳過(guò)。如果訪問(wèn)空槽元素，結(jié)果會(huì)是 undefine。

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

2.2. 有一個(gè)非Number類型參數(shù) 或 有多個(gè)參數(shù)

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

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

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

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

此種方式一般不會(huì)使用，不但有可能會(huì)引起一些誤會(huì)，也沒有中括號(hào)[...]方式簡(jiǎn)潔。

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

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

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

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

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

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

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

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

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

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

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

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

• 長(zhǎng)度與元素?cái)?shù)量不符

元素?cái)?shù)量會(huì)嚴(yán)格按照length的值執(zhí)行。如果沒有length，則默認(rèn)為0——即一個(gè)空數(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); // []

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

如鍵值不符合下標(biāo)規(guī)范，則這個(gè)鍵值對(duì)會(huì)被直接忽略。其它符合規(guī)則的鍵值對(duì)則被當(dāng)作數(shù)組元素。

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

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

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

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

什么是可迭代對(duì)象？

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

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

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

比如從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()還可以接受第二個(gè)參數(shù)，作為一個(gè)映射函數(shù)，用于對(duì)每個(gè)元素進(jìn)行處理后再放入新數(shù)組，達(dá)到初始化的效果：

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

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

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

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

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

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

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

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

currentValue： 正在處理的當(dāng)前元素。

index（可選）： 正在處理的當(dāng)前元素的索引。

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

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

除此之外，Array.from() 方法還接受第三個(gè)可選參數(shù),這個(gè)參數(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"]

所以可以說(shuō)Array.from(obj, mapFn, thisArg) 和 Array.from(obj).map(mapFn, thisArg) 會(huì)具有相同的結(jié)果。只是Array.from()不會(huì)創(chuàng)建中間數(shù)組，而是直接構(gòu)建一個(gè)新數(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 種主要方式，每種方式都有其獨(dú)特的特點(diǎn)和適用場(chǎng)景，選擇合適的數(shù)組創(chuàng)建方式可以提高代碼的可讀性和性能。

直接聲明

• 特點(diǎn)：語(yǔ)法簡(jiǎn)潔、直觀，適用于大部分場(chǎng)景。

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

• 案例：

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

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

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

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

• 案例：

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

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

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

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

• 案例：

// 從類數(shù)組對(duì)象創(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ù)組的三種方式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript創(chuàng)建數(shù)組的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論