数组方法表
方法名 | 做用效果 | 方法返回值 | 是否改变了原数组 | 版本 |
---|---|---|---|---|
push() | 在数组尾部添加一个或者多个元素 | 返回数组长度 | yes | ES5 |
unshift() | 在数组首部添加一个或者多个元素 | 返回数组长度 | yes | ES5 |
pop() | 删除数组的最后一位元素 | 返回被删除的元素 | yes | ES5 |
shift() | 删除数组的第一位元素 | 返回被删除的元素 | yes | ES5 |
reverse() | 颠倒数组的排列顺序 | 返回被反转的数组 | yes | ES5 |
sort() | 以字母顺序(字符串Unicode码点)对数组进行排序 | 返回新数组 | yes | ES5 |
splice() | 可以删除指定位置删除指定个数的元素在添加任意个数的元素(实现数组任意位置的增删改,也可以双重for循环配合它实现数组去重) | 返回删除的数据所组成的数组 | yes | ES5 |
concat() | 可以合并数组来创造新数组 | 返回合并后的数组 | NO | ES5 |
join() | 将元素按照指定的字符拼接成字符串 (默认",") | 返回拼接后的新数组 | NO | ES5 |
slice() | 裁切指定位置的数组 | 返回被裁切的元素形成的新数组 | NO | ES5 |
toString() | 将数组转换为字符串 | 新数组 | NO | ES5 |
valueOf() | 查询数组原始值 | 数组的原始值 | NO | ES5 |
indexOf() | 查询某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | NO | ES5 |
lastIdexOf() | 反向查询数组某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | NO | ES5 |
forEach() | (迭代) 遍历数组,每次循环中执行传入的回调函数 | 无/(undefined) | NO | ES5 |
map() | (迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 | 有/自定义 | NO | ES5 |
filter() | (迭代) 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中 | 满足条件的元素组成的新数组 | NO | ES5 |
every() | (迭代) 判断数组中所有的元素是否满足某个条件 | 全都满足返回true 只要有一个不满足 返回false | NO | ES5 |
some() | (迭代) 判断数组中是否存在,满足某个条件的元素 | 只要有一个元素满足条件就返回true,都不满足返回false | NO | ES5 |
reduce() | (递归)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 | 最终超做结果 | NO | ES5 |
reduceRight() | (递归)从右向左遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 | 最终超做结果 | NO | ES5 |
includes() | 判断一个数组是否包含一个指定的值 | 是返回 true,否则false | NO | ES6 |
Array.from() | 将萎数组转换成真数组 | 真数组 | NO | ES6 |
find() | 遍历数组,执行回调函数,回调函数执行一个条件,返回满足条件的第一个元素,不存在返回undefined | 满足条件第一个元素/否则返回undefined | NO | ES6 |
findIndex() | 遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1 | 满足条件第一个元素下标,不存在返回-1 | NO | ES6 |
fill() | 用给定值填充一个数组 | 返回新数组 | NO | ES6 |
flat() | 用于将嵌套的数组“拉平”,变成一维的数组 | 返回一个新数组 | NO | ES6 |
flatMap() | flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 ) | 返回新数组 | NO | ES6 |
每一种方法的使用详解
1.push()
介绍:在数组最后一位
添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)
let arr = [1, 2, "c"];
let rel = arr.push("a", "b");
console.log(arr); // [1, 2, "c", "a", "b"]
console.log(rel); // 5 (数组的长度)
2.unshift()
介绍:在数组第一位
添加一个或多个元素,并返回新数组的长度,改变原数组。(添加多个元素用逗号隔开)
let arr = [1, 2, "c"];
let rel = arr.unshift("a", "b");
console.log(arr); // [ "a", "b",1, 2, "c"]
console.log(rel); // 5 (数组的长度)
3.pop()
介绍:删除数组的最后一位
,并且返回删除的数据
,会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)
<script>
let arr = [1,2,3,4]
let rel = arr.pop()
console.log(arr); // [1,2,3]
console.log(rel); // 返回删除的元素 4
</script>
4.shift()
介绍:删除数组的第一位数据
,并且返回被删除的数据
,会改变原来的数组。(该方法同pop();一样不接受参数,且每次只能删除数组第一个)
<script>
let arr = [1,2,3,'你好']
let rel = arr.shift()
console.log(arr); // [2,3,'你好']
console.log(rel); // 返回被删除的元素 1
</script>
5.reverse()
介绍:将数组的数据进行反转
,并且返回反转后的数组
,会改变原数组
<script>
let arr = [1,2,3,'你好']
let rel = arr.reverse()
console.log(arr); // ['你好',3,2,1]
console.log(rel); // 返回被反转的数组 ['你好',3,2,1]
</script>
6.sort()
介绍:sort() 方法是最强大的数组方法之一。方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。
原始使用sort()方法
<script>
let arr = [10,2,1,11]
let rel = arr.sort()
console.log(rel); // 返回按照unicode编码排序的数组 [1, 10, 11, 2]
</script>
但排列顺序并不是我们想要的那种,这也显示了其不稳定性。
方法2
语法: arr.sort(function(a,b))
参数: function可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
具体用法:
- 如果 function(a, b) {return: a - b;} ,=> a - b > 0 那么 a 会被排列到 b 之前; (
从小到大排序
) - 如果 function(a, b) {return: b - a;} ,=> b - a > 0 那么b会被排列到 a 之前; (
从大到小排序
)
<script>
let arr = [10,2,1,11]
arr.sort(function(a,b){
return a-b
})
console.log(arr); // 从小到大的顺序排列 [1, 2, 10, 11]
</script>
元素为对象时(可按其中某个属性来排序):
<script>
var arr1 = [{
name: "詹姆斯",
age: "6"
},
{
name: "凯里欧文",
age: "11"
},
{
name: "库里",
age: "30"
},
];
arr1.sort(function (a, b) {
console.log(a, b);
return b.age - a.age; // 用对象里的元素排列
});
console.log(arr1); // 按age元素从大到小排列 {name: '库里', age: '30'}{name: '凯里欧文', age: '11'}{name: '詹姆斯', age: '6'}
</script>
7.splice()
介绍:向数组中添加
,或从数组删除
,或替换
数组中的元素,然后返回被删除/替换
的元素所组成的数组。可以实现数组的增删改
语法: arrayObject.splice(index,howmany,item1,…,itemX)
参数:
- index:必需。整数,规定添加/删除项目的位置(元素下标),使用负数可从数组结尾处规定位置。
- howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
- item1, …, itemN:可选。向数组添加的新项目。
<script>
let arr = [1,2,3,4]
arr.splice(2,1,'你好','再见')
console.log(arr); // 删除下标为2的元素,删除一个,在删除位置添加'你好','再见'
</script>
8.concat()
介绍:数组的拼接(将多个数组或元素拼接形成一个新的数组
),不改变原数组如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中.如果是其他类型, 直接放到新数组中,另外,如果不给该方法任何参数,将返回一个和原数组一样的数组(复制数组)
<script>
let arr1 = [1, 2, 3];
let arr2 = ["a", "b", "c"];
let arr3 = ["A", "B", "C"];
let rel = arr1.concat(arr2, arr3);
console.log(arr1); //原数组 [1, 2, 3] 该方法不会改变原数组
console.log(rel); //新数组 [1, 2, 3, 'a', 'b', 'c', 'A', 'B', 'C']
</script>
9.join()
介绍:用特定
的字符,将数组拼接形成字符串
(默认",")
<script>
let list = ["a", "b", "c", "d"]; // "a-b-c-d"
let result1 = list.join("-"); //"a-b-c-d"
let result2 = list.join("/"); //"a/b/c/d"
let result3 = list.join(""); //"abcd"
let result4 = list.join(); // a,b,c,d
</script>
10.slice()
介绍:裁切指定位置的数组
,返回值为被裁切的元素形成的新数组
,不改变原数组,同concat() 方法 slice() 如果不传参数,会使用默认值,得到一个与原数组元素相同的新数组 (复制数组)
语法: arr[].slice(startIndex,endIndex)
参数:
- startIndex:起始下标 默认值 0(从哪个位置开始截取)
- endIndex:终止下标 默认值 length,可以接收负数,(倒着数)
<script>
let list = ["a", "b", "c", "d"];
let result = list.slice(1, 3);
console.log(result); // ["b", "c"]
</script>
11.toString()
介绍:直接将数组转换为字符串
,并且返回转换后的新数组
,不改变原数组,与join();方法不添加任何参数 相同
<script>
let list = ["a", "b", "c", "d"];
let result = list.toString();
console.log(list); // ["a", "b", "c", "d"] 不改变原数组
console.log(result); // a,b,c,d (字符串类型)
</script>
12.valueOf()
介绍:返回数组的原始值
(一般情况下其实就是数组自身)
<script>
let list = [1,2,3,4,5];
let result = list.valueOf();
console.log(list); // [1,2,3,4,5] 不改变原数组
console.log(result); // [1,2,3,4,5] 原始值
</script>
13.indexOf()
介绍:查询某个元素在数组中第一次出现的位置
存在
该元素,返回下标
,不存在
返回 -1
(可以通过返回值 变相的判断是否存在该元素)
<script>
let list = [1,2,3,4,5];
let result = list.indexOf(4);
let result2 = list.indexOf(8);
console.log(list); // [1,2,3,4,5] 不改变原数组
console.log(result); // 3 存在指定的元素返回该元素的下标 3
console.log(result2); // -1 不存在指定的元素返回-1
</script>
14.lastIndexOf()
介绍:查询某个元素在数组中最后一次出现的位置
(或者理解为反向查询第一次出现的位置
) 存在该元素,返回下标
,不存在
返回 -1
(可以通过返回值 变相的判断是否存在该元素)
<script>
let list = [1,2,3,3,3,4,5];
let result = list.lastIndexOf(3);
let result2 = list.lastIndexOf(8);
console.log(list); // [1,2,3,3,3,4,5] 不改变原数组
console.log(result); // 4 存在指定的元素返回该元素的下标 4
console.log(result2); // -1 不存在指定的元素返回-1
</script>
15.forEach()
介绍:遍历数组
,每次循环中执行传入的回调函数
。(注意: forEach() 对于空数组是不会执行回调函数的
。) 没有返回值,或理解为返回值为undefined,不改变原数组
语法:
arr[].forEach((item,index,array)=>{
//do something
})
参数:
- item:每次循环的当前元素
- index:当前项的索引
- array:原始数组
例子1:
<script>
let list = [1,2,3,3,3,4,5];
let newlist = list.forEach((item,index,array)=>{
console.log(item,index,array);
})
console.log(newlist); // 返回值为undefined
</script>
例子2:数组中元素的和
<script>
let list = [32, 93, 77, 53, 38, 87];
let sum = 0;
list.forEach(function (item) {
console.log(item); // 遍历数组的每一项 32, 93, 77, 53, 38, 87
sum += item; // 遍历累加求和
});
console.log(sum); // 所有元素的和 380
</script>
16.map()
介绍:遍历数组
, 每次循环时执行传入的回调函数
,根据回调函数的返回值,生成一个新的数组 ,同forEach() 方法,但是map()方法有返回值,可以return出来
语法:
arr[].map(function(item,index,array){
//do something
return XXX
})
参数:
- item:每次循环的当前元素
- index:当前项的索引
- array:原始数组
<script>
let list = [32, 93, 77, 53, 38, 87];
let rel = list.map(function (item, index, array) {
return item*2+4 // 将遍历的每一项计算后返回出去
});
console.log(list); // [32, 93, 77, 53, 38, 87] 原数组
console.log(rel); // [68, 190, 158, 110, 80, 178] 新数组
</script>
17.filter()
介绍:遍历数组
, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中
语法:
arr[].filter(function(item,index,array){
//do something
return XXX //条件
})
产数:
- item:每次循环的当前元素
- index:当前项的索引
- array:原始数组
<script>
let list = [32, 93, 77, 53, 38, 87];
let newlist = list.filter(function (item, index, array) {
return item>50 // 将遍历的每一项符合要求的返回出去
});
console.log(list); // [32, 93, 77, 53, 38, 87] 原数组
console.log(newlist); // [93, 77, 53, 87] 新数组
</script>
18.every()
介绍:遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true 只要有一个不满足 返回false
=> 判断数组中所有的元素是否满足某个条件
<script>
let list = [32, 93, 77, 53, 38, 87];
let newlist = list.every(function (item, index, array) {
console.log(item, index, array);
return item>50 // 将遍历的每一项判断是否满足条件
});
console.log(list); // [32, 93, 77, 53, 38, 87] 原数组不变
console.log(newlist); // false 全部满足返回true,有一个不满足返回false
</script>
19.some()
介绍:遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true,都不满足返回false
=> 判断数组中是否存在,满足某个条件的元素
<script>
let list = [32, 93, 77, 53, 38, 87];
let newlist = list.some(function (item, index, array) {
return item>50 // 将遍历的每一项判断是否满足条件
});
console.log(list); // [32, 93, 77, 53, 38, 87] 原数组不变
console.log(newlist); // true 有一个满足返回true,全部不满足返回false
</script>
20.reduce()
介绍:遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev
,传入到下一次函数中, 返回最终操作的结果
语法: arr.reduce(function(prev,item,index,array){})
参数:
- prev 初始值 (类似求和是 sum=0) 可以设置初始值( 参数),如果不设置初始值默认是数组中的第一个元素,遍历时从第二个元素开始遍历
- item 每次循环的当前元素
- index 每次循环的当前下标
- array 原数组
例子1:不设置初始值的累加
<script>
let arr = [2, 3, 4, 5];
let sum = arr.reduce(function (prev, item, index, array) {
console.log(prev, item, index, array);
return prev + item;
});
console.log(arr, sum);
</script>
解析:
- 第一次循环: prev = 2 ; item(当前循环元素) = 3 ; index(当前循环元素下标) = 1;原数组 =array;因为没有给prev设置初始值,所以prev 的值为数组中第一个元素,遍历从第二个元素开始
- 第二次循环: prev = 5; item(当前循环元素) = 4 ; index(当前循环元素下标) = 2;原数组 =array;prev = 2+3(上次循环的元素) = 5 ;
…
最终prev = 14 ; arr中有四个元素 共循环三次;(因为没设置初始值跳过第一次循环prev默认等于第一个值)
实例2: 设置初始值的累加 0
<script>
let arr = [2, 3, 4, 5];
let sum = arr.reduce(function (prev, item, index, array) {
console.log(prev, item, index, array);
return prev + item;
},0); // 设置初始值 prev = 0
console.log(arr, sum);
</script>
解析: 可以看到与上一次设置初始值相比,最终的结果相同,但是多循环的一次,因为设置了prev的初始值为0,所以循环遍历从第一个元素开始,而不设置初始值,循环从第一个元素开始
21.reduceRight()
介绍:用法和reduce相同,只是从右向左遍历
22.includes()
介绍:用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
<script>
let arr = [2, 3, 4, 5];
let arl = arr.includes(2)
console.log(arl); // true 判断源数组有没有指定元素有返回 true
let site = arr.includes(8)
console.log(site); // false 判断源数组有没有指定元素没有返回 false
</script>
23.Array.from()
介绍:将一个伪数组对象或者可遍历对象转换成一个真正的数组
注意: 将一个类数组对象转换为一个真正的数组,必须具备以下条件:
- 该伪数组 / 类数组 对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
- 该伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字
<script>
let all = {0:'詹姆斯',1:'凯里欧文',2:'库里',3: ["耐克", "李宁", "安踏"],length: 4,}
let list = Array.from(all)
console.log(all); // 原伪数组
console.log(list,Array.isArray(list)); // 转换成真数组 Array.isArray判断为真数组 true
</script>
24.find()
介绍:遍历数组 每次循环 执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素
,不存在则返回undefined
参数:
- item:必须 , 循环当前元素
- index:可选 , 循环当前下标
- array:可选 , 当前元素所属的数组对象
<script>
let arr = ["耐克", "李宁", "安踏"]
let item = arr.find((item,index,array)=>{
return item == '李宁' //循环遍历数组返回满足条件的第一个元素,没有则返回undefined
})
console.log(item); // 李宁
</script>
当前返回结果为 “李宁”,当查询到满足条件的元素直接跳出循环,返回第一个满足条件的元素
例子2:该方法可快速查找对象数组满足条件的项
<script>
let arr = [{
id: 1,
name: '小明'
}, {
id: 2,
name: '周sir'
}]
let res = arr.find(item => item.id == 1) // 循环遍历数组 查询id==1的项返回出去
console.log('res', res) //res {id: 1, name: "小明"}
</script>
25.findIndex()
介绍:遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标
,不存在则返回-1
参数:
- item:必须 , 循环当前元素
- index:可选 , 循环当前下标
- array:可选 , 当前元素所属的数组对象
注意:
- findIndex();和indexOf();不同 (刚接触时乍一看和indexOf()怎么一模一样,仔细看了下才发现大有不同)
- indexOf是传入一个值.找到了也是返回索引,没有找到也是返回-1 ,属于ES5
- findIndex是传入一个测试条件,也就是函数,找到了返回当前项索引,没有找到返回-1. 属于ES6
<script>
let arr = [1,2,3,4,5]
let arl = arr.findIndex((item,index,array)=>{
return item == 2 // 循环遍历数组查询满足条件的元素的下标
})
console.log(arl); // 1 满足条件的下标为 1的元素
</script>
打印结果为1, 循环步骤和find()方法一样,但是它返回的是下标,find()返回的是满足条件的元素
例子2:
<script>
let arr = [{
id: 1,
name: '小明'
}, {
id: 2,
name: '周sir'
}]
let res = arr.findIndex(item => item.id == 1) // 遍历查询id == 1的元素 返回第一个满足条件的元素下标
console.log('res', res) //res 0
</script>
26.fill()
介绍:用给定值填充一个数组
参数:
- value 必需是填充的值
- start 可选,开始填充位置
- end 可选,停止填充位置 (默认为 array.length)
<script>
let arr = [1, 2, 3]
let newarr = arr.fill('填充',1,2)
console.log(newarr);
</script>
28.flatMap()
介绍:flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )
<script>
let list = [1, 6, 7, 2, 1, 2];
let newArr = list.map(function (item, index) {
return [item, index]; // 先map遍历将数组拆分成嵌套数组
});
console.log("Map方法:", newArr);
let newArr2 = list.flatMap(function (item, index) {
return [item, index]; // 将嵌套数组拉平成普通数组,只能拉平一次
});
console.log("flatMap方法:", newArr);
</script>