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/)。