一、改变原数组方法
1.push()
作用:向数组的末尾添加一个或多个元素
返回:添加后数组的长度。
<script>
let arr = [1, 2, 3];
console.log(arr.push(4)); //4
console.log(arr); //[1, 2, 3, 4]
console.log(arr.push(2, 4)); //6
console.log(arr); //[1, 2, 3, 4, 2, 4]
</script>
2.pop()
作用:删除数组的最后一个元素。
返回:最后一个元素
<script>
let arr = [1, 2, 3];
console.log(arr.pop()); //3
console.log(arr); //[1, 2]
</script>
3.unshift()
作用:向数组的开头添加一个或多个元素。
返回:添加后数组的长度。
<script>
let arr = [1, 2, 3];
console.log(arr.unshift(4)); //4
console.log(arr); //[4, 1, 2, 3]
console.log(arr.unshift(5, 6)); //6
console.log(arr); //[5, 6, 4, 1, 2, 3]
</script>
4.shift()
作用:删除数组的第一个元素。
返回:删除的元素。
<script>
let arr = [1, 2, 3];
console.log(arr.shift()); //1
console.log(arr); //[2, 3]
</script>
5.splice()
作用:替换原数组中的元素
返回:被替换掉的元素
<script>
let arr = [1, 2, 3, 4, 5];
//splice(1, 2, "a", "b")中的1,2代表元素组要替换的元素的下标,"a","b"代表用于替换的元素
console.log(arr.splice(1, 2, "a", "b"));//[2, 3]
console.log(arr);//[1, "a", "b", 4, 5]
</script>
6.reverse()
作用:颠倒数组中元素的顺序。
返回:颠倒后的数组。
<script>
let arr = [1, 2, 3];
console.log(arr.reverse());//[3, 2, 1]
console.log(arr);//[3, 2, 1]
</script>
7.sort()
作用:对数组的元素进行排序,默认排序顺序是根据字符串Unicode码点。
返回:排序好的数组
<script>
let arr = [6, 1, 4, 1, 2, 9];
// 正序排序
console.log(arr.sort()); //[1, 1, 2, 4, 6, 9]
console.log(arr); //[1, 1, 2, 4, 6, 9]
// 逆序排序
console.log(arr.sort((a, b) => b - a)); // 输出:[9, 6, 4, 2, 1, 1]
console.log(arr); // 输出:[9, 6, 4, 2, 1, 1]
</script>t>
8.copyWithin()
作用:浅复制数组的一部分到同一数组中的另一个位置。
返回:修改后的数组引用
<script>
let array1 = [1, 2, 3, 4, 5];
// 将位置 3 到 4 的元素复制到位置 0
console.log(array1.copyWithin(0, 3, 4));
// 输出: [4, 2, 3, 4, 5]
// 负数索引表示从数组末尾开始计算
let array2 = [1, 2, 3, 4, 5];
// 将位置 -2 到 -1 的元素复制到位置 0
console.log(array2.copyWithin(0, -2, -1));
// 输出: [4, 2, 3, 4, 5]
// 如果 start 大于 end,则不复制任何元素
let array3 = [1, 2, 3, 4, 5];
// 尝试将位置 3 到 2 的元素复制到位置 0(不会复制任何元素)
console.log(array3.copyWithin(0, 3, 2));
// 输出: [1, 2, 3, 4, 5]
// 如果 target 在 start 和 end 之间,则复制的结果会覆盖 target 位置的元素
let array4 = [1, 2, 3, 4, 5];
// 将位置 1 到 4 的元素复制到位置 1
console.log(array4.copyWithin(1, 1, 4));
// 输出: [1, 2, 3, 4, 4]
</script>
休息一下吧
二、不改变原数组方法
1.concat()
作用:合并两个或多个数组
返回:合并后的新数组
<script>
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); //[1, 2, 3, 4, 5, 6]
console.log(arr1); //[1, 2, 3]
console.log(arr2); //[4, 5, 6]
</script>
2.slice()
作用:提取某个范围内的数组元素
返回:一个包含提取的元素的新数组
<script>
let arr = [1, 2, 3, 4, 5];
//arr.slice(1, 4)提取的元素从下标1开始,包含下标1。从下标4结束,不包含下标4
console.log(arr.slice(1, 4)); //[2, 3, 4]
console.log(arr); //[1, 2, 3, 4, 5]
</script>
3.map()
作用:对数组每个元素分别调用
返回:一个调用完成后的新数组
<script>
let arr = [1, 2, 3];
console.log(arr.map((x) => x * 2)); //[2, 4, 6]
console.log(arr); // [1, 2, 3]
</script>
4.fillter()
作用:筛选出符合条件的元素
返回:包含所有符合条件的元素的新数组
<script>
let arr = [1, 2, 3, 4, 5];
console.log(arr.filter((x) => x > 3));//[4, 5]
console.log(arr);//[1, 2, 3, 4, 5]
</script>
5.forEach()
作用:遍历数组中每个元素并执行一次提供的操作
返回:无反回值
<script>
let arr = [1, 2, 3, 4, 5];
arr.forEach(
(item) => console.log(item + 2) // 3 4 5 6 7
);
console.log(arr); // [1, 2, 3, 4, 5]
</script>
6.some()
作用:检查数组中是否有至少一个元素满足提供的条件
返回:true或false
<script>
let arr = [1, 2, 3];
console.log(arr.some((x) => x > 2)); // true
console.log(arr.some((x) => x > 3)); // false
console.log(arr); // [1, 2, 3]
</script>
7.every()
作用:检查数组中是否所有元素都满足提供的条件
返回:true或false
<script>
let arr = [1, 2, 3];
console.log(arr.every((x) => x > 0)); // true
console.log(arr.every((x) => x > 2)); // false
console.log(arr); // [1, 2, 3]
</script>
8.find(),findLast()
find
作用:找到数组中第一个满足提供的条件的元素
返回:找到的满足条件的第一个元素的值或undefined
<script>
let arr = [1, 2, 3];
console.log(arr.find((x) => x > 0)); // 1
console.log(arr.find((x) => x > 3)); // undefined
console.log(arr); // [1, 2, 3]
</script>
findLast
作用:找到数组中最后一个满足提供的条件的元素
返回:找到的满足条件的最后一个元素的值或undefined
<script>
let arr = [1, 2, 3];
console.log(arr.findLast((x) => x > 0)); // 3
console.log(arr.findLast((x) => x > 3)); // undefined
console.log(arr); // [1, 2, 3]
</script>
9.includes()
作用:用来判断一个数组是否包含一个指定的值
返回:true或false
<script>
let arr = [1, 2, 3, NaN];
console.log(arr.includes(1)); // true
console.log(arr.includes(4)); // false
console.log(arr.includes(NaN)); // true
console.log(arr); // [1, 2, 3,NaN]
</script>
10.join()
作用:数组转字符串
返回:字符串
<script>
let arr = [1, 2, 3];
console.log(arr.join(",")); //1,2,3
console.log(arr);//[1, 2, 3]
</script>
11.toString(),toLocaleString()
作用:数组转字符串
返回:字符串
<script>
let arr = new Date();
console.log(arr.toLocaleString()); // 输出:"2024/3/13 15:36:59"
console.log(arr.toString()); // 输出:"Wed Mar 13 2024 15:36:59 GMT+0800 (中国标准时间)"
let arr2 = [1, 2, 3];
console.log(arr2.toString()); // 输出:"1,2,3"
console.log(arr2.toLocaleString()); // 输出:"1,2,3"
</script>
不同点:toLocaleString()会根据运行代码的环境的本地特定规则来格式化数组元素
12.flat()
作用:指定深度遍历数组
返回:遍历后的新数组
<script>
let arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat(0)); // [1, [2, 3], [4, [5, 6]]]
console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]
console.log(arr); // [1, [2, 3], [4, [5, 6]]]
</script>
13.flatMap()
作用:映射每个元素,然后将结果压平成一个新数组
返回:按照条件生成的新数组
<script>
const arr = [1, 2, 3];
//将arr进行映射,每个元素映射为一个数组,然后将这些数组展开
console.log(arr.flatMap((x) => [x, x * 2])); // 输出 [1, 2, 2, 4, 3, 6]
console.log(arr); // 输出 [1, 2, 3]
</script>
14.entries(), keys(), values()
作用:遍历数组
返回:一个迭代器,包含该数组的键、值或键值对。
entries():
同时获取键和值
keys():只获取键
values():只获取值
<script>
const arr = ["a", "b", "c"];
for (const [index, value] of arr.entries()) {
console.log(index, value); // 输出:0 'a',1 'b',2 'c'
}
for (const index of arr.keys()) {
console.log(index); // 输出:0,1,2
}
for (const value of arr.values()) {
console.log(value); // 输出:'a','b','c'
}
console.log(arr);// 输出:['a', 'b', 'c']
</script>
15.reduce(),reduceRight()
reduce
作用:对数组中的每个元素执行一个函数(升序执行),将其结果汇总为单个返回值。
返回:累计处理的结果。
<script>
let arr = [1, 2, 3, 4];
console.log(
arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
); // 输出:10
console.log(arr);// 输出:[1, 2, 3, 4]
</script>
reduceRight
作用:对数组中的每个元素执行一个函数(降序执行),将其结果汇总为单个返回值。
返回:累计处理的结果
<script>
let arr = [1, 2, 3, 4];
console.log(
arr.reduceRight(
(accumulator, currentValue) => accumulator + currentValue,
0
)
); // 输出:10
console.log(arr); // 输出:[1, 2, 3, 4]
</script>
16.indexOf() ,lastIndexOf()
作用:查找数组中指定元素的第一个(或最后一个)出现的索引位置。
返回:找到的元素索引,如果没有找到则返回-1。
<script>
let arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 输出:1
console.log(arr.lastIndexOf(2)); // 输出:3
console.log(arr); // 输出:[1, 2, 3, 2]
</script>
17.findIndex()
作用:查找数组中第一个满足提供的测试函数条件的元素的索引。
返回:找到元素的索引,否则返回-1。
<script>
let arr = [1, 2, 3];
console.log(arr.findIndex((x) => x === 2)); // 输出:1
console.log(arr); // 输出:[1, 2, 3]
</script>
18.isArray()
作用:检测是否为数组。
返回:true或false。
<script>
const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出:true
const arr2 = { arr: arr };
console.log(Array.isArray(arr2)); // 输出:false
</script>
19.from() , of():
Array.from():可以从类数组对象或可迭代对象创建一个新的数组。
Array.of():用于创建一个具有可变数量参数的新数组。
返回:创建的新数组
<script>
console.log(Array.from("foo")); // 输出:['f', 'o', 'o']
console.log(Array.of(1, 2, 3)); // 输出:[1, 2, 3]
</script>
20.fill()
作用:填充数组的一部分或全部元素为一个固定值。
返回:一个新数组
<script>
console.log(new Array(5).fill(0));//[0,0,0,0,0]
</script>
21.at()
作用:通过索引直接读取数组元素
返回:读到的元素
<script>
let myArray = ["apple", "banana", "cherry"];
console.log(myArray.at(0)); // 输出:"apple"
console.log(myArray.at(-1)); // 输出:"cherry"
</script>