js 的数组方法总结
-
- 一、创建数组的两种方式
- 二、数组(array)中常用的几种方法
-
- 1、利用数组方法创建数组
- 2、判断数据是否为数组 --- isArray()
- 3、往数组的末尾添加数据 --- push()
- 4、往数组的开头添加数据 --- unshift()
- 5、给数组添加数据形成一个新的数组 --- concat()
- 6、删除数组的最末尾的一项数据 --- pop()
- 7、删除数组的第一项数据 --- shift()
- 8、颠倒数组中数据的顺序 --- reverse()
- 9、将数组中的数据按照升序或降序的顺序排列 --- sort()
- 10、截取数组 --- slice()
- 11、将数组用指定的分隔符连接并转换成字符串 --- join()
- 12、将数组转换成字符串 --- toString()
- 13、改变数组,对原数组数据进行添加、删除、修改(强大的方法) --- splice()
- 14、复制数组的数据形成新数组 --- copyWithin()
- 15、查询某数据第一次出现在该数组的下标 --- indexOf()
- 16、查询某数据最后一次出现在该数组的下标 --- lastIndexOf()
- 17、查询该数组是否包含某个数据 --- includes()
- 18、循环数组的方法 --- forEach()
- 19、循环数组的方法 --- map()
- 20、循环数组的方法 --- filter()
一、创建数组的两种方式
1、内置构造函数创建;
let arr = new Array("apple","banner");
2、字面量的方式创建
let arr = ["apple","banner"];
二、数组(array)中常用的几种方法
1、利用数组方法创建数组
Array.of()
方法:区别于内置构造函数创建数组的方式(new是可以省略的),所以当使用Array()的参数只有一个时,代表的是创建该数组的length
功能:创建数组;
参数:数据
返回值:创建的数组;
具体示例如下:
console.log(Array.of(1, 2, 3)); // [ 1, 2, 3 ]
console.log(Array.of(4)); // [ 4 ]
console.log(Array(5)); // [ <5 empty items> ]
console.log(Array(1, 2, 3, 4)); // [ 1, 2, 3, 4 ]
2、判断数据是否为数组 — isArray()
Array.isArray(array)
方法:
功能:判断数据是否为数组;
参数:需要判断的数组;
返回值:布尔值;
具体示例如下:
let arr = [1, 2, 3, 4];
console.log(Array.isArray(arr)); // true
let str = 'aaa';
console.log(Array.isArray(str)); // false
let obj = {
name: 'aaa',
sex: 'bbb',
}
console.log(Array.isArray(obj)); // false
3、往数组的末尾添加数据 — push()
array.push()
方法:
功能:往原数组的末尾逐一添加任意数量的数据;
参数:添加的数据;
返回值:返回新的长度。
具体示例如下:
let arr = [1, 2];
arr.push(3, 4);
console.log(arr); // [ 1, 2, 3, 4 ]
console.log(arr.length); // 4 等价于直接打印 console.log(arr.push(3, 4));
4、往数组的开头添加数据 — unshift()
array.unshift()
方法:
功能:往原数组的开头逐一添加任意数量的数据;
参数:添加的数据;
返回值:返回新的长度。
具体示例如下:
let arr = [1, 2];
arr.unshift(-1, 0);
console.log(arr); // [ -1, 0, 1, 2 ]
console.log(arr.length); // 4 等价于直接打印 console.log(arr.unshift(-1, 0));
5、给数组添加数据形成一个新的数组 — concat()
array.concat()
方法:
功能:给数组添加数据形成一个新的数组;
参数:数组或者数组项;
返回值:新的数组;
具体示例如下:
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr1.concat(7)); // [ 1, 2, 3, 7 ]
console.log(arr1.concat('aaa')); // [ 1, 2, 3, 'aaa' ]
console.log(arr1.concat(8, [10, 11, 12])); // [ 1, 2, 3, 8, 10, 11, 12 ]
6、删除数组的最末尾的一项数据 — pop()
array.pop()
方法:
功能:删除数组的最末尾的一项数据;
参数:无;
返回值:删除的数据。
具体示例如下:
let arr = [1, 2, 3, 4];
// arr.pop();
console.log(arr.pop()); // 4
console.log(arr); // [ 1, 2, 3 ]
console.log(arr.length); // 3
7、删除数组的第一项数据 — shift()
array.shift()
方法:
功能:删除数组的第一项数据;
参数:无;
返回值:删除的数据。
具体示例如下:
let arr = [1, 2, 3, 4];
// arr.shift();
console.log(arr.shift()); // 1
console.log(arr); // [ 2, 3, 4 ]
console.log(arr.length); // 3
8、颠倒数组中数据的顺序 — reverse()
array.reverse()
方法:
功能:颠倒数组中数据的顺序;
参数:无;
返回值:颠倒数据后的数组。
具体示例如下:
let arr = [1, 5, 3, 7];
// arr.reverse();
console.log(arr.reverse()); // [ 7, 3, 5, 1 ]
console.log(arr); // [ 7, 3, 5, 1 ]
let arr1 = [1, 'a', 's', 3];
console.log(arr1.reverse()); // [ 3, 's', 'a', 1 ]
console.log(arr1); // [ 3, 's', 'a', 1 ]
9、将数组中的数据按照升序或降序的顺序排列 — sort()
array.sort()
方法:改变原数组;
功能:注:默认只能按照字母表对数组进行首字母的排序(升序或者降序);如果对于数字,默认只能排序个位数的,两位数以上需要给方法增加参数(增加一个排序函数),
参数:对字母进行排序时无参数(输入参数也无效);对数字进行排序时参数为自定义的排序函数;
返回值:排序后的数组。
具体示例如下:
// 1、当数据为字母时:
let arr = ['ab', 'bc', 'ac', 'de']
console.log(arr.sort()); // [ 'ab', 'ac', 'bc', 'de' ]
console.log(arr); // [ 'ab', 'ac', 'bc', 'de' ]
// function ascend(a, b){ // 升序函数
// return a - b;
// }
// function decline(a, b){ // 降序函数
// return b - a;
// }
// console.log(arr.sort(ascend)) // [ 'ab', 'bc', 'ac', 'de' ]
// console.log(arr.sort(decline)) // [ 'ab', 'bc', 'ac', 'de' ]
// console.log(arr); // [ 'ab', 'bc', 'ac', 'de' ]
// 2、当数据为数字时:
let arr = [1, 4, 5, 6, 3, 2, 7, 9, 32, 44, 8]
function ascend(a, b){
// 定义一个升序函数
return a - b;
}
function decline(a, b){
// 定义一个降序函数
return b - a;
}
console.log(arr.sort(ascend)) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 32, 44 ]
console.log(arr.sort(decline)) // [ 44, 32, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
console.log(arr);
// 3、当数据中既有数字也有字母时:
let arr = ['ab', 1, 5, 3, 'bc', 'ac',6, 4, 'de']
// console.log(arr.sort()); // [ 1, 3, 4, 5, 6, 'ab', 'ac', 'bc', 'de' ]
// console.log(arr); // [ 1, 3, 4, 5, 6, 'ab', 'ac', 'bc', 'de' ]
function ascend(a, b){
// 升序函数
return a - b;
}
function decline(a, b){
// 降序函数
return b - a;
}
console.log(arr.sort(ascend)) // [ 'ab', 1, 3, 5, 'bc', 'ac', 4, 6, 'de' ]
console.log(arr.sort(decline)) // [ 'ab', 5, 3, 1, 'bc', 'ac', 6, 4, 'de' ]
console.log(arr); // [ 'ab', 5, 3, 1, 'bc', 'ac', 6, 4, 'de' ]
array.sort()
方法总结:当数组中的数据既有数字又有字母字符串时,给array.sort()
方法增加自定义排序函数为参数,排序只能对数字有效,字母仍是无效的;不添加参数,数字默认排在字母字符串的前面。
10、截取数组 — slice()
array.slice()
方法:
功能:截取数组中的数据创建一个新的数组;
参数:参数1 必须参数为截取位置的开始下标;
参数2 可选参数为截取位置的结束下标;
返回值:截取后的数组(不改变原数组);
具体示例如下:
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(2)); // [ 3, 4, 5, 6 ]
console.log(arr.slice(2, 4)); // [ 3, 4 ]
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]
11、将数组用指定的分隔符连接并转换成字符串 — join()
array.join()
方法:
功能:将数组中的数据使用特定的连接符连接在一起转换一个字符串;
参数:连接符;
返回值:转换后的字符串;
具体示例如下:
let arr = [1, 2, 3, 4];
console.log(arr.join()); // 1,2,3,4
console.log(typeof arr.join()); // string
console.log(arr.join('-')); // 1-2-3-4
console.log(typeof arr.join('-')); // string
console.log(arr.join('')); // 1234
console.log(typeof arr.join('')); // string
console.log(arr.join(' + ')); // 1 + 2 + 3 + 4
console.log(typeof arr.join(' + ')); // string
12、将数组转换成字符串 — toString()
array.toString()
方法:
功能:将数组转换成字符串;
参数:无;
返回值:转换后的字符串;
具体示例如下:
let arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // 1,2,3,4,5 类似 arr.join()方法没有参数时的情况
console.log(arr.join()); // 1,2,3,4,5
console.log(typeof arr.toString()); // string
13、改变数组,对原数组数据进行添加、删除、修改(强大的方法) — splice()
array.splice()
方法:
功能:改变数组,对原数组数据进行添加、删除、修改等数据操作;
参数:参数1 起始索引;
参数2 需要改变的数据个数;
参数3 需要添加或修改给原数组的单个或者多个具体数据;
返回值:改变的数据数组;
具体示例如下:
1、删除数组中某个索引位置的数据
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(1, 1)); // [ 2 ]
console.log(arr); // [ 1, 3, 4, 5 ]
2、给原数组中的某个索引位置增加数据
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(5, 0, 7)); // []
console.log(arr); // [ 1, 2, 3, 4, 5, 7 ]
3、给原数组中某个索引位置的数据替换掉(先删除后添加)
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 1, 'a')); // [ 3 ]
console.log(arr); // [ 1, 2, 'a', 4, 5 ]
4、把原数组的指定索引位置后的多个数据删除
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 3)); // [ 3, 4, 5 ]
console.log(arr); // [ 1, 2 ]
5、替换多个数据(先删除多个数据后添加多个数据)
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 3, 'aa', 10, 11, 12, 14)); // [ 3, 4, 5 ]
console.log(arr); // [ 1, 2, 'aa', 10, 11, 12, 14 ]
14、复制数组的数据形成新数组 — copyWithin()
array.copyWithin()
方法:
功能:复制数组中的数据形成新数组,且保持原数组的长度;
参数:参数1 开始替换数据的索引位置;
参数2 (可选)索引,从该索引位置开始复制;
参数3 (可选)索引,到该索引位置停止复制(不含);
返回值:改变后的数组;
具体示例如下:
特别注意:当索引为负数时,则从数组的最后一位开始从右往左算,且从-1开始;
let arr1 = [1, 2, 3, 4, 5];
console.log(arr1.copyWithin(-2)) // [1, 2, 3, 1, 2]
// 注:索引位置为-2开始用复制的数据替换原始数据;
// 当只有一个参数时,则表示从该索引位置开始用复制的数据替换原始数据;复制数据的开始位置也是该索引位置;
let arr2 = [1, 2, 3, 4, 5];
console.log(arr2.copyWithin(0, 3)) // [4, 5, 3, 4, 5]
// 注:索引为0的位置开始用复制的数据替换原始数据
// 3为复制数据的开始索引位置,也就是说复制4,5两个数据,然后从0的索引位置用已经复制的数据替换掉原始数据,
// 因为只复制了两个数据,所以也只是替换了两个数据,但保持原有数组的length长度,那么最终得到结果[4, 5, 3, 4, 5]
let arr3 = [1, 2, 3, 4, 5];
console.log(arr3.copyWithin(0, 3, 4)) // [4, 2, 3, 4, 5]
// 注:同理;0 为开始替换数据的索引位置,3为开始复制数据的索引位置,4为停止复制数据的结束位置(不含);
// 那么,复制了索引位置3开始,索引位置4结束的数据(也就是数组中数据 4),然后从0开始替换掉,
// 因为只是复制了一个数据,所以替换的也只是一个数据,最终得到结果为 [4, 2, 3, 4, 5]
let arr4 = [1, 2, 3, 4, 5];
console.log(arr4.copyWithin(-2, -3, -1)) // [1, 2, 3, 3, 4]
// 同理可证
15、查询某数据第一次出现在该数组的下标 — indexOf()
array.indexOf()
方法:
功能:查询某数据第一次出现在该数组的下标;
参数:参数1 查询的数据;
参数2 查询的起始下标;
返回值:查询到的数据所在下标;如果没找到则返回 -1;
具体示例如下:
let arr = [1, 2, 3, 4, 2, 5];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(2, 2)); // 4 :从下标2的索引位置开始查找
console.log(arr.indexOf(9)); // -1 :没找到则返回 -1
16、查询某数据最后一次出现在该数组的下标 — lastIndexOf()
array.lastIndexOf()
方法:
功能:查询某数据最后一次出现在该数组的下标;
参数:参数1 查询的数据;
参数2 查询的起始下标;
返回值:查询到的数据所在下标;如果没找到则返回 -1;
具体示例如下:
注:此方法也可以理解为从后面开始往前面查找,从后往前查找到数据第一次出现的下标,当然下标是从前面开始往后算的,0 开头;
let arr = [1, 2, 3, 4, 2, 5];
console.log(arr.lastIndexOf(2)); // 4
console.log(arr.lastIndexOf(2, -4)); // 1
console.log(arr.lastIndexOf(2, 1)); // 1
console.log(arr.lastIndexOf(8)); // -1
17、查询该数组是否包含某个数据 — includes()
array.includes()
方法:
功能:查询该数组是否包含某个值
参数:需要查询的数据;
返回值:布尔值;
具体示例如下:
let arr = [ 1, 2, 3, 4, 5, 6 ];
console.log(arr.includes(3)); // true
console.log(arr.includes(7)); // false
18、循环数组的方法 — forEach()
array.forEach()
方法:
功能:循环遍历数组中的每个数据,并对数据进行运算,改变原数组;
参数:回调函数;
回调函数的参数:参数1 数组中的每一项数据;
参数2 索引;
参数3 数组
返回值:无;
具体示例如下:
function fn(item, index, arr){
arr[index] = item + 1;
}
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.forEach(fn);
console.log(res); // 打印返回值 undefined
console.log(arr); // 打印原数组 [ 2, 3, 4, 5, 6, 7 ]
// 箭头函数改写代码如下
let arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item, index) => arr[index] = item + 1);
console.log(arr); // [ 2, 3, 4, 5, 6, 7 ]
19、循环数组的方法 — map()
array.map()
方法:
功能:循环遍历数组中的每个数据,并对数据进行运算,不改变原数组,返回一个新数组;
参数:回调函数;
回调函数的参数:参数1 数组中的每一项数据;
参数2 索引;
参数3 数组
返回值:新的数组;
具体示例如下:
function fn(item, index, arr){
return item + 1;
}
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.map(fn);
console.log(res); // 打印返回值 [ 2, 3, 4, 5, 6, 7 ]
console.log(arr); // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]
// 箭头函数改写代码如下:
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.map(item => item + 1);
console.log(res); // 打印返回值 [ 2, 3, 4, 5, 6, 7 ]
console.log(arr); // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]
20、循环数组的方法 — filter()
array.filter()
方法:
功能:检测数组数据,并返回符合条件的所有数据的新数组,不改变原数组;
参数:回调函数;
回调函数的参数:参数1 数组中的每一项数据;
参数2 索引;
参数3 数组
返回值:新的数组;
具体示例如下:
function fn(item, index, arr){
return item >= 3;
}
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(fn);
console.log(res); // 打印返回值 [ 3, 4, 5, 6 ]
console.log(arr); // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]
// 箭头函数改写代码如下:
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(item => item >= 3);
console.log(res); // 打印返回值 [ 3, 4, 5, 6 ]
console.log(arr); // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]
好的,以上就是本人对数组方法的一些简单理解,当然数组方法还有很多,后续会不断更新;
如有不足之处,望大神们不吝指出,谢谢!