JavaScript 数组操作

数组的创建和初始化

使用数组字面量

创建一个数组最简单的方法是使用数组字面量。数组字面量是一个由逗号分隔的元素列表，这些元素被包含在一对方括号 [] 中。

let numbers = [1, 2, 3, 4, 5];

使用 Array 构造函数

除了使用数组字面量外，还可以使用 Array 构造函数来创建数组。构造函数可以接受多个参数或一个表示数组长度的数字。

// 接受多个参数
let fruits = new Array('apple', 'banana', 'cherry');

// 接受一个表示数组长度的数字
let emptyArray = new Array(10); // 创建一个包含10个 undefined 的数组

访问和修改数组元素

访问数组元素

数组元素可以通过索引来访问，索引从 0 开始。通过索引访问数组元素就像访问普通变量一样简单。

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 输出 "apple"
console.log(fruits[2]); // 输出 "cherry"

修改数组元素

通过索引也可以修改数组中的元素。

let fruits = ['apple', 'banana', 'cherry'];
fruits[1] = 'orange';
console.log(fruits); // 输出 ["apple", "orange", "cherry"]

数组的属性和方法

length 属性

length 属性用于获取或设置数组的长度。当设置一个新的长度时，数组会根据新长度进行扩展或收缩。

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 输出 3

fruits.length = 2;
console.log(fruits); // 输出 ["apple", "banana"]

fruits.length = 5;
console.log(fruits); // 输出 ["apple", "banana", "cherry", undefined, undefined]

push 和 pop 方法

push 方法可以在数组末尾添加一个或多个元素，并返回新的数组长度。

let fruits = ['apple', 'banana', 'cherry'];
fruits.push('orange');
console.log(fruits); // 输出 ["apple", "banana", "cherry", "orange"]

pop 方法可以从数组末尾删除一个元素，并返回该元素。

let fruits = ['apple', 'banana', 'cherry', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 输出 "orange"
console.log(fruits); // 输出 ["apple", "banana", "cherry"]

unshift 和 shift 方法

unshift 方法可以在数组开头添加一个或多个元素，并返回新的数组长度。

let fruits = ['apple', 'banana', 'cherry'];
fruits.unshift('orange');
console.log(fruits); // 输出 ["orange", "apple", "banana", "cherry"]

shift 方法可以从数组开头删除一个元素，并返回该元素。

let fruits = ['orange', 'apple', 'banana', 'cherry'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 输出 "orange"
console.log(fruits); // 输出 ["apple", "banana", "cherry"]

slice 和 splice 方法

slice 方法用于提取数组的一部分，并返回一个新的数组。

let fruits = ['apple', 'banana', 'cherry', 'orange'];
let slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 输出 ["banana", "cherry"]

splice 方法用于添加或删除数组中的元素，并返回被删除的元素。

let fruits = ['apple', 'banana', 'cherry', 'orange'];
let removedFruits = fruits.splice(1, 2);
console.log(removedFruits); // 输出 ["banana", "cherry"]
console.log(fruits); // 输出 ["apple", "orange"]

forEach 方法

forEach 方法用于遍历数组中的每个元素，并执行提供的函数。

// www.javascriptcn.com code example
let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {
    console.log(fruit);
});
// 输出：
// apple
// banana
// cherry

map 方法

map 方法用于创建一个基于原数组中每个元素的新数组。

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbers); // 输出 [1, 4, 9, 16, 25]

filter 方法

filter 方法用于创建一个基于条件的新数组。

let numbers = [1, 2, 3, 4, 5];

let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4]

reduce 方法

reduce 方法用于将数组缩减为单个值。

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function(total, number) {
    return total + number;
}, 0);

console.log(sum); // 输出 15

数组排序

sort 方法

sort 方法用于对数组元素进行排序。默认情况下，它将元素转换为字符串并按照字符编码顺序进行排序。

let numbers = [4, 2, 5, 1, 3];
numbers.sort();
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

let fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // 输出 ["apple", "banana", "cherry"]

可以通过提供一个比较函数来自定义排序规则。

let numbers = [4, 2, 5, 1, 3];

numbers.sort(function(a, b) {
    return a - b;
});

console.log(numbers); // 输出 [1, 2, 3, 4, 5]

多维数组

创建多维数组

多维数组是指数组的元素也是数组。

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

访问多维数组元素

可以通过多次索引访问多维数组中的元素。

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[0][0]); // 输出 1
console.log(matrix[2][2]); // 输出 9

遍历多维数组

遍历多维数组需要嵌套循环。

// www.javascriptcn.com code example
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

matrix.forEach(function(row) {
    row.forEach(function(cell) {
        console.log(cell);
    });
});
// 输出：
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9

数组去重

使用 Set 去重

ES6 引入了 Set 数据结构，它只允许存储唯一的值，因此可以用来去重。

function unique(arr) {
    return [...new Set(arr)];
}

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = unique(numbers);
console.log(uniqueNumbers); // 输出 [1, 2, 3, 4, 5]

使用 filter 去重

也可以通过 filter 方法实现去重。

// www.javascriptcn.com code example
function unique(arr) {
    let seen = {};
    return arr.filter(function(item) {
        return seen.hasOwnProperty(item) ? false : (seen[item] = true);
    });
}

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = unique(numbers);
console.log(uniqueNumbers); // 输出 [1, 2, 3, 4, 5]

以上便是关于 JavaScript 数组操作的详细介绍。数组是 JavaScript 中非常重要的数据结构之一，在日常开发中广泛使用。熟练掌握数组的各种操作和方法对于提高编程能力至关重要。