原文： http://zetcode.com/javascript/arrays/

JavaScript 数组教程展示了如何在 JavaScript 中使用数组。

数组是许多值的集合。 数组项称为数组的元素。 每个元素都可以由索引引用。 数组从零开始。

JavaScript 数组初始化

在第一个示例中，我们展示了如何在 JavaScript 中初始化数组。

array_init.js

  1. "use strict";
  3. const nums = [1, 2, 3, 4, 5];
  5. console.log(nums);

该示例使用 JavaScript 创建一个简单的数组。

  1. const nums = [1, 2, 3, 4, 5];

使用方括号创建一个数组。 元素之间用逗号分隔。

  1. $ nodejs array_init.js 
  2. [ 1, 2, 3, 4, 5 ]

这是输出。

JavaScript 数组索引

下一个示例显示了 JavaScript 中的数组索引操作。

array_index.js

  1. "use strict";
  3. const nums = [1, 2, 3, 4, 5, 1];
  5. const e1 = nums[0];
  6. console.log(e1);
  8. nums[2] = 22;
  9. console.log(nums[2]);
  11. console.log(nums.indexOf(1));
  12. console.log(nums.lastIndexOf(1));

我们使用索引操作来获取和修改数组值以及获取元素的索引。

  1. const e1 = nums[0];

我们得到数组的第一个元素。 索引从零开始。

  1. nums[2] = 22;

我们修改数组的第三个值。

  1. console.log(nums.indexOf(1));

使用indexOf()，我们第一次出现元素 1。

  1. console.log(nums.lastIndexOf(1));

使用lastIndexOf()，我们得到元素 1 的最后一次出现。

  1. $ nodejs array_index.js 
  2. 1
  3. 22
  4. 0
  5. 5

这是输出。

JavaScript 数组基本操作

以下示例介绍了 JavaScript 数组的一些基本操作。

basic_oper.js

  1. "use strict";
  3. const words = [];
  4. words.push("pen");
  5. words.push("pencil", "knife", "chair");
  7. console.log(words);
  9. const el1 = words.shift();
  10. console.log(el1);
  11. console.log(words);
  13. const el2 = words.pop();
  14. console.log(el2);
  15. console.log(words);

在示例中，我们介绍了 JavaScript 数组的push()，shift()和pop()方法。

  1. const words = [];
  2. words.push("pen");
  3. words.push("pencil", "knife", "chair");

创建一个空数组。 使用push()方法，我们在数组末尾添加一个或多个元素。

  1. const el1 = words.shift();

shift()方法从数组中删除第一个元素，然后返回删除的元素。 它改变了数组的长度。

  1. const el2 = words.pop();

pop()方法从数组中删除最后一个元素并返回该元素。 此方法还更改了数组的长度。

  1. $ nodejs basic_oper.js 
  2. [ 'pen', 'pencil', 'knife', 'chair' ]
  3. pen
  4. [ 'pencil', 'knife', 'chair' ]
  5. chair
  6. [ 'pencil', 'knife' ]

这是输出。

JavaScript 循环数组

在下一个示例中，我们遍历 JavaScript 数组。

array_loop.js

  1. "use strict";
  3. const words = ["pen", "pencil", "rock", "sky", "earth"];
  5. words.forEach(e => console.log(e));
  7. for (let word of words) {
  9.     console.log(word);
  10. }
  12. for (let idx in words) {
  14.     console.log(words[idx]);
  15. }
  17. const len = words.length;
  19. for (let i = 0; i < len; i++) {
  21.     console.log(words[i]);
  22. }
  24. const i = 0;
  26. while (i < len) {
  28.     console.log(words[i]);
  29.     i++;
  30. }

该示例显示了遍历 JavaScript 数组的四种方式。

  1. words.forEach(e => console.log(e));

我们使用forEach()方法遍历数组。 它为每个数组元素执行一次提供的函数。

  1. for (let word of words) {
  3.     console.log(word);
  4. }

通过for of循环，我们遍历数组的值。

  1. for (let idx in words) {
  3.     console.log(words[idx]);
  4. }

通过for in循环，我们遍历数组的索引。

  1. var len = words.length;
  3. for (let i = 0; i < len; i++) {
  5.     console.log(words[i]);
  6. }

在这里，我们使用类似于 C 的for循环遍历数组。

  1. var i = 0;
  3. while (i < len) {
  5.     console.log(words[i]);
  6.     i++;
  7. }

最后，我们使用while循环遍历数组。

JavaScript 数组切片

slice()方法返回数组部分的浅表副本。 该方法采用一个或两个参数，这些参数指定选择的索引。 原始数组未修改。

array_slice.js

  1. "use strict";
  3. const nums = [2, -3, 4, 6, -1, 9, -7];
  5. const res = nums.slice(3);
  6. console.log(res);
  8. const res2 = nums.slice(2, 4);
  9. console.log(res2);

在示例中，我们创建了两个切片。

  1. const res = nums.slice(3);

我们创建一个从索引 3 到数组末尾的切片。

  1. const res2 = nums.slice(2, 4);

我们创建一个从索引 2 到索引 4 的切片； 结束索引不包含在内。

  1. $ nodejs array_slice.js
  2. [ 6, -1, 9, -7 ]
  3. [ 4, 6 ]

这是输出。

JavaScript 排序数组

sort()方法对数组中的元素进行适当排序，然后返回数组。 默认排序顺序是根据字符串 Unicode 代码点确定的。 sort()方法采用可选函数，该函数定义了排序顺序。

array_sort.js

  1. "use strict";
  3. const nums = [2, 3, 1, 6, 5, 8, 9, 0];
  5. nums.sort();
  6. console.log(nums);
  8. nums.reverse();
  9. console.log(nums);
  11. const persons = [
  12.     {name: 'Peter', age: 21},
  13.     {name: 'Robert', age: 37},
  14.     {name: 'Martin', age: 45},
  15.     {name: 'Jane', age: 31}
  16. ];
  18. persons.sort((a, b) => a.age - b.age);
  19. console.log(persons);
  21. persons.sort((a, b) => {
  23.     const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
  25.     if (nameA < nameB) {
  26.         return -1;
  27.     } else if (nameA > nameB) {
  28.         return 1;
  29.     } else {
  30.         return 0;
  31.     }
  32. });
  34. console.log(persons);

该示例对整数数组和对象数组进行排序。

  1. nums.sort();

sort()方法按升序对整数数组进行排序。

  1. nums.reverse();

reverse()方法按降序对整数数组进行排序。

  1. persons.sort((a, b) => a.age - b.age);

我们通过age属性对一系列人对象进行排序。

  1. persons.sort((a, b) => {
  3.     const nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase();
  5.     if (nameA < nameB) {
  6.         return -1;
  7.     } else if (nameA > nameB) {
  8.         return 1;
  9.     } else {
  10.         return 0;
  11.     }
  12. });

我们通过名称属性对人员对象数组进行排序。

  1. $ nodejs array_sort.js 
  2. [ 0, 1, 2, 3, 5, 6, 8, 9 ]
  3. [ 9, 8, 6, 5, 3, 2, 1, 0 ]
  4. [ { name: 'Peter', age: 21 },
  5.   { name: 'Jane', age: 31 },
  6.   { name: 'Robert', age: 37 },
  7.   { name: 'Martin', age: 45 } ]
  8. [ { name: 'Jane', age: 31 },
  9.   { name: 'Martin', age: 45 },
  10.   { name: 'Peter', age: 21 },
  11.   { name: 'Robert', age: 37 } ]

这是输出。

JavaScript 多维数组

在 JavaScript 中，我们可以创建多维数组。

multi_dim.js

  1. "use strict";
  3. const nums = [2, 3, 2, [33, 44, 55], [7, 8, [77, 88]]];
  5. console.log(nums[2]);
  7. console.log(nums[3]);
  8. console.log(nums[3][0]);
  10. console.log(nums[4][0]);
  11. console.log(nums[4][2][0]);

通过将数组嵌套到其他数组中来创建多维数组。

  1. const nums = [2, 3, 2, [33, 44, 55], [7, 8, [77, 88]]];

我们定义了一个多维数组。

  1. console.log(nums[2]);

为了从第一维获取元素，我们使用一对方括号。

  1. console.log(nums[3]);

这行打印整个内部数组。

  1. console.log(nums[3][0]);

为了从内部数组中获取元素，我们使用了两对方括号。

  1. console.log(nums[4][2][0]);

在这里，我们从三维获得了一个值。

  1. $ nodejs multi_dim.js    
  2. 2
  3. [ 33, 44, 55 ]
  4. 33
  5. 7
  6. 77

这是输出。

JavaScript 过滤数组

filter()方法创建一个新数组，其中所有元素均通过给定函数实现的测试。

filter_array.js

  1. "use strict"
  3. const nums = [2, -3, 4, 6, -1, 9, -7];
  5. const res = nums.filter(e => e > 0);
  7. console.log(res);

该示例创建一个仅包含正值的新数组。

  1. const res = nums.filter(e => e > 0);

filter()方法采用谓词方法作为参数。 谓词返回true以保留元素，否则返回false。

  1. $ nodejs filter_array.js
  2. [ 2, 4, 6, 9 ]

这是输出。

JavaScript 数组映射

map()方法通过在调用数组中的每个元素上应用提供的函数来创建新数组。

array_map.js

  1. "use strict";
  3. const a1 = ['dog', 'tree', 'smart'];
  5. const a2 = a1.map(e => e.toUpperCase());
  6. console.log(a2);

我们有很多单词。 使用map()方法，我们将toUpperCase()方法应用于每个单词。

  1. $ nodejs array_map.js 
  2. [ 'DOG', 'TREE', 'SMART' ]

这是输出。

JavaScript 数组查找

find()方法返回满足所提供函数的第一个元素的值； 否则返回undefined。

array_find.js

  1. "use strict";
  3. const nums = [2, -3, 4, 6, 1, 23, 9, 7];
  5. const e1 = nums.find(e => e > 10);
  6. console.log(e1);

在示例中，我们打印出大于 10 的第一个值。

  1. $ nodejs array_find.js 
  2. 23

这是输出。

JavaScript 数组归约

精简是将数组值聚合为单个值的终端操作。 reduce()方法对累加器和数组中的每个元素（从左到右）应用一个函数，以将其减小为单个值。

array_reduce.js

  1. "use strict";
  3. const nums = [2, 3, 4, 5, 6, 7];
  5. const res = nums.reduce((product, next) => product * next);
  7. console.log(res);

我们使用reduce()方法从数组元素计算乘积。

  1. const res = nums.reduce((product, next) => product * next);

product是累加器，next是数组中的下一个值。

  1. $ nodejs array_reduce.js 
  2. 5040

这是输出。

在本教程中，我们介绍了 JavaScript 数组。 您可能也对这些相关教程感兴趣： Lodash 教程， JavaScript 正则表达式， Node.js 教程， JavaScript 贪食蛇教程。