js array数组|极客笔记

js array数组

1. 介绍

数组（Array）是JavaScript中最常用的一种数据结构，用于存储多个值。它是一种有序列表，可以包含任意类型的数据。在JavaScript中，数组是一种特殊的对象，可以通过索引（Index）访问和操作数组元素。

在本文中，我们将详细介绍JavaScript数组的基本用法，包括创建数组、访问和修改数组元素、数组的常用方法等。

2. 创建数组

在JavaScript中，可以使用多种方式创建一个数组。以下是几种常见的创建数组的方式：

2.1 使用数组字面量

数组字面量是最常见的创建数组的方式之一。使用一对方括号（[]）来表示数组，可以在方括号中使用逗号分隔多个元素，如下所示：

let array1 = []; // 创建一个空数组
let array2 = [1, 2, 3]; // 创建一个包含三个整数的数组
let array3 = ['apple', 'banana', 'orange']; // 创建一个包含三个字符串的数组

2.2 使用Array构造函数

JavaScript中还提供了Array构造函数，可以使用它来创建一个数组。可以使用new Array()来创建一个空数组，或者使用new Array(element1, element2, ...)来创建一个包含指定元素的数组，如下所示：

let array1 = new Array(); // 创建一个空数组
let array2 = new Array(1, 2, 3); // 创建一个包含三个整数的数组
let array3 = new Array('apple', 'banana', 'orange'); // 创建一个包含三个字符串的数组

2.3 使用Array.from方法

在ES6中，JavaScript引入了Array.from方法，可以根据一个类似数组的对象或可迭代对象创建一个新的数组。该方法接收两个参数，第一个参数是需要转换为数组的对象，第二个参数是一个映射函数，用于对每个元素进行处理。例如：

let array1 = Array.from('hello'); // 创建一个包含字符串每个字符的数组
let array2 = Array.from([1, 2, 3], x => x * 2); // 创建一个每个元素都是原数组元素乘以2的新数组

3. 访问和修改数组元素

数组中的元素可以通过索引访问和修改。数组的索引从0开始，通过数组名称后加方括号加索引的方式来访问数组元素。例如：

let fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // 输出: "apple"
console.log(fruits[1]); // 输出: "banana"
console.log(fruits[2]); // 输出: "orange"

fruits[1] = 'grape'; // 修改索引为1的元素
console.log(fruits); // 输出: ["apple", "grape", "orange"]

4. 数组的常用方法

JavaScript数组提供了许多常用的方法，用于对数组进行操作和处理。下面介绍几个常用的数组方法：

4.1 push和pop

push方法用于向数组末尾添加一个或多个元素，pop方法用于移除并返回数组的最后一个元素。例如：

let fruits = ['apple', 'banana'];

fruits.push('orange'); // 添加一个元素到末尾
console.log(fruits); // 输出: ["apple", "banana", "orange"]

let removedFruit = fruits.pop(); // 移除并返回最后一个元素
console.log(removedFruit); // 输出: "orange"
console.log(fruits); // 输出: ["apple", "banana"]

4.2 shift和unshift

shift方法用于移除数组的第一个元素并返回该元素，unshift方法用于在数组开头添加一个或多个元素。例如：

let fruits = ['apple', 'banana'];

let removedFruit = fruits.shift(); // 移除并返回第一个元素
console.log(removedFruit); // 输出: "apple"
console.log(fruits); // 输出: ["banana"]

fruits.unshift('orange'); // 在开头添加一个元素
console.log(fruits); // 输出: ["orange", "banana"]

4.3 slice和splice

slice方法用于从数组中复制一段元素组成一个新的数组，并返回该新数组。splice方法用于从数组中删除、插入或替换元素，并返回被删除的元素数组。例如：

let fruits = ['apple', 'banana', 'orange', 'grape'];

let newFruits = fruits.slice(1, 3); // 复制索引为1到2的元素，不包括结束索引3
console.log(newFruits); // 输出: ["banana", "orange"]

let removedFruits = fruits.splice(1, 2, 'pear', 'melon'); // 删除索引为1到2的元素，并插入两个新元素
console.log(removedFruits); // 输出: ["banana", "orange"]
console.log(fruits); // 输出: ["apple", "pear", "melon", "grape"]

4.4 concat和join

concat方法用于合并多个数组，并返回一个新的数组，原数组不会被修改。join方法用于将数组的所有元素连接成一个字符串。例如：

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let newArray = array1.concat(array2); // 合并两个数组
console.log(newArray); // 输出: [1, 2, 3, 4, 5, 6]

let str = newArray.join('-'); // 使用连字符连接所有元素
console.log(str); // 输出: "1-2-3-4-5-6"

4.5 forEach和map

forEach方法用于遍历数组的每个元素并执行一个回调函数，没有返回值。map方法用于遍历数组的每个元素并执行一个回调函数，返回一个新的数组。例如：

let array = [1, 2, 3];

array.forEach((value, index) => {
    console.log(`索引 ${index}的元素是$ {value}`);
});

let newArray = array.map(x => x * 2);
console.log(newArray); // 输出: [2, 4, 6]