数组是 JavaScript 中处理和操作多个值的主要数据结构之一。了解数组的创建、操作方法以及一些高级特性，可以帮助你更高效地处理数据集合。
8. 数组
8.1 数组的基本概念
-
创建数组
-
数组字面量（Array Literal）
- 定义：最常见的创建数组的方式，通过
[]创建。
示例：
let fruits = ['apple', 'banana', 'cherry']; console.log(fruits); // ['apple', 'banana', 'cherry'] - 定义：最常见的创建数组的方式，通过
-
Array构造函数- 定义：通过
new Array()创建数组。
示例：
let numbers = new Array(1, 2, 3); console.log(numbers); // [1, 2, 3]- 注意：
new Array()可以接受一个参数表示数组的长度，但不推荐这种用法。
示例：
let emptyArray = new Array(5); console.log(emptyArray.length); // 5 - 定义：通过
-
Array.of()- 定义：用于创建包含给定元素的新数组实例。
示例：
let array = Array.of(1, 2, 3); console.log(array); // [1, 2, 3] -
Array.from()- 定义：用于从类数组对象或可迭代对象创建数组。
示例：
let str = 'hello'; let chars = Array.from(str); console.log(chars); // ['h', 'e', 'l', 'l', 'o']
-
8.2 数组的基本操作
-
访问和修改元素
- 定义：通过索引访问和修改数组中的元素。
示例：
let colors = ['red', 'green', 'blue']; console.log(colors[0]); // red colors[1] = 'yellow'; console.log(colors); // ['red', 'yellow', 'blue'] -
数组长度
- 定义：通过
length属性获取或设置数组的长度。
示例：
let numbers = [1, 2, 3]; console.log(numbers.length); // 3 numbers.length = 5; console.log(numbers); // [1, 2, 3, <2 empty items>] - 定义：通过
8.3 常用数组方法
-
添加和删除元素
-
push()- 定义：在数组末尾添加一个或多个元素，并返回新数组的长度。
示例：
let numbers = [1, 2, 3]; numbers.push(4); console.log(numbers); // [1, 2, 3, 4] -
pop()- 定义：从数组末尾删除一个元素，并返回被删除的元素。
示例：
let numbers = [1, 2, 3, 4]; let last = numbers.pop(); console.log(last); // 4 console.log(numbers); // [1, 2, 3] -
unshift()- 定义：在数组开头添加一个或多个元素，并返回新数组的长度。
示例：
let numbers = [2, 3, 4]; numbers.unshift(1); console.log(numbers); // [1, 2, 3, 4] -
shift()- 定义：从数组开头删除一个元素，并返回被删除的元素。
示例：
let numbers = [1, 2, 3, 4]; let first = numbers.shift(); console.log(first); // 1 console.log(numbers); // [2, 3, 4]
-
-
查找和排序
-
indexOf()- 定义：返回指定元素在数组中第一次出现的位置，如果未找到，则返回
-1。
示例：
let fruits = ['apple', 'banana', 'cherry']; console.log(fruits.indexOf('banana')); // 1 - 定义：返回指定元素在数组中第一次出现的位置，如果未找到，则返回
-
includes()- 定义：判断数组是否包含指定的元素，返回布尔值。
示例：
let fruits = ['apple', 'banana', 'cherry']; console.log(fruits.includes('banana')); // true console.log(fruits.includes('orange')); // false -
sort()- 定义：对数组进行排序并返回排序后的数组。
示例：
let numbers = [4, 2, 3, 1]; numbers.sort(); console.log(numbers); // [1, 2, 3, 4] -
reverse()- 定义：反转数组中元素的顺序并返回数组。
示例：
let numbers = [1, 2, 3, 4]; numbers.reverse(); console.log(numbers); // [4, 3, 2, 1]
-
-
数组的转换和映射
-
map()- 定义：对数组中的每个元素执行指定的函数，并返回包含结果的新数组。
示例：
let numbers = [1, 2, 3]; let doubled = numbers.map(x => x * 2); console.log(doubled); // [2, 4, 6] -
filter()- 定义：根据指定条件过滤数组元素，并返回符合条件的新数组。
示例：
let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(x => x % 2 === 0); console.log(evenNumbers); // [2, 4] -
reduce()- 定义：对数组中的每个元素执行指定的函数，将其归并为单一的值。
示例：
let numbers = [1, 2, 3, 4]; let sum = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 10 -
forEach()- 定义：对数组中的每个元素执行指定的函数，无返回值。
示例：
let numbers = [1, 2, 3]; numbers.forEach(x => console.log(x)); // 输出： // 1 // 2 // 3
-
-
数组的分割和拼接
-
slice()- 定义：返回数组中指定开始和结束位置之间的元素的新数组。
示例：
let numbers = [1, 2, 3, 4, 5]; let sliced = numbers.slice(1, 4); console.log(sliced); // [2, 3, 4] -
splice()- 定义：对数组进行添加、删除或替换操作，并返回被删除的元素。
示例：
let numbers = [1, 2, 3, 4]; let removed = numbers.splice(1, 2, 5, 6); console.log(removed); // [2, 3] console.log(numbers); // [1, 5, 6, 4] -
concat()- 定义：合并两个或多个数组，并返回一个新数组。
示例：
let numbers1 = [1, 2]; let numbers2 = [3, 4]; let combined = numbers1.concat(numbers2); console.log(combined); // [1, 2, 3, 4]
-
-
数组的遍历
-
some()- 定义：测试数组中是否至少有一个元素满足指定条件，返回布尔值。
示例：
let numbers = [1, 2, 3, 4]; let hasEven = numbers.some(x => x % 2 === 0); console.log(hasEven); // true -
every()- 定义：测试数组中是否所有元素都满足指定条件，返回布尔
-
值。
**示例**：
```javascript
let numbers = [2, 4, 6];
let allEven = numbers.every(x => x % 2 === 0);
console.log(allEven); // true
```
-
find()- 定义：返回数组中第一个满足指定条件的元素，找不到则返回
undefined。
示例：
let numbers = [1, 2, 3, 4]; let firstEven = numbers.find(x => x % 2 === 0); console.log(firstEven); // 2 - 定义：返回数组中第一个满足指定条件的元素，找不到则返回
-
findIndex()- 定义：返回数组中第一个满足指定条件的元素的索引，找不到则返回
-1。
示例：
let numbers = [1, 2, 3, 4]; let index = numbers.findIndex(x => x % 2 === 0); console.log(index); // 1 - 定义：返回数组中第一个满足指定条件的元素的索引，找不到则返回
8.4 数组的高级特性
-
数组的扁平化
-
flat()- 定义：将多维数组扁平化为一维数组。
示例：
let nested = [1, [2, [3, [4]]]]; let flat = nested.flat(2); console.log(flat); // [1, 2, 3, [4]] -
flatMap()- 定义：先使用映射函数映射每个元素，再将结果扁平化为一维数组。
示例：
let numbers = [1, 2, 3]; let doubledAndFlattened = numbers.flatMap(x => [x, x * 2]); console.log(doubledAndFlattened); // [1, 2, 2, 4, 3, 6]
-
-
数组的填充
-
fill()- 定义：用指定的值填充数组中的所有元素（可指定起始和结束索引）。
示例：
let array = [1, 2, 3, 4]; array.fill(0, 2, 4); console.log(array); // [1, 2, 0, 0]
-
-
数组的生成
-
from()- 定义：从类数组对象或可迭代对象创建数组。
示例：
let str = 'hello'; let chars = Array.from(str); console.log(chars); // ['h', 'e', 'l', 'l', 'o'] -
keys()- 定义：返回一个包含数组索引的迭代器。
示例：
let array = ['a', 'b', 'c']; for (let index of array.keys()) { console.log(index); } // 输出： // 0 // 1 // 2 -
values()- 定义：返回一个包含数组值的迭代器。
示例：
let array = ['a', 'b', 'c']; for (let value of array.values()) { console.log(value); } // 输出： // a // b // c -
entries()- 定义：返回一个包含数组索引和对应值的迭代器。
示例：
let array = ['a', 'b', 'c']; for (let [index, value] of array.entries()) { console.log(index, value); } // 输出： // 0 'a' // 1 'b' // 2 'c'
-
9. 总结
- 数组的创建：包括数组字面量、
Array构造函数、Array.of()和Array.from()。 - 数组的基本操作：访问和修改元素、获取数组长度等。
- 常用数组方法：包括添加、删除、查找、排序、转换和映射等方法。
- 数组的高级特性：包括扁平化、填充、生成和遍历等功能。
掌握数组的这些概念和方法将使你能够更有效地处理和操作数据集合。接下来，你可以学习 DOM 操作，了解如何通过 JavaScript 操作网页上的元素和内容。
扫一扫
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
