JavaScript数组静态&实例方法汇总详解
改变原数组方法*9种
1、copyWithin()
顾名思义，在截取一段数组元素，Copy数组内部的指定位置。
它接受三个参数。
- target（必需）：从该位置开始替换数据。
- start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
- end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
这三个参数都应该是数值，如果不是，会自动转为数值。
语法
array.copyWithin(target, start, end)
从start位置（包括start）开始截取，到end位置结束，如果没有end，end默认等于数组长度。然后将截取的这一段元素，从start位置开始复制，start到当前截取的数组长度位置的元素，将会被这段截取的元素覆盖。
const arr = [1, 2, 3, 4, 5, 7, 8];
arr.copyWithin(0, 3, 6);
console.log(arr);//输出 [4, 5, 7, 4, 5, 7, 8] 原数组改变
默认情况下，copyWithin()方法总是会一直复制到数组末尾。
const arr = [1, 2, 3, 4, 5, 7, 8];
arr.copyWithin(0, 2);
console.log(arr);//输出[3, 4, 5, 7, 8, 7, 8]
2、push()
向数组的末尾添加一个或更多元素，返回新的长度，原数组改变
const arr = [1, 2, 3, 4, 5, 7, 8];
let backData = arr.push(0, 2);
console.log(backData, arr);//输出 9 (9) [1, 2, 3, 4, 5, 7, 8, 0, 2] 原数组改变
3、pop()
删除数组的最后一个元素，返回删除的元素，原数组改变
const arr = [1, 2, 3, 4, 5, 7, 8];
let backData = arr.pop();
console.log(backData, arr);//输出 8 (6) [1, 2, 3, 4, 5, 7]原数组改变
4、unshift()
向数组的开头添加一个或更多元素，返回新的长度，原数组改变
const arr = [1, 2, 3, 4, 5, 7, 8];
let length = arr.unshift(1);
console.log(length, arr);//输出 8 (8) [1, 1, 2, 3, 4, 5, 7, 8]
5、shift()
删除并返回数组的第一个元素，原数组改变
const arr = [1, 2, 3, 4, 5, 7, 8];
let backData = arr.shift();
console.log(backData, arr);//输出 1 (6) [2, 3, 4, 5, 7, 8]
6、sort()
sort() 方法用于对数组的元素进行排序，原数组改变，sort()默认是按照Unicode编码进行排序。
sort常用方式
const sortData = (val1, val2) => {
if (val1 < val2) {
return -1;
}
if (val1 > val2) {
return 1;
}
return 0;
};
const arr = ["bb", "dd", "cc", "ff", "aa"];
let backData = arr.sort(sortData);
console.log(backData, arr);//输出:
(5) ['aa', 'bb', 'cc', 'dd', 'ff']
(5) ['aa', 'bb', 'cc', 'dd', 'ff']
7、reverse()
反转数组的元素顺序,原数组改变，返回反转后的数组，原数组改变。
const arr = ["11", "22", "33", "44", "55"];
let backData = arr.reverse();
console.log(backData, arr);//输出
(5) ['55', '44', '33', '22', '11']
(5) ['55', '44', '33', '22', '11']
8、splice()
从数组中添加或删除元素。它有很多种用法，可以实现删除、插入和替换。返回删除的元素，改变原数组。
1、删除元素，返回删除的元素
可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。
const arr = ["11", "22", "33", "44", "55"];
let backData = arr.splice(1, 3);
console.log(backData, arr);
2、向指定索引位置添加元素
可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 数量（要删除的项数，添加的话为0）、要插入的项
const arr = ["11", "22", "33", "44", "55"];
let backData = arr.splice(1, 3, "添加");
console.log(backData, arr);//输出：
(3) ['22', '33', '44']
(3) ['11', '添加', '55']
3、替换指定索引位置的元素
可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除几项、要插入的任意数量的项
const arr = ["11", "22", "33", "44", "55"];
let backData = arr.splice(1, 1, "添加001", "添加002", "添加003");
console.log(backData, arr);//输出：['22']
(7) ['11', '添加001', '添加002', '添加003', '33', '44', '55']
9、fill()
使用一个固定值来填充数组。当只是用一个参数时，该方法会用该参数填充整个数组。返回填充后的数组，原数组改变。
-
value：填充值。
-
start：填充起始位置，可以省略。
-
end：填充结束位置，可以省略，实际结束位置是end-1。
const arr = ["11", "22", "33", "44", "55"]; let backData = arr.fill("填充", 1, 3); console.log(backData, arr);//输出： (5) ['11', '填充', '填充', '44', '55'] (5) ['11', '填充', '填充', '44', '55']
不改变原数组的其它数组方法
数组原型上的方法
Array.from()
indexOf()
搜索数组中的元素（从前往后），并返回它所在的位置，接收两个参数：要查找的项、查找起点索引（可选）。查到返回数组索引，没查到返回-1。
const arr = ["11", "22", "33", "44", "55"];
let backData = arr.indexOf("11", 1);
let backData2 = arr.indexOf("11");
console.log(backData, backData2, arr);//-1 0 (5) ['11', '22', '33', '44', '55']
lastIndexOf()
搜索数组中的元素（从后往前），并返回它所在的位置，接收两个参数：要查找的项、查找起点索引（可选）。
以上两个方法都返回要查找的项在数组中的位置，在没找到的情况下返回 -1
const arr = ["11", "22", "33", "44", "55"];
let backData = arr.lastIndexOf("22", 0);
let backData2 = arr.lastIndexOf("22");
console.log(backData, backData2, arr);//
-1 1 (5) ['11', '22', '33', '44', '55']
forEach()
对数组进行遍历，并将元素传递给回调函数，该方法没有返回值；
作用类似于for循环。
forEach(callback);callback默认有三个参数，分别为value，index，self。
- value 当前遍历元素
- index 元素索引
- self 数组本身
const arr = ["l", "u", "c", "k"];
arr.forEach((item, index, arr) => {
console.log(item, index, arr);
});
l 0 (4) ['l', 'u', 'c', 'k']
u 1 (4) ['l', 'u', 'c', 'k']
c 2 (4) ['l', 'u', 'c', 'k']
k 3 (4) ['l', 'u', 'c', 'k']
every()
判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回 true；如果有一项不满足，则返回 false
forEach(callback);callback默认有三个参数，分别为value，index，self。
- value 当前遍历元素
- index 元素索引
- self 数组本身
默认只会循环一次
const arr = ["l", "u", "c", "k"];
let backData = arr.every((item, index, arr) => {
console.log(item, index, arr);
// return typeof item === "string";
});
console.log(backData);//
l 0 (4) ['l', 'u', 'c', 'k']
false
const arr = ["l", "u", "c", "k"];
let backData = arr.every((item, index, arr) => {
console.log(item, index, arr);
return typeof item === "string";
});
console.log(backData);//
l 0 (4) ['l', 'u', 'c', 'k']
u 1 (4) ['l', 'u', 'c', 'k']
c 2 (4) ['l', 'u', 'c', 'k']
k 3 (4) ['l', 'u', 'c', 'k']
true
some()
判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回 true；如果所有项都不满足，则返回 false。
forEach(callback);callback默认有三个参数，分别为value，index，self。
- value 当前遍历元素
- index 元素索引
- self 数组本身
与every不同，默认会循环多次。
const arr = ["l", "u", "c", "k"];
let backData = arr.some((item, index, arr) => {
console.log(item, index, arr);
// return typeof item === "string";
});
console.log(backData);
l 0 (4) ['l', 'u', 'c', 'k']
u 1 (4) ['l', 'u', 'c', 'k']
c 2 (4) ['l', 'u', 'c', 'k']
k 3 (4) ['l', 'u', 'c', 'k']
false
reduce()
reduce(callback);callback默认有5个参数，分别为prev ，cur ，index ，self，init 。
-
prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
-
cur 必需。表示当前正在处理的数组元素；
-
index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
-
self可选。表示原数组；
-
init 可选。表示初始值
arr.reduce(function(prev,cur,index,arr){ ... }, init);
reduce应用
对对象的属性求和
const arr = [
{ name: "James", age: 21 },
{ name: "Jordan", age: 20 },
{ name: "Boriska", age: 20 },
];
let backData = arr.reduce((pre, cur) => {
pre = pre + cur.age;
return pre;
}, 0);
console.log(backData);//61
数组去重
const arr = [1, 2, 3, 12, 3, 1, 2, 3, 4];
let backData = arr.reduce((pre, cur) => {
if (pre.indexOf(cur) === -1) {
pre.push(cur);
}
return pre;
}, []);
console.log(backData);//(5) [1, 2, 3, 12, 4]
数组求和求积
const arr = [1, 2, 3];
let backData = arr.reduce((pre, cur) => {
pre = cur * pre;
return pre;
}, 1);
console.log(backData);//6
计算数组中每个元素出现的次数
const arr = [1, 2, 3, 1, 3];
let backData = arr.reduce((pre, cur) => {
//在js中in可以用来查寻一个值是否存在数组中，存在为ture否则为flase
if (cur in pre) {
pre[cur]++;
} else {
pre[cur] = 1;
}
return pre;
}, {});
console.log(backData);//{1: 2, 2: 1, 3: 2}
reduceRight()
从数组的最后一项开始，向前遍历到第一项。
以上两个方法都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值
- prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
- cur 必需。表示当前正在处理的数组元素；
- index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
- self可选。表示原数组；
- init 可选。表示初始值
作用于reduce类似，遍历的方向相反。
includes()
判断数组是否包含指定的值，如果是返回 true，否则 false。
参数有两个，第一个是（必填）需要查找元素，第二个是（可选）开始查找元素的索引
const arr = [1, 2, 3, 1, 3];
let backData = arr.includes(1);
console.log(backData);
find()
返回通过测试（函数内判断）的数组的第一个元素的值。
find(callback);callback默认有三个参数，分别为value，index，self。
- value 当前遍历元素
- index 元素索引
- self 数组本身
const arr = [1, 2, 3, 1, 3];
let backData = arr.find((item, index, arr) => {
return item === 2;
});
console.log(backData);//2
findIndex()
以上两个方法均接受两个参数：回调函数、用于指定回调函数内部的 this（可选）。
findIndex(callback);callback默认有三个参数，分别为value，index，self。
- value 当前遍历元素
- index 元素索引
- self 数组本身
回调函数应当在给定的元素满足你定义的条件时返回 true，而两个方法都会在回调函数第一次返回 true 时停止查找。
注意：find()方法返回匹配的值，而 findIndex()返回匹配位置的索引
const arr = [1, 2, 3, 1, 3];
let backData = arr.findIndex((item, index, arr) => {
return item === 3;
});
console.log(backData);//2
isArray()
用于判断一个对象是否为数组，如果是数组返回 true，否则返回 false。
const arr = [1, 2, 3, 1, 3];
let backData = Array.isArray(arr);
console.log(backData);//true
at()
数组支持索引查询
过去我们在使用[]语法时，会以为数组和字符串支持按照索引去查询元素
幸运的是，新的数组方法array.at(index)允许我们以常规访问器的方式通过索引访问数组元素。而且，array.at(index)接受负索引，在这种情况下，该方法从末尾取元素：
const arr = [1, 2, 3, 1, 3];
console.log(arr[2], arr[-2]);//3 undefined
console.log(arr.at(2), arr.at(-2));//3 1
groupBy
用于数组元素分类
给数组Array的原型上添加了两个方法，groupBy和 groupByToMap
let arr2 = [1, 2, 3, 4, 5];
arr.groupBy((item, index) => {
return item >= 2 ? "比2大" : "比2小";
});
// {'比2大': [2, 3, 4, 5] , '比2小': [1]}
groupByToMap
let arr = [1, 2, 3, 4, 5];
let odd = { odd: true };
let even = { even: true };
arr.groupByToMap((num, index, array) => {
return num % 2 === 0 ? even: odd;
});
// => Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] }
findLast
通过方法findLast，支持了直接逆向查询数组
arr.findLast(item => item.value % 2 === 1); // { value: 3 }
不改变原数组且返回新数组
concat()
连接两个或更多的数组，并返回连接的结果。
let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 3, 4];
console.log(arr1.concat(arr2));//(8) [1, 2, 3, 4, 1, 2, 3, 4]
join()
即数组转字符串，把数组的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的，默认使用逗号作为分隔符
let arr = [1, 2, 3, 4];
console.log(arr.join(), arr.join("o"));//1,2,3,4 1o2o3o4
map()
即数组镜像，通过指定函数处理数组的每个元素，并返回加工处理后的数组。
let arr = [
{
name: "James",
age: 20,
},
{
name: "Jordan",
age: 20,
},
{
name: "Boriska",
age: 20,
},
];
let newArr = arr.map((item) => {
item.age += 1;
return item;
});
console.log(newArr);//
0: {name: 'James', age: 21}
1: {name: 'Jordan', age: 21}
2: {name: 'Boriska', age: 21}
filter()
检测数值元素，并返回符合条件所有元素的数组，实现“过滤”功能
let arr = [
{
name: "James",
age: 20,
},
{
name: "Jordan",
age: 20,
},
{
name: "Boriska",
age: 21,
},
];
let newArr = arr.filter((item) => {
return item.age === 20;
});
console.log(newArr);//0: {name: 'James', age: 20}
1: {name: 'Jordan', age: 20}
toString()
toLocaleString()
以上两个都是将数组转换成字符串，并返回结果。也可用与非对象数组的多维数组的降维。
let arr = [1, 2, 5, [2, 5]];
console.log(arr.toLocaleString(), arr.toString());
//toLocaleString=> 1,2,5,2,5 toString=> 1,2,5,2,5
slice()
选取数组的一部分，并返回一个新数组，类似与切片的功能。
slice(callback);callback默认有三个参数，分别为start，end，
- start 开始位置的索引 （包括）
- end 结束位置的索引（不包括）
在只有一个参数的情况下， 其返回从该参数指定位置开始到当前数组末尾的所有项；如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项，当出现负数时，将负数加上数组长度的值来替换该位置的数
let arr = [1, 2, 3, 4, 5, 6, 7];
let newArr = arr.slice(1, 3);
console.log(newArr);//[2, 3]
flat()
按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，实现数组扁平化。
参数：代表需要下降的维数；如果不填，就是默认值1。也可以传入Infinity(一种数据类型为number的数字。如果值过大，不会报错，降到一维数组之后就不会再进行操作
let arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
let newArr = arr.flat(Infinity);
console.log(newArr);//(10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
flatMap()
功能类似与map方法，会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数：指定要提取嵌套数组的结构深度，默认值为 1
let arr = [1, 2, 3];
let newArr = arr.flatMap((x) => [x, x * 2]);
// 相当于 [[1, 2], [2, 4], [3, 6]].flat()
console.log(newArr); //6) [1, 2, 2, 4, 3, 6]
entries()
可将数组转换为数组可迭代对象；并且附有next迭代方法
entries二维数组排序
var arr = [1,2,[3,4,5]];
var iterator = arr.entries();
var cur = iterator.next();
while(cur.done!==true){
if(cur.value[1].constructor == Array) {
cur.value[1].sort((a,b)=>{
return b-a;
})
}
cur = iterator.next();
}
console.log(arr);// var arr = [1,2,[5,4,3]];
keys()
values()
entries()、keys()、values() 都是用于遍历数组，它们都返回一个遍历器对象，可以用for…of循环进行遍历
区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
let arr = [1, 2, 3];
for (let item of arr.values()) {
console.log(item);
}
//1
//2
//3
Array.of
new Array()方式，因为它有一个缺陷，如果要用这种方式创建一个数组，其中就只有一个数字3。
let newArr = new Array(3);
console.log(newArr, newArr.length);
上面只会得到一个长度为3的数组（各项都是empty），而不是一个长度为1的数组（其中的项为数字3）
let newArr = Array.of(3);
console.log(newArr, newArr.length);//[3] 1
上面代码创建了一个长度为1的数组（其中的项为数字3）。相比new Array()这种方式，Array.of()的方式显得更明了，
Array.from
Array.from方法用于将类对象转化为真正的数组：类似数组的对象和可遍历（iterator）的对象（包括Map和Set）
let newArr = Array.from({ length: 3 });
console.log(newArr, newArr.length);
Array.from还可以接受第二个参数，作用类似于map方法，用来对每个元素进行处理
let arr = [1, 2, 3];
let newArr = Array.from(arr, (x) => x * 2);
console.log(newArr, newArr.length);
Array.from实现浅拷贝
let arr = [1, 2, 3];
let newArr = Array.from(arr);
console.log(newArr, arr);
Array.from() 将可迭代对象或者类数组对象作为第一个参数传入，就能返回一个数组
let newArr = Array.from("Boriska");
console.log(newArr, arr);
const makeAr = (...arg) => {
return arg;
};
console.log(makeAr("leo", "is", 18), arr);
1332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
