JavaScript 中的 Array(数组)对象是一种用来存储一系列值的容器,它可以包含任意类型的数据,包括数字、字符串、对象等等。通过使用数组对象,我们可以轻松地组织和处理数据,以及进行各种操作,比如查找、排序、过滤、迭代等等。
- 创建数组
在 JavaScript 中,我们可以通过多种方式来创建一个数组对象。
2.1 直接定义
最简单的创建数组的方式就是直接定义数组变量,并用方括号 [] 括起来的一组值来初始化数组,例如:
let arr = [1, 2, 3, 4, 5];
在这个例子中,我们定义了一个包含 5 个元素的数组,分别是 1、2、3、4、5。
2.2 构造函数
另一种创建数组的方式是使用 Array 构造函数来创建数组,例如:
let arr = new Array(1, 2, 3, 4, 5);
这个例子和上面的例子等价,它使用了 Array 构造函数来创建一个数组对象,并初始化了它的元素。
除了传入一组初始值外,我们还可以使用一个数字参数来指定数组的长度,例如:
let arr = new Array(5);
这个例子创建了一个长度为 5 的数组,但是数组中的元素都是 undefined。
2.3 Array.of 和 Array.from
在 ES6 中,JavaScript 提供了两个新的数组方法 Array.of 和 Array.from,用来创建数组。
Array.of 方法可以用来创建一个包含任意数量元素的数组,例如:
let arr = Array.of(1, 2, 3, 4, 5);
这个例子和直接定义数组变量的方式等价。
Array.from 方法可以用来将一个类数组对象或可迭代对象转换成数组,例如:
let arr = Array.from("hello");
// arr: ['h', 'e', 'l', 'l', 'o']
这个例子将一个字符串转换成了一个包含每个字符的数组。
数组元素的访问和修改
数组中的元素可以通过索引来访问和修改。在 JavaScript 中,数组的索引从 0 开始,也就是第一个元素的索引是 0,第二个元素的索引是 1,以此类推。
3.1 访问元素
我们可以使用方括号 [] 操作符来访问数组中的元素,例如:
let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 1
console.log(arr[2]); // 3
这个例子访问了数组中的第一个元素和第三个元素。
3.2 修改元素
我们也可以使用方括号操作符来修改数组中的元素,例如:
let arr = [1, 2, 3, 4, 5];
arr[0] = 6;
arr[2] = 7;
console.log(arr); // [6, 2, 7, 4, 5]
这个例子将数组中的第一个元素修改为 6,第三个元素修改为 7。
4. 数组的方法
JavaScript 的 Array 对象提供了很多实用的方法,用来操作和处理数组中的元素。下面我们将介绍一些常用的方法。
4.1 push 和 pop
push 方法可以在数组的末尾添加一个或多个元素,例如:
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
这个例子向数组中添加了一个元素 4。
pop 方法可以从数组的末尾删除一个元素,并返回被删除的元素,例如:
let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // [1, 2]
console.log(last); // 3
这个例子删除了数组中的最后一个元素 3,并将其保存在 last 变量中。
4.2 shift 和 unshift
shift 方法可以从数组的开头删除一个元素,并返回被删除的元素,例如:
let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // [2, 3]
console.log(first); // 1
这个例子删除了数组中的第一个元素 1,并将其保存在 first 变量中。
unshift 方法可以在数组的开头添加一个或多个元素,例如:
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
这个例子向数组中添加了一个元素 0。
4.3 splice
splice 方法可以用来添加、删除和替换数组中的元素。它接受三个参数:起始索引、删除数量和可选的新元素。例如:
let arr = [1, 2, 3, 4, 5];
arr.splice(2, 2, 6, 7);
console.log(arr); // [1, 2, 6, 7, 5]
这个例子从数组中删除了两个元素(从索引 2 开始,删除 2 个元素),并向数组中添加了两个新元素 6 和 7。
4.4 concat
concat 方法可以用来连接两个或多个数组,返回一个新的数组,例如:
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3); // [1, 2, 3, 4, 5, 6]
这个例子连接了两个数组 arr1 和 arr2,并将结果保存在一个新数组 arr3 中。
4.5 slice
slice 方法可以用来截取数组中的一部分
除了数组的基本操作之外,JavaScript还提供了一些高级数组操作方法。以下是一些常用的高级数组操作方法:
map()
map()方法创建一个新数组,其中的元素是原始数组中每个元素调用一个提供的函数后返回的结果。map()方法不会改变原始数组。
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]
filter()
filter()方法创建一个新数组,其中包含通过提供的函数测试的所有元素。filter()方法不会改变原始数组。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
reduce()
reduce()方法对数组中的所有元素执行一个指定的reducer函数,并将其结果累加到单个返回值中。reduce()方法不会改变原始数组。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15
forEach()
forEach()方法对数组中的每个元素执行一次提供的函数,该函数不返回任何内容。forEach()方法不会改变原始数组。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));
// 1
// 2
// 3
// 4
// 5
sort()
sort()方法对数组元素进行排序,并返回已排序的数组。sort()方法改变原始数组。
const fruits = ['banana', 'apple', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'grape', 'orange']
slice()
slice()方法返回一个新数组,其中包含原始数组的一部分。该方法不会改变原始数组。
const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(0, 2);
console.log(slicedNumbers); // [1, 2]
concat()
concat()方法将两个或多个数组合并成一个新数组,并返回新数组。concat()方法不会改变原始数组。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = arr1.concat(arr2);
console.log(combinedArr); // [1, 2, 3, 4, 5, 6]
以上是常用的一些高级数组操作方法,它们可以大大简化数组的操作,提高代码的效率。当然,还有许多其他的数组操作方法,可以根据实际需求选择使用。