JavaScript arrays

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

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

JavaScript 数组初始化

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

"use strict";

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

console.log(nums);

该示例在 JavaScript 中创建了一个简单的数组。

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

数组是使用方括号创建的。元素由逗号分隔。

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

JavaScript 数组索引

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

"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));

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

const e1 = nums[0];

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

nums[2] = 22;

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

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

使用indexOf 我们得到元素 1 的第一次出现。

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

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

$ nodejs array_index.js
1
22
0
5

JavaScript 数组基本操作

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

"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 方法。

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

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

const el1 = words.shift();

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

const el2 = words.pop();

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

$ nodejs basic_oper.js
[ 'pen', 'pencil', 'knife', 'chair' ]
pen
[ 'pencil', 'knife', 'chair' ]
chair
[ 'pencil', 'knife' ]

JavaScript 循环数组

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

"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 数组的方法。

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

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

for (let word of words) {

    console.log(word);
}

使用for of 循环，我们遍历数组的值。

for (let idx in words) {

    console.log(words[idx]);
}

使用for in 循环，我们遍历数组的索引。

var len = words.length;

for (let i = 0; i < len; i++) {

    console.log(words[i]);
}

这里我们使用类C语言的for循环来遍历数组。

var i = 0;

while (i < len) {

    console.log(words[i]);
    i++;
}

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

JavaScript 数组切片

slice方法返回数组部分的浅拷贝。该方法接受一个或两个参数，指定选择的索引。原始数组没有被修改。

"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);

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

const res = nums.slice(3);

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

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

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

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

在 JavaScript 中对数组进行排序

sort 方法对数组的元素进行就地排序并返回数组。默认排序顺序是根据 stringUnicode 代码点。 sort 方法采用定义排序顺序的可选函数。

"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);

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

nums.sort();

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

nums.reverse();

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

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

我们按年龄属性对人物对象数组进行排序。

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;
    }
});

我们按名称属性对人物对象数组进行排序。

$ 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 中，我们可以创建多维数组。

"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]);

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

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][2][0]);

这里我们从三维中获取一个值。

$ nodejs multi_dim.js
2
[ 33, 44, 55 ]
33
7
77

JavaScript 过滤数组

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

"use strict"

const nums = [2, -3, 4, 6, -1, 9, -7];

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

console.log(res);

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

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

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

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

JavaScript 数组映射

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

"use strict";

const a1 = ['dog', 'tree', 'smart'];

const a2 = a1.map(e => e.toUpperCase());
console.log(a2);

我们有一个单词数组。使用map 方法，我们将toUpperCase 方法应用于每个单词。

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

JavaScript 数组查找

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

"use strict";

const nums = [2, -3, 4, 6, 1, 23, 9, 7];

const e1 = nums.find(e => e > 10);
console.log(e1);

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

$ nodejs array_find.js
23

JavaScript 数组缩减

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

"use strict";

const nums = [2, 3, 4, 5, 6, 7];

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

console.log(res);

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

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

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

$ nodejs array_reduce.js
5040

在本文中，我们介绍了 JavaScript 数组。

列出所有 JavaScript 教程。