avaScript備忘錄 —— 創建數組的3種方式

1 # 直接聲明

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

let arr = [1, 2, 3];

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

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

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

2 # 以對象方式創建數組

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

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

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

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

1. 僅一個Number類型參數

let arr = new Array(6);

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

補充知識：

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

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

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

續上回，如只有一個參數但不是 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() 方法創建

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

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

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

1. 由類數組對象創建數組

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

什么是類數組對象？

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

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

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

javascript

復制代碼

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

同時，這里舉幾個用不符合規則的類數組對象創建數組的樣例：

• 長度與元素數量不符

元素數量會嚴格按照length的值執行。如果沒有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); // []

• 鍵值不符合下標規范

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

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

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

2. 由可迭代對象創建數組

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

什么是可迭代對象？

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

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

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

比如從String創建數組:

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

再比如從Set創建數組:

let set = new Set([1, 2, 3]);
let arr = Array.from(set);
console.log(arr); // [1, 2, 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()的作用是創建一個新數組，其中每個元素都由原數組中的每個元素都調用一次提供的函數后的返回值組成。

map()包含兩個參數：

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

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

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

currentValue： 正在處理的當前元素。 index（可選）： 正在處理的當前元素的索引。 array（可選）： 調用了 map() 的數組本身。

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

除此之外，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()不會創建中間數組，而是直接構建一個新數組。

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中，創建數組有 3 種主要方式，每種方式都有其獨特的特點和適用場景，選擇合適的數組創建方式可以提高代碼的可讀性和性能。

直接聲明

• 特點：語法簡潔、直觀，適用于大部分場景。
• 使用場景：適合絕大多數的數組創建需求，尤其是需要創建包含已知元素的數組。
• 案例：

let arr = [1, 2, 3];

let fruits = [

"apple",

"banana",

"orange",

"..."

];

以對象方式創建數組

• 特點：使用Array()構造函數，可以創建空數組或指定長度的數組。適用于一些特殊情況。
• 使用場景：適合需要創建特定長度的空數組或從單個非數字參數創建數組的情況。
• 案例：

let arr = new Array(6); // 創建一個長度為6的空數組

let singleElementArray = new Array("hello"); // 創建一個包含單個元素的數組

let multipleElementsArray = new Array("hello", "world", "!"); // 創建一個包含多個元素的數組

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

• 特點：從類數組對象或可迭代對象創建數組，同時可以使用映射函數對數組元素進行初始化操作。
• 使用場景：適合從類數組對象（如arguments對象）、可迭代對象（如Set、String）創建數組，或需要對元素進行初始化操作時使用。
• 案例：

// 從類數組對象創建數組

let arguments = {

0: 1,

1: 2,

2: 3,

length: 4

};

let arr = Array.from(arguments);

console.log(arr); // [1, 2, 3, undefined]

// 從字符串創建數組

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]

作者：Dikkoo
鏈接：https://juejin.cn/post/7376575006535237669

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

山高自有客行路

水深自有渡船人

- 2024.05.10 -

在編程的世界里，數據是構建一切的基礎。而在JavaScript中，有一種特殊且強大的數據結構，它就是——數組。

今天，我們就來一起探索數組的奧秘，從創建到使用，一步步掌握這個重要的工具。

一、什么是數組

數組（Array）是一種按順序存儲多個值的數據結構。你可以把它想象成一個盒子，這個盒子可以存放多個物品，而且每個物品都有一個編號，我們可以通過這個編號來找到或者修改這個物品。

在JavaScript中，數組是一種特殊的對象，用于存儲和操作多個值。與其他編程語言不同，JavaScript的數組可以同時存儲不同類型的值，并且長度是動態的，可以根據需要隨時添加或刪除元素。

JavaScript數組使用方括號([])來表示，其中的每個元素用逗號分隔。例如，以下是一個包含不同類型元素的數組的示例：

var myArray = [1, "two", true, [3, 4, 5]];

數組中的元素可以通過索引來訪問和修改，索引從0開始。例如，要訪問數組中的第一個元素，可以使用以下代碼：

var firstElement = myArray[0];

JavaScript也提供了一些內置方法來操作數組，如push()、pop()、shift()、unshift()等，用于添加、刪除和修改數組中的元素。

二、數組的作用

數組在編程中扮演著非常重要的角色。它可以幫助我們：

• 存儲多個值：我們可以在一個變量中存儲多個值，而不需要為每個值創建單獨的變量。
• 操作數據：我們可以對數組中的元素進行添加、刪除、修改和查找等操作。
• 實現各種算法：通過數組，我們可以實現排序、搜索等常見算法。
• 循環遍歷：數組的元素是有序的，可以使用循環結構遍歷數組的每個元素，從而對每個元素進行相同或類似的操作。這在處理大量數據時非常有用。

三、創建數組的方法

在JavaScript中，有多種方法可以創建數組，下面列出常見的三種：

1）字面量方式：

這是最常見的創建數組的方式，只需要在一對方括號[]中放入元素即可，如

var arr = [];

2）使用Array構造函數：

通過new Array()也可以創建數組，如

var arr = new Array();

3）使用Array.of()方法：

這個方法可以創建一個具有相同元素的新數組實例，如

var arr = Array.of(1, 2, 3);

四、使用數組的方法

創建了數組后，我們就可以對它進行各種操作了：

1、訪問和修改數組元素

要訪問和修改數組元素，需要使用數組的索引。數組的索引從0開始，依次遞增。要訪問數組元素，可以使用以下語法：

console.log(arr[0]); // 輸出第一個元素
arr[1] = 4; // 修改第二個元素的值

2、向數組末尾添加元素

要向數組的末尾添加一個元素，可以使用數組的push()方法。該方法會在數組的末尾添加指定的元素。以下是使用push()方法向數組末尾添加元素的示例：

arr.push(5);

3、從數組末尾移除元素

要從數組的末尾移除一個元素，可以使用數組的pop()方法。該方法會移除并返回數組中的最后一個元素。以下是使用pop()方法從數組末尾移除元素的示例：

arr.pop();

4、從數組末尾移除元素

要從數組的末尾移除一個元素，可以使用數組的unshift()方法。該方法會移除并返回數組中的最后一個元素。以下是使用unshift()方法從數組末尾移除元素的示例：

arr.unshift(0);

5、從數組開頭移除元素

要從數組的開頭移除一個元素，可以使用數組的shift（）方法，并將索引值設置為0。該方法會移除并返回數組中的第一個元素。以下是使用shift（）方法從數組開頭移除元素的示例：

arr.shift();

6、獲取數組的長度

要獲取數組的長度，可以使用內置函數length（）。length（）函數返回數組中元素的個數。以下是獲取數組長度的示例：

console.log(arr.length);

7、遍歷數組

要遍歷數組的所有元素，可以使用for循環。下面是遍歷數組的示例：

for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

8、數組排序

要對數組進行排序，可以使用JavaScript內置的sort()方法。下面是對數組進行排序的示例：

arr.sort();

9、數組反轉

要對數組進行反轉，可以使用JavaScript內置的reverse()方法。下面是對數組進行反轉的示例：

arr.reverse();

10、 數組搜索

要在數組中搜索特定的元素，可以使用循環遍歷數組，逐個比較每個元素與目標值，找到目標值后返回其索引。下面是一個示例代碼：

console.log(arr.indexOf(3)); // 返回3在數組中的索引位置
console.log(arr.includes(4)); // 檢查數組中是否包含4

以上就是一些常見的數組操作方法，可以根據需要使用適當的方法來操作數組中的元素。

想要快速入門前端開發嗎？推薦一個免費前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

五、使用數組方法的注意事項

1、數組方法是JavaScript中針對數組對象的內置方法，可以方便地對數組進行操作和處理。

2、使用數組方法之前，需要先創建一個數組對象。可以使用數組字面量創建一個數組，也可以使用Array()構造函數來創建一個數組。

3、數組方法可以改變原始數組，也可以返回一個新的數組。需要根據實際需求來選擇使用具體的方法。

4、改變原始數組的方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()等。

5、不改變原始數組的方法包括：slice()、concat()、join()、map()、filter()、reduce()、forEach()等。

6、使用數組方法時需要注意方法的參數和返回值，不同的方法可能需要不同的參數，并且返回值類型也可能不同。

7、數組方法的具體用法可以參考JavaScript官方文檔或者其他相關教程和資源。熟練掌握數組方法可以提高代碼的效率和可讀性。

以上就是JavaScript數組的創建和使用方法，希望對你有所幫助。記住，數組是JavaScript中非常重要的一部分，掌握好它可以讓我們的編程工作更加高效。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享