JavaScript 数组及其常用方法

1. JavaScript 数组概述

数组是 JavaScript 中用于存储多个值的数据结构。它可以存储不同类型的元素，并提供强大的方法来操作和管理数据。数组的元素按索引（从 0 开始）进行访问。

2. 数组的创建方式

1) 使用数组字面量

let fruits = ["苹果", "香蕉", "橘子"];

2) 使用 Array 构造函数

let numbers = new Array(5);  // 创建一个长度为 5 的空数组
let colors = new Array("红色", "蓝色", "绿色");

3) 空数组

let emptyArray = [];

3. 数组的遍历方法

1) for 循环遍历

let fruits = ["苹果", "香蕉", "橘子"];
for (let i = 0; i < fruits.length; i++) {console.log(fruits[i]);
}

2) for…of 循环

for (let fruit of fruits) {console.log(fruit);
}

3) for…in循环

for (let index in fruits) {console.log(fruits[index]);
}

4. 常用数组方法

方法	描述	示例
join()	将数组中的所有元素连接成一个字符串。	fruits.join(", ") // "苹果, 香蕉, 橘子"
push()	向数组末尾添加一个或多个元素，返回新数组的长度。	fruits.push("葡萄") // 返回新长度 4
pop()	移除数组末尾的元素，返回被移除的元素。	fruits.pop() // 返回 "橘子"
shift()	移除数组开头的元素，返回被移除的元素。	fruits.shift() // 返回 "苹果"
unshift()	在数组开头添加一个或多个元素，返回新数组的长度。	fruits.unshift("菠萝") // 返回新长度 4
sort()	对数组元素进行排序，默认按字符编码顺序。	numbers.sort() // [11, 21, 300, 34, 43]
reverse()	反转数组中元素的顺序。	fruits.reverse() // ["橘子", "香蕉", "苹果"]
concat()	合并两个或多个数组，返回新数组。	fruits.concat(["葡萄"]) // ["苹果", "香蕉", "橘子", "葡萄"]
slice()	返回数组中指定开始到结束之间的元素，不修改原数组。	fruits.slice(0, 2) // ["苹果", "香蕉"]
splice()	删除或替换数组中的元素，并可在指定位置添加新元素。	fruits.splice(1, 1, "西瓜") // ["苹果", "西瓜", "橘子"]
indexOf()	返回数组中某个元素的第一个索引，未找到时返回 -1。	fruits.indexOf("香蕉") // 返回 1
lastIndexOf()	返回数组中某个元素的最后一个索引，未找到时返回 -1。	fruits.lastIndexOf("橘子") // 返回 2
includes()	检测数组是否包含某个元素，可以找到 NaN 值。	[1, 2, NaN].includes(NaN) // true
toString()	将数组转换为逗号分隔的字符串。	[1, 2, 3].toString() // "1,2,3"
copyWithin()	在数组内部复制元素到其他位置，不改变数组长度。	[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
map()	返回一个新数组，每个元素是原数组元素调用函数后的结果。	[1, 2, 3].map(x => x * 2) // [2, 4, 6]
filter()	返回一个新数组，包含通过函数测试的所有元素。	[1, 2, 3].filter(x => x > 1) // [2, 3]# 1/10
fill()	用指定值填充数组的所有元素。	[1, 2, 3].fill(0) // [0, 0, 0]
every()	检测数组中的所有元素是否都通过了指定函数的测试。	[1, 2, 3].every(x => x > 0) // true
some()	检测数组中是否至少有一个元素通过了指定函数的测试。	[1, 2, 3].some(x => x > 2) // true
flat()	将多维数组扁平化为一维数组。	[1, [2, [3]]].flat(2) // [1, 2, 3]
flatMap()	映射每个元素然后将结果扁平化为一个新数组。	[1, 2, 3].flatMap(x => [x, x * 2]) // [1, 2, 2, 4, 3, 6]

ps:sort()方法；NaN：Not a Number；flat(Infinity)多维数组转一维。

5. 示例代码

let fruits = ["苹果", "香蕉", "橘子"];// join() 示例
console.log(fruits.join(", "));  // 输出: "苹果, 香蕉, 橘子"// push() 和 pop() 示例
fruits.push("葡萄");
console.log(fruits);  // 输出: ["苹果", "香蕉", "橘子", "葡萄"]
console.log(fruits.pop());  // 输出: "葡萄"// shift() 和 unshift() 示例
fruits.shift();
console.log(fruits);  // 输出: ["香蕉", "橘子"]
fruits.unshift("菠萝");
console.log(fruits);  // 输出: ["菠萝", "香蕉", "橘子"]// sort() 和 reverse() 示例
let numbers = [3, 1, 4, 1, 5, 9];
numbers.sort();
console.log(numbers);  // 输出: [1, 1, 3, 4, 5, 9]
numbers.reverse();
console.log(numbers);  // 输出: [9, 5, 4, 3, 1, 1]// slice() 和 splice() 示例
let selectedFruits = fruits.slice(1, 3);
console.log(selectedFruits);  // 输出: ["香蕉", "橘子"]
fruits.splice(1, 1, "西瓜");
console.log(fruits);  // 输出: ["菠萝", "西瓜", "橘子"]// indexOf() 和 lastIndexOf() 示例
console.log(fruits.indexOf("西瓜"));  // 输出: 1
console.log(fruits.lastIndexOf("橘子"));  // 输出: 2// includes() 示例
console.log(fruits.includes("香蕉"));  // 输出: true
console.log([NaN].includes(NaN));      // 输出: true// toString() 示例
console.log(fruits.toString());        // 输出: "苹果,香蕉,橘子"// copyWithin() 示例
let numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3);
console.log(numbers);                  // 输出: [4, 5, 3, 4, 5]// map() 示例
let doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);           // 输出: [8, 10, 6, 8, 10]// filter() 示例
let filteredNumbers = doubledNumbers.filter(num => num > 8);
console.log(filteredNumbers);          // 输出: [10, 10]// fill() 示例
let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4);
console.log(arr);  // 输出: [1, 0, 0, 0, 5]// every() 示例
let allPositive = arr.every(num => num >= 0);
console.log(allPositive);  // 输出: true// some() 示例
let hasZero = arr.some(num => num === 0);
console.log(hasZero);  // 输出: true// flat() 示例
let nestedArr = [1, [2, [3, [4]]]];
let flatArr = nestedArr.flat(2);
console.log(flatArr);  // 输出: [1, 2, 3, [4]]// flatMap() 示例
let mappedArr = [1, 2, 3].flatMap(x => [x, x * 2]);
console.log(mappedArr);  // 输出: [1, 2, 2, 4, 3, 6]

---

凡是过去，皆为序章；凡是未来，皆有可期。