JavaScript 數組 · ZetCode 中文系列教程

# JavaScript 數組 > 原文： [http://zetcode.com/javascript/arrays/](http://zetcode.com/javascript/arrays/) JavaScript 數組教程展示了如何在 JavaScript 中使用數組。數組是許多值的集合。數組項稱為數組的元素。每個元素都可以由索引引用。數組從零開始。 ## JavaScript 數組初始化在第一個示例中，我們展示了如何在 JavaScript 中初始化數組。 `array_init.js` ```js "use strict"; const nums = [1, 2, 3, 4, 5]; console.log(nums); ``` 該示例使用 JavaScript 創建一個簡單的數組。 ```js const nums = [1, 2, 3, 4, 5]; ``` 使用方括號創建一個數組。元素之間用逗號分隔。 ```js $ nodejs array_init.js [ 1, 2, 3, 4, 5 ] ``` 這是輸出。 ## JavaScript 數組索引下一個示例顯示了 JavaScript 中的數組索引操作。 `array_index.js` ```js "use strict"; const nums = [1, 2, 3, 4, 5, 1]; const e1 = nums[0]; console.log(e1); nums[2] = 22; console.log(nums[2]); console.log(nums.indexOf(1)); console.log(nums.lastIndexOf(1)); ``` 我們使用索引操作來獲取和修改數組值以及獲取元素的索引。 ```js const e1 = nums[0]; ``` 我們得到數組的第一個元素。索引從零開始。 ```js nums[2] = 22; ``` 我們修改數組的第三個值。 ```js console.log(nums.indexOf(1)); ``` 使用`indexOf()`，我們第一次出現元素 1。 ```js console.log(nums.lastIndexOf(1)); ``` 使用`lastIndexOf()`，我們得到元素 1 的最后一次出現。 ```js $ nodejs array_index.js 1 22 0 5 ``` 這是輸出。 ## JavaScript 數組基本操作以下示例介紹了 JavaScript 數組的一些基本操作。 `basic_oper.js` ```js "use strict"; const words = []; words.push("pen"); words.push("pencil", "knife", "chair"); console.log(words); const el1 = words.shift(); console.log(el1); console.log(words); const el2 = words.pop(); console.log(el2); console.log(words); ``` 在示例中，我們介紹了 JavaScript 數組的`push()`，`shift()`和`pop()`方法。 ```js const words = []; words.push("pen"); words.push("pencil", "knife", "chair"); ``` 創建一個空數組。使用`push()`方法，我們在數組末尾添加一個或多個元素。 ```js const el1 = words.shift(); ``` `shift()`方法從數組中刪除第一個元素，然后返回刪除的元素。它改變了數組的長度。 ```js const el2 = words.pop(); ``` `pop()`方法從數組中刪除最后一個元素并返回該元素。此方法還更改了數組的長度。 ```js $ nodejs basic_oper.js [ 'pen', 'pencil', 'knife', 'chair' ] pen [ 'pencil', 'knife', 'chair' ] chair [ 'pencil', 'knife' ] ``` 這是輸出。 ## JavaScript 循環數組在下一個示例中，我們遍歷 JavaScript 數組。 `array_loop.js` ```js "use strict"; const words = ["pen", "pencil", "rock", "sky", "earth"]; words.forEach(e => console.log(e)); for (let word of words) { console.log(word); } for (let idx in words) { console.log(words[idx]); } const len = words.length; for (let i = 0; i < len; i++) { console.log(words[i]); } const i = 0; while (i < len) { console.log(words[i]); i++; } ``` 該示例顯示了遍歷 JavaScript 數組的四種方式。 ```js words.forEach(e => console.log(e)); ``` 我們使用`forEach()`方法遍歷數組。它為每個數組元素執行一次提供的函數。 ```js for (let word of words) { console.log(word); } ``` 通過`for of`循環，我們遍歷數組的值。 ```js for (let idx in words) { console.log(words[idx]); } ``` 通過`for in`循環，我們遍歷數組的索引。 ```js var len = words.length; for (let i = 0; i < len; i++) { console.log(words[i]); } ``` 在這里，我們使用類似于 C 的`for`循環遍歷數組。 ```js var i = 0; while (i < len) { console.log(words[i]); i++; } ``` 最后，我們使用`while`循環遍歷數組。 ## JavaScript 數組切片 `slice()`方法返回數組部分的淺表副本。該方法采用一個或兩個參數，這些參數指定選擇的索引。原始數組未修改。 `array_slice.js` ```js "use strict"; const nums = [2, -3, 4, 6, -1, 9, -7]; const res = nums.slice(3); console.log(res); const res2 = nums.slice(2, 4); console.log(res2); ``` 在示例中，我們創建了兩個切片。 ```js const res = nums.slice(3); ``` 我們創建一個從索引 3 到數組末尾的切片。 ```js const res2 = nums.slice(2, 4); ``` 我們創建一個從索引 2 到索引 4 的切片；結束索引不包含在內。 ```js $ nodejs array_slice.js [ 6, -1, 9, -7 ] [ 4, 6 ] ``` 這是輸出。 ## JavaScript 排序數組 `sort()`方法對數組中的元素進行適當排序，然后返回數組。默認排序順序是根據字符串 Unicode 代碼點確定的。 `sort()`方法采用可選函數，該函數定義了排序順序。 `array_sort.js` ```js "use strict"; const nums = [2, 3, 1, 6, 5, 8, 9, 0]; nums.sort(); console.log(nums); nums.reverse(); console.log(nums); const persons = [ {name: 'Peter', age: 21}, {name: 'Robert', age: 37}, {name: 'Martin', age: 45}, {name: 'Jane', age: 31} ]; persons.sort((a, b) => a.age - b.age); console.log(persons); persons.sort((a, b) => { const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase(); if (nameA < nameB) { return -1; } else if (nameA > nameB) { return 1; } else { return 0; } }); console.log(persons); ``` 該示例對整數數組和對象數組進行排序。 ```js nums.sort(); ``` `sort()`方法按升序對整數數組進行排序。 ```js nums.reverse(); ``` `reverse()`方法按降序對整數數組進行排序。 ```js persons.sort((a, b) => a.age - b.age); ``` 我們通過`age`屬性對一系列人對象進行排序。 ```js persons.sort((a, b) => { const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase(); if (nameA < nameB) { return -1; } else if (nameA > nameB) { return 1; } else { return 0; } }); ``` 我們通過名稱屬性對人員對象數組進行排序。 ```js $ nodejs array_sort.js [ 0, 1, 2, 3, 5, 6, 8, 9 ] [ 9, 8, 6, 5, 3, 2, 1, 0 ] [ { name: 'Peter', age: 21 }, { name: 'Jane', age: 31 }, { name: 'Robert', age: 37 }, { name: 'Martin', age: 45 } ] [ { name: 'Jane', age: 31 }, { name: 'Martin', age: 45 }, { name: 'Peter', age: 21 }, { name: 'Robert', age: 37 } ] ``` 這是輸出。 ## JavaScript 多維數組在 JavaScript 中，我們可以創建多維數組。 `multi_dim.js` ```js "use strict"; const nums = [2, 3, 2, [33, 44, 55], [7, 8, [77, 88]]]; console.log(nums[2]); console.log(nums[3]); console.log(nums[3][0]); console.log(nums[4][0]); console.log(nums[4][2][0]); ``` 通過將數組嵌套到其他數組中來創建多維數組。 ```js const nums = [2, 3, 2, [33, 44, 55], [7, 8, [77, 88]]]; ``` 我們定義了一個多維數組。 ```js console.log(nums[2]); ``` 為了從第一維獲取元素，我們使用一對方括號。 ```js console.log(nums[3]); ``` 這行打印整個內部數組。 ```js console.log(nums[3][0]); ``` 為了從內部數組中獲取元素，我們使用了兩對方括號。 ```js console.log(nums[4][2][0]); ``` 在這里，我們從三維獲得了一個值。 ```js $ nodejs multi_dim.js 2 [ 33, 44, 55 ] 33 7 77 ``` 這是輸出。 ## JavaScript 過濾數組 `filter()`方法創建一個新數組，其中所有元素均通過給定函數實現的測試。 `filter_array.js` ```js "use strict" const nums = [2, -3, 4, 6, -1, 9, -7]; const res = nums.filter(e => e > 0); console.log(res); ``` 該示例創建一個僅包含正值的新數組。 ```js const res = nums.filter(e => e > 0); ``` `filter()`方法采用謂詞方法作為參數。謂詞返回`true`以保留元素，否則返回`false`。 ```js $ nodejs filter_array.js [ 2, 4, 6, 9 ] ``` 這是輸出。 ## JavaScript 數組映射 `map()`方法通過在調用數組中的每個元素上應用提供的函數來創建新數組。 `array_map.js` ```js "use strict"; const a1 = ['dog', 'tree', 'smart']; const a2 = a1.map(e => e.toUpperCase()); console.log(a2); ``` 我們有很多單詞。使用`map()`方法，我們將`toUpperCase()`方法應用于每個單詞。 ```js $ nodejs array_map.js [ 'DOG', 'TREE', 'SMART' ] ``` 這是輸出。 ## JavaScript 數組查找 `find()`方法返回滿足所提供函數的第一個元素的值；否則返回`undefined`。 `array_find.js` ```js "use strict"; const nums = [2, -3, 4, 6, 1, 23, 9, 7]; const e1 = nums.find(e => e > 10); console.log(e1); ``` 在示例中，我們打印出大于 10 的第一個值。 ```js $ nodejs array_find.js 23 ``` 這是輸出。 ## JavaScript 數組歸約精簡是將數組值聚合為單個值的終端操作。 `reduce()`方法對累加器和數組中的每個元素（從左到右）應用一個函數，以將其減小為單個值。 `array_reduce.js` ```js "use strict"; const nums = [2, 3, 4, 5, 6, 7]; const res = nums.reduce((product, next) => product * next); console.log(res); ``` 我們使用`reduce()`方法從數組元素計算乘積。 ```js const res = nums.reduce((product, next) => product * next); ``` `product`是累加器，`next`是數組中的下一個值。 ```js $ nodejs array_reduce.js 5040 ``` 這是輸出。在本教程中，我們介紹了 JavaScript 數組。您可能也對這些相關教程感興趣： [Lodash 教程](/javascript/lodash/)， [JavaScript 正則表達式](/javascript/regularexpressions/)， [Node.js 教程](/javascript/nodejs/)， [JavaScript 貪食蛇教程](/javascript/snake/)。