JavaScript >> Javascript 文檔 >  >> Tags >> Arrays

面向初學者的 JavaScript 數組簡介

數組是 JavaScript 中的類似列表的對象,可用於在單個變量中存儲多個值。這是一個有序集合 的值,其中每個值稱為一個元素,該元素在數組中具有預定義的數字位置,稱為它的索引。

JavaScript 數組可以存儲不同種類的數據類型 在一個盒子裡:字符串、布爾值、數字、HTML 元素、對象,甚至是其他數組。這意味著您可以創建一個數組,其中第一個位置存儲一個 HTML 元素,第二個位置存儲一個對象,第三個位置存儲一個字符串,依此類推。

就像 Java 和 Python 等其他編程語言一樣,JavaScript 中的數組從零開始 .這意味著數組中第一個元素的索引為 0,第二個元素的索引為 1,第三個元素的索引為 2,依此類推。

創建數組

在 JavaScript 中有兩種創建數組的方法。創建數組最簡單的方法是使用數組字面量表示法:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

或者,您可以使用全局 Array 初始化新數組的類構造函數:

const fruits = new Array('Apple', 'Orange', 'Mango', 'Banana');

要創建一個空數組,只需使用空括號:

const animals = [];

允許使用空格和換行符。一個數組聲明可以跨越多行:

const fruits = [
    'Apple',
    'Orange',
    'Mango',
    'Banana'
];

如果您事先知道數組將包含的元素數量,則可以將計數用作 Array 的參數 構造函數。將自動創建一個空數組,其中指定的槽數初始化為 undefined

const numbers = new Array(50);

數組可以存儲任何類型的元素:字符串、數字、函數、對象,甚至是其他數組:

const arr = [
    'Tiger',
    29.6,
    { name: 'John Doe', age: 29 },
    true,
    function () {
        console.log('Hey there!');
    },
    ['Apple', 'Banana']
];

訪問數組的元素

您可以通過方括號中的索引號訪問數組元素:

const animals = ['🐱', '🐭', '🐧', '🐯', '🐘'];

console.log(animals[1]); // 🐭
console.log(animals[3]); // 🐯

請注意,數組索引從 0 開始,而不是 1。這意味著第一個元素的索引為 0,最後一個元素的索引長度為負 1。上述五個元素的數組的索引從 0 到4.

JavaScript 數組可以是多維的 ,這意味著一個數組元素可以包含另一個數組,其元素可以包含數組,依此類推。要訪問多維數組中的元素,需要多次指定索引:

const users = [
    ['John Doe', 22],
    ['Lisa Lee', 33],
    [
        ['Alex', 'USA'],
        ['Tom Doe', 'DE']
    ]
];

console.log(users[1][0]); // Lisa Lee
console.log(users[2][0]); // ['Alex', 'USA']
console.log(users[2][1][0]); // Tom Doe

向數組添加元素

向數組添加元素的最簡單方法是使用 push() 方法:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// add a new element
fruits.push('Cherry');

console.log(fruits); // ['Apple', 'Orange', 'Mango', 'Banana', 'Cherry']

或者,您可以使用 length 在數組末尾插入元素的屬性:

fruits[fruits.length] = 'Cherry';

更改數組元素

以下示例演示瞭如何更改數組元素的值:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// change 2nd element value
fruits[1] = 'Cherry';

// print array
console.log(fruits); // [ 'Apple', 'Cherry', 'Mango', 'Banana' ]

從數組中刪除元素

由於 JavaScript 數組是對象,您可以使用 delete 運算符從數組中刪除任何特定元素:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// delete 2nd element
delete fruits[1];

console.log(fruits); // ['Apple', <1 empty item>, 'Mango', 'Banana']

delete 運算符僅將元素的值重置為 undefined ,你不應該使用它,因為它可能會在數組中留下漏洞。相反,您應該使用 pop()shift() 方法說明如下。

檢測數組

JavaScript 社區中最常見的問題之一是如何確定給定變量是否為數組。

主要問題是 JavaScript 數組在內部被視為一種特殊類型的對象。用於訪問數組元素 arr[index] 的方括號語法 本質上與我們用於對象 obj[key] 的相同 .唯一明顯的區別是數字被用作鍵。

因此,您不能使用 typeof 運算符,因為它總是返回 object 對於數組:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

console.log(typeof fruits); // object

為了真正確定給定變量是否為數組,ECMAScript 5 引入了一種名為 Array.isArray() 的新方法 :

Array.isArray(fruits); // true

Array.isArray() 適用於所有現代瀏覽器以及 Internet Explorer 9 及更高版本。或者,您也可以使用 instanceof 運算符檢查給定對像是否為數組:

fruits instanceof Array; // true

instanceof 運算符受 Internet Explorer 6 及更高版本的支持。

length 屬性

length 數組的屬性返回最大的數字索引加一 ,而不是元素的實際計數。修改數組時自動更新。

讓我們看下面的例子來理解我的意思:

const animals = [];
animals[20] = 'Cat';

console.log(animals.length); // 21

如上所示,數組的 length 當我們只添加一個元素時,屬性會更新為最高索引加一。從性能的角度來看,它非常有用,因為每當我們修改數組時,實際元素都不會被計算在內。

length 的另一個有趣之處 屬性是它是可寫 .您可以手動設置一個新值來增加或減少數組的大小。可以通過設置較小的 length 來截斷數組 價值:

const numbers = [1, 2, 3, 4, 5];

// truncate to 3 elements
numbers.length = 3;

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

// increase size to 6
numbers.length = 6;

console.log(numbers);   // [1, 2, 3, empty × 3]

要清除數組,只需設置 length 屬性值為0:

// clear the array
numbers.length = 0;

console.log(numbers); // []

循環數組

有多種方法可以遍歷數組元素。最簡單的方法是使用經典的 for 循環:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

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

您還可以使用其他 JavaScript 循環,例如 for...of、for...in 和 forEach() 來遍歷數組。查看這篇文章,了解更多關於在 JavaScript 中循環數組的所有可用方法。

數組方法

數組原型提供了幾種方法來執行遍歷和變異操作,例如對數組的添加、刪除、更新等。讓我們來看看一些最流行的此類可用於操作數組的方法。

toString()

JavaScript toString() 方法將數組轉換為逗號分隔的字符串:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

console.log(fruits.toString()); // Apple,Orange,Mango,Banana

join()

join() 方法將所有數組元素連接成一個字符串。和上面的toString()非常相似 方法,但允許您指定分隔符:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

console.log(fruits.join('_')); // Apple_Orange_Mango_Banana

concat()

concat() 方法通過合併兩個現有數組來創建一個新數組:

const arr1 = [1, 2];
const arr2 = [3, 4];

const newArr = arr1.concat(arr2);

console.log(newArr); // [ 1, 2, 3, 4 ]

concat() 方法不會更改現有數組。相反,它總是返回一個新數組。你甚至可以指定多個數組參數:

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];

const newArr = arr1.concat(arr2, arr3);

console.log(newArr); // [ 1, 2, 3, 4, 5, 6 ]

您也可以使用 concat() 使用附加元素從現有數組創建新數組的方法:

const arr1 = [1, 2];

const newArr = arr1.concat(2, 3, 4);

console.log(newArr); // [ 1, 2, 2, 3, 4 ]

push()

push() 方法在現有數組的末尾添加一個或多個元素:

const names = ['Alex', 'Mike', 'Atta'];

// add more elements
names.push('Ali', 'Emma');

console.log(names); // ['Alex', 'Mike', 'Atta', 'Ali', 'Emma']

push() 方法返回更新後的 length 數組:

const length = names.push('Ali', 'Emma');

console.log(length); // 5

pop()

pop() 方法與 push() 相反 方法。它刪除數組的最後一個元素並返回它:

const names = ['Alex', 'Mike', 'Atta'];

// remove last element
const elem = names.pop();

console.log(elem); // Atta

unshift()

unshift() 方法在數組的開頭添加一個或多個元素並取消移動較舊的元素。該方法返回更新後的數組長度:

const names = ['Alex', 'Mike', 'Atta'];

// add new elements at start
const length = names.unshift('Ali', 'Emma');

console.log(length); // 5
console.log(names); // ['Ali', 'Emma', 'Alex', 'Mike', 'Atta']

shift()

shift() 方法刪除數組的第一個元素並返回它。所有其他元素都移到較低的索引:

const names = ['Alex', 'Mike', 'Atta'];

// remove an element from start
const elem = names.shift();

console.log(elem); // Alex
console.log(names); // ['Mike', 'Atta']

splice()

splice() 方法可用於添加新元素以及從數組中刪除現有元素。此方法更改原始數組並返回刪除的元素(如果有)。

這是 splice() 的語法 :

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  • start — 更改數組中元素的起始索引。
  • deleteCount — 一個整數,指示數組中要從 start 中刪除的元素數 .
  • item1, item2, ... — 要添加到數組中的元素,從 start 開始 .

刪除元素

這是使用 splice() 的示例 從數組的開頭刪除前兩個元素:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

// remove first elements
const removed = fruits.splice(0, 2);

console.log(fruits); // ['Mango', 'Banana']
console.log(removed); // ['Apple', 'Orange']

如果 deleteCount 被省略,所有從 start 開始的元素 從數組中刪除:

const removed = fruits.splice(1);

console.log(fruits); // ['Apple']
console.log(removed); // ['Orange', 'Mango', 'Banana']

您還可以使用 splice() 將刪除的項目替換為新項目 :

const removed = fruits.splice(1, 2, 'Cherry', 'Watermelon');

console.log(fruits); // ['Apple', 'Cherry', 'Watermelon', 'Banana']
console.log(removed); // ['Orange', 'Mango']

添加元素

使用 splice() 添加新元素 ,只需設置 deleteCount 歸零:

const removed = fruits.splice(2, 0, 'Cherry');

console.log(fruits); // ['Apple', 'Orange', 'Cherry', 'Mango', 'Banana']
console.log(removed); // []

slice()

slice() 方法將數組的一部分分割成一個新數組。此方法返回一個新數組,其中包含從原始數組複製的元素。原數組保持不變。

slice() 方法最多需要兩個參數:從中選擇元素的開始索引和可選的結束索引(不包括)。

這是一個例子:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

const sliced = fruits.slice(1, 3);

console.log(sliced); // ['Orange', 'Mango']

如果省略結束索引,slice() 將從起始索引開始切出數組的其餘部分:

const sliced = fruits.slice(1);

console.log(sliced); // ['Orange', 'Mango', 'Banana']

indexOf()

indexOf() 方法在數組中搜索給定元素,並返回其位置:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

fruits.indexOf('Orange'); // 1
fruits.indexOf('Cherry'); // -1 (not found)

filter()

filter() 方法創建一個新數組,其中填充了所有通過特定條件的數組元素:

const ages = [24, 45, 33, 76, 55, 86];

const above50 = ages.filter(age => age > 50);

console.log(above50); // [76, 55, 86]

filter() 方法不執行空元素的功能。而且,它不會改變原來的數組。

map()

map() 方法創建一個新數組,其中包含對數組中每個元素執行函數的結果:

const prices = [10, 9.99, 15, 45];

const updated = prices.map(price => '$' + price);

console.log(updated); // ['$10', '$9.99', '$15', '$45']

reduce()

reduce() 方法將數組減少為單個值。它從左到右為數組的每個元素調用提供的方法,但空值除外。函數的返回值存儲在一個累加器中。

reduce() 該方法通常用於計算數組中的總和、平均值、最小值和最大值。

這是一個使用 reduce() 計算數組中所有元素之和的示例 方法:

const numbers = [10, 99, 75, 45, 33];

const sum = numbers.reduce((total, num) => total + num);

console.log(sum); // 262

您還可以傳遞一個可選的累加器的初始值reduce() 方法:

// pass initial value 100
const sum = numbers.reduce((total, num) => total + num, 100);

console.log(sum); // 362

forEach()

forEach() 方法通過為每個元素調用一次函數來遍歷數組的所有元素,按順序:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

fruits.forEach((fruit, index) => {
    console.log(`${fruit} has ${index} index.`);
});

// Apple has 0 index.
// Orange has 1 index.
// Mango has 2 index.
// Banana has 3 index.

查看本指南以了解有關 forEach() 的更多信息 JavaScript 中的方法。

every()

every() 方法用於檢查數組中的所有元素是否通過特定測試。它返回 true 如果所有元素都通過,否則 false

const numbers = [10, 99, 75, 45, 33];

// check if all elements are > 15
const result = numbers.every(num => num > 15);

console.log(result); // false

every() 方法對數組中存在的每個元素執行一次函數。如果它找到函數返回的數組元素 false , every() 返回 false 並且不檢查剩餘的元素。

some()

some() 方法類似於 every() 除了它返回 true 如果一個或多個元素通過某個條件:

const numbers = [10, 99, 75, 45, 33];

// check if any element > 15
const result = numbers.some(num => num > 15);

console.log(result); // true

includes()

includes() 方法檢查給定元素是否存在於數組中。它類似於 some() 方法。但它不是等待特定條件通過,而是簡單地檢查數組是否包含給定元素:

const fruits = ['Apple', 'Orange', 'Mango', 'Banana'];

fruits.includes('Apple'); // true
fruits.includes('Watermelon'); // false

結論

這就是所有的人!在本文中,我們詳細研究了 JavaScript 數組。我們學習瞭如何創建數組,如何訪問數組中的元素,如何添加、更新和刪除元素等等。

最後,我們查看了一些最常用的數組方法。您可以使用更多方法來操作數組。查看這篇 MDN 文章以了解有關它們的更多信息。


Tutorial JavaScript 教程
  1. Covtact:安全的聯繫人日記以減緩 COVID-19 [DO-Hackathon]

  2. 電子歷險記:第 4 集:動態 HTML 圖像庫

  3. 在一個命令中構建整個 React 應用程序

  4. 使用 Lodashs get() 函數進行安全導航

  5. 關於使用 Web 組件庫

  6. 使用 Angular 熱敏打印機庫設計收據

  7. 如何使用 Python 或 Javascript 編輯 After Effects 模板?

  1. 使用語義 UI 和 React 快速構建漂亮的網站

  2. 如何在 Cytoscape JS 的選擇器中註入變量?

  3. javascript如何判斷一個數字是否是另一個數字的倍數

  4. 使用 nvm 安裝 Nodejs

  5. 如何從頭開始構建自己的 node.js 選擇選項。

  6. 使用 JSON Web 令牌創建安全密碼重置

  7. 搬到傑基爾

  1. 50 多個最佳 Bootstrap 響應式 HTML5 模板 - 簡易模板

  2. 如何使您的 React 應用程序成為漸進式 Web 應用程序 (PWA)

  3. Mongoose 中的 deleteMany() 函數

  4. 媒體會話 API