JavaScript 数组操作¶
数组是 JavaScript 中最常用的数据结构之一。它允许你存储和操作一组有序的数据。在本节中，我们将学习如何创建数组、遍历数组以及使用数组的常用方法。
1. 数组的创建¶
在 JavaScript 中，数组可以通过多种方式创建。最常见的方式是使用数组字面量 [] 或 Array 构造函数。
1.1 使用数组字面量创建数组¶
数组字面量是最简单、最常用的创建数组的方式。
// 创建一个包含三个元素的数组
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
1.2 使用 Array 构造函数创建数组¶
你也可以使用 Array 构造函数来创建数组。
// 使用 Array 构造函数创建一个包含三个元素的数组
let colors = new Array('red', 'green', 'blue');
console.log(colors); // 输出: ['red', 'green', 'blue']
1.3 创建空数组并动态添加元素¶
你可以先创建一个空数组，然后动态地向其中添加元素。
// 创建一个空数组
let numbers = [];
// 动态添加元素
numbers.push(1);
numbers.push(2);
numbers.push(3);
console.log(numbers); // 输出: [1, 2, 3]
2. 数组的遍历¶
遍历数组是访问数组中每个元素的常见操作。JavaScript 提供了多种遍历数组的方式。
2.1 使用 for 循环遍历数组¶
for 循环是最基本的遍历数组的方式。
let fruits = ['apple', 'banana', 'cherry'];
// 使用 for 循环遍历数组
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // 依次输出: 'apple', 'banana', 'cherry'
}
2.2 使用 forEach 方法遍历数组¶
forEach 是数组的一个方法，它允许你对数组中的每个元素执行一个函数。
let fruits = ['apple', 'banana', 'cherry'];
// 使用 forEach 方法遍历数组
fruits.forEach(function(fruit) {
console.log(fruit); // 依次输出: 'apple', 'banana', 'cherry'
});
2.3 使用 for...of 循环遍历数组¶
for...of 循环是 ES6 引入的一种新的遍历方式，它可以直接遍历数组中的元素。
let fruits = ['apple', 'banana', 'cherry'];
// 使用 for...of 循环遍历数组
for (let fruit of fruits) {
console.log(fruit); // 依次输出: 'apple', 'banana', 'cherry'
}
3. 数组的常用方法¶
JavaScript 提供了许多内置的数组方法，用于操作数组。以下是一些常用的数组方法。
3.1 push 和 pop 方法¶
push 方法用于向数组的末尾添加一个或多个元素，pop 方法用于移除并返回数组的最后一个元素。
let fruits = ['apple', 'banana'];
// 使用 push 方法添加元素
fruits.push('cherry');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
// 使用 pop 方法移除最后一个元素
let lastFruit = fruits.pop();
console.log(lastFruit); // 输出: 'cherry'
console.log(fruits); // 输出: ['apple', 'banana']
3.2 shift 和 unshift 方法¶
shift 方法用于移除并返回数组的第一个元素，unshift 方法用于向数组的开头添加一个或多个元素。
let fruits = ['apple', 'banana'];
// 使用 unshift 方法在数组开头添加元素
fruits.unshift('cherry');
console.log(fruits); // 输出: ['cherry', 'apple', 'banana']
// 使用 shift 方法移除第一个元素
let firstFruit = fruits.shift();
console.log(firstFruit); // 输出: 'cherry'
console.log(fruits); // 输出: ['apple', 'banana']
3.3 slice 和 splice 方法¶
slice 方法用于从数组中提取一部分元素并返回一个新数组，splice 方法用于从数组中添加或删除元素。
let fruits = ['apple', 'banana', 'cherry', 'date'];
// 使用 slice 方法提取部分元素
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 输出: ['banana', 'cherry']
// 使用 splice 方法删除元素并添加新元素
fruits.splice(1, 2, 'grape', 'kiwi');
console.log(fruits); // 输出: ['apple', 'grape', 'kiwi', 'date']
3.4 map 方法¶
map 方法用于对数组中的每个元素执行一个函数，并返回一个新数组。
let numbers = [1, 2, 3, 4];
// 使用 map 方法将数组中的每个元素乘以 2
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // 输出: [2, 4, 6, 8]
3.5 filter 方法¶
filter 方法用于创建一个新数组，其中包含通过指定函数测试的所有元素。
let numbers = [1, 2, 3, 4, 5, 6];
// 使用 filter 方法筛选出偶数
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // 输出: [2, 4, 6]
3.6 reduce 方法¶
reduce 方法用于对数组中的每个元素执行一个累加器函数，最终返回一个单一的值。
let numbers = [1, 2, 3, 4];
// 使用 reduce 方法计算数组中所有元素的总和
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 输出: 10
4. 练习题¶
4.1 简单练习¶
- 创建一个包含 5 个元素的数组，并使用
for循环遍历数组，打印每个元素。
4.2 中等练习¶
- 使用
map方法将一个包含数字的数组中的每个元素乘以 3，并返回一个新数组。
4.3 复杂练习¶
- 使用
reduce方法计算一个包含数字的数组中所有元素的乘积。
5. 总结¶
在本节中，我们学习了如何创建数组、遍历数组以及使用数组的常用方法。以下是本主题的关键点：
- 数组可以通过数组字面量
[]或Array构造函数创建。 - 遍历数组可以使用
for循环、forEach方法或for...of循环。 - 常用的数组方法包括
push、pop、shift、unshift、slice、splice、map、filter和reduce。 - 数组方法可以帮助你轻松地操作数组中的数据，执行各种复杂的操作。
通过掌握这些数组操作，你将能够更高效地处理 JavaScript 中的数据集合。