Javascript 基础之 Array 对象
Array 对象支持在单个变量名下存储多个元素,并具有执行常见数组操作的成员。参考文档
一、创建数组
1.使用数组字面量
let arr = [1, 2, 3, 4, 5];
2.使用 Array()
构造函数
let arr = new Array(5); // [ , , , , ]
let arr = new Array(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
3.使用 Array.of()
方法
这个方法创建一个具有可变数量参数的新数组实例。
let arr = Array.of(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
4.使用 Array.from()
方法
将类数组对象或可迭代对象转换为真正的数组
let arr = Array.from([1, 2, 3, 4, 5]); // [1, 2, 3, 4, 5]
let arr = Array.from("12345"); // ['1', '2', '3', '4', '5']
let arr = Array.from({ length: 5 }); // [ , , , , ]
let arr = Array.from({ length: 5 }, () => 0); // [0, 0, 0, 0, 0]
let arr = Array.from({ length: 5 }, (value, index) => index); // [0, 1, 2, 3, 4]
5. 使用扩展运算符(spread operator)
将一个数组或可迭代对象展开到单个元素。
let arr2 = [..."12345"]; // ['1', '2', '3', '4', '5']
6.使用 Array() 构造函数和 apply() 方法
const arr = Array.apply(null, [1, 2, 3]); // [1, 2, 3]
二、属性与方法
1.静态方法
Array.from()
: 从数组类对象或可迭代对象创建一个新的 Array 实例Array.of()
: 创建一个新的 Array 实例,具有可变数量的参数,而不管参数的数量或类型。Array.isArray()
: 返回一个布尔值,表示传递的值是否是一个数组。
2.实例属性
length
: 数组的长度,即元素的个数。constructor
: 创建实例对象的构造函数。对于 Array 实例,初始值是 Array 构造函数。
let arr = new Array();
arr.length; // 0
arr.constructor; // Array
3.实例方法
Array.prototype.at()
返回给定索引处的数组元素。接受从最后一项往回计算的负整数。
let arr = [1, 2, 3, 4, 5];
arr.at(2); // 3
Array.prototype.concat()
返回一个新的数组,包含两个或多个数组的所有元素。
let arr = [1, 2];
let newArr = arr.concat([3, 4, 5]); //[1,2,3,4,5]
Array.prototype.copyWithin()
在当前数组中,将指定的元素从一个位置复制到另一个位置。
let arr = [1, 2, 3, 4, 5];
// copyWithin(target, start, end)
//将数组中索引为1到2的元素复制到索引为0的元素中
arr.copyWithin(0, 1, 3); // [2, 3, 3, 4, 5]
Array.prototype.entries()
返回一个由数组元素的索引和值组成的数组的迭代器对象。
let arr = [1, 2, 3, 4, 5];
let eArr = arr.entries();
for (let [index, value] of eArr) {
console.log(index, value); // 0 1 , 1 2 , 2 3 , 3 4 , 4 5
}
Array.prototype.every()
返回一个布尔值,表示是否为数组中的每个元素都满足指定的条件。
let arr = [1, 2, 3, 4, 5];
let result = arr.every((value, index, arr) => value > 0);
console.log(result); // true
Array.prototype.fill()
用静态值填充当前数组中从开始索引到结束索引的所有元素。
let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3); // [1, 0, 0, 4, 5]
new Array(5).fill(8); // [8, 8, 8, 8, 8]
Array.prototype.filter()
返回一个由通过测试的数组元素组成的新数组。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter((value, index, arr) => value > 2);
console.log(newArr); // [3, 4, 5]
Array.prototype.find()
返回数组中第一个通过测试的元素的值。如果数组中没有元素通过测试,则返回 undefined。
let arr = [1, 2, 3, 4, 5];
let result = arr.find((value, index, arr) => value > 2);
console.log(result); // 3
Array.prototype.findIndex()
返回数组中第一个通过测试的元素的索引。如果数组中没有元素通过测试,则返回 -1。
let arr = [1, 2, 3, 4, 5];
let result = arr.findIndex((value, index, arr) => value > 2);
console.log(result); // 2
Array.prototype.findLast()
返回数组中最后一个通过测试的元素的值。如果数组中没有元素通过测试,则返回 undefined。
let arr = [1, 2, 3, 4, 5];
let result = arr.findLast((value, index, arr) => value > 2);
console.log(result); // 5
Array.prototype.findLastIndex()
返回数组中最后一个通过测试的元素的索引。如果数组中没有元素通过测试,则返回 -1。
let arr = [1, 2, 3, 4, 5];
let result = arr.findLastIndex((value, index, arr) => value > 2);
console.log(result); // 4
Array.prototype.flat()
返回一个新数组,所有子数组元素递归地连接到其中,直到指定的深度。
let arr = [1, 2, [3, 4, [5, 6]]];
let newArr1 = arr.flat(); // [1, 2, 3, 4, [5, 6]]
let newArr2 = arr.flat(2); // [1, 2, 3, 4, 5, 6]
let newArr3 = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]
Array.prototype.flatMap()
对调用数组的每个元素调用给定的回调函数,然后将结果展平一层,返回一个新数组。
let arr = [1, 2, [3, 4, [5, 6]]];
let newArr = arr.flatMap((value, index, arr) => value);
console.log(newArr); // [1, 2, 3, 4, [5, 6]]
Array.prototype.forEach()
对调用数组中的每个元素调用给定的函数。
let arr = [1, 2, 3, 4, 5];
arr.forEach((value, index, arr) => console.log(value, index, arr));
Array.prototype.includes()
返回一个布尔值,表示是否包含给定的值。
let arr = [1, 2, 3, 4, 5];
let result = arr.includes(3);
console.log(result); // true
Array.prototype.indexOf()
返回给定值在数组中的第一个索引值,如果值不存在返回 -1。
let arr = [1, 2, 3, 4, 5];
let result = arr.indexOf(3);
console.log(result); // 2
Array.prototype.join()
返回一个字符串,所有数组元素用指定的分隔符连接。
let arr = [1, 2, 3, 4, 5];
let result = arr.join("-");
console.log(result); // 1-2-3-4-5
Array.prototype.keys()
返回一个由数组元素的索引组成的数组的迭代器对象。
let arr = [1, 2, 3, 4, 5];
let eArr = arr.keys();
for (let index of eArr) {
console.log(index); // 0, 1, 2, 3, 4
}
Array.prototype.lastIndexOf()
返回给定值在数组中的最后一个索引值,如果值不存在返回 -1。
let arr = [1, 2, 3, 4, 5];
let result = arr.lastIndexOf(3);
console.log(result); // 2
Array.prototype.map()
返回一个新数组,新数组中的元素为原数组中每个元素调用给定函数的结果。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map((value, index, arr) => value * 2);
console.log(newArr); // [2, 4, 6, 8, 10]
Array.prototype.pop()
返回并删除数组的最后一个元素。
let arr = [1, 2, 3, 4, 5];
let result = arr.pop();
console.log(result); // 5
Array.prototype.push()
向数组末尾添加一个或多个元素,并返回新数组的长度。
let arr = [1, 2, 3, 4, 5];
let result = arr.push(6, 7, 8);
console.log(result); // 8
Array.prototype.reduce()
对数组的每个元素(从左到右)执行用户提供的“reducer”回调函数,将其简化为单个值。
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((prev, curr, index, arr) => prev + curr);
console.log(result); // 15
Array.prototype.reduceRight()
对数组的每个元素(从右到左)执行用户提供的“reducer”回调函数,将其简化为单个值。
let arr = [1, 2, 3, 4, 5];
let result = arr.reduceRight((prev, curr, index, arr) => prev + curr);
console.log(result); // 15
Array.prototype.reverse()
就地反转数组中元素的顺序。
let arr = [1, 2, 3, 4, 5];
let result = arr.reverse();
console.log(result); // [5, 4, 3, 2, 1]
Array.prototype.shift()
将数组的第一个元素从数组中移除,并返回该元素。
let arr = [1, 2, 3, 4, 5];
let result = arr.shift();
console.log(result); // 1
Array.prototype.slice()
返回一个新数组,该数组由原数组中从 start(包含)到 end(不包含)的元素组成。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3);
console.log(newArr); // [2, 3]
Array.prototype.some()
如果数组中至少有一个元素通过测试,则返回 true,否则返回 false。
let arr = [1, 2, 3, 4, 5];
let result = arr.some((value, index, arr) => value > 2);
console.log(result); // true
Array.prototype.sort()
在原地对数组进行排序。
let arr = [1, 2, 3, 4, 5];
let result = arr.sort((a, b) => b - a);
console.log(result); // [5, 4, 3, 2, 1]
Array.prototype.splice()
在数组中删除或替换元素,然后返回删除的元素。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.splice(1, 2);
let newArr2 = arr.splice(0, 2, 10, 20);
console.log(newArr); // [2, 3]
console.log(arr); // [10, 20, 3,4,5]
Array.prototype.toLocaleString()
返回一个表示调用数组及其元素的本地化字符串,使用当前语言和区域设置。重写 Object.prototype.toLocaleString()
方法。
let arr = [1, 2, 3, 4, 5];
let result = arr.toLocaleString();
console.log(result); // "1,2,3,4,5"
Array.prototype.toReversed()
返回一个新数组,该数组的元素顺序被反转,但不改变原始数组。
let arr = [1, 2, 3, 4, 5];
let result = arr.toReversed();
console.log(arr); // [1, 2, 3, 4, 5]
console.log(result); // [5, 4, 3, 2, 1]
Array.prototype.toSorted()
返回一个新数组,该数组的元素按升序排列,但不改变原始数组。
let arr = [5, 2, 1, 3, 4];
let result = arr.toSorted();
console.log(result); // [1, 2, 3, 4, 5]
Array.prototype.toSpliced()
返回一个新数组,该数组的元素按给定的索引位置插入元素,但不改变原始数组。
let arr = [1, 2, 3, 4, 5];
let result = arr.toSpliced(0, 2, 10, 20);
console.log(result); // [10, 20, 3, 4, 5]
Array.prototype.toString()
返回一个字符串,表示调用数组及其元素的字符串值。重写Object.prototype.toString()
方法。
let arr = [1, 2, 3, 4, 5];
let result = arr.toString();
console.log(result); // "1,2,3,4,5"
Array.prototype.unshift()
将一个或多个元素添加到数组的开头,并返回数组的新长度。
let arr = [1, 2, 3, 4, 5];
let result = arr.unshift(0);
console.log(result); // 6
console.log(arr); // [0, 1, 2, 3, 4, 5]
Array.prototype.values()
返回一个由数组元素值组成的数组的迭代器对象。
let arr = [1, 2, 3, 4, 5];
let eArr = arr.values();
for (let value of eArr) {
console.log(value); // 1, 2, 3, 4, 5
}
Array.prototype.with()
返回一个新数组,其中给定索引处的元素替换为给定值,而不改变原始数组。
let arr = [1, 2, 3, 4, 5];
let result = arr.with(2, 10);
console.log(result); // [1, 2, 10, 4, 5]
Array.prototype[Symbol.iterator]
Array.prototype[Symbol.iterator] 是一个内置的符号方法,它返回一个迭代器对象,用于遍历数组中的元素。这个方法可以被用于遍历数组中的元素,例如使用 for...of 循环。默认情况下,该方法为values()
方法的别名。