JavaScript中创建数组有两种方式
(一)使用 Array 构造函数:
var arr1 = new Array(); //创建一个空数组
var arr2 = new Array(20); // 创建一个包含20项的数组
var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组
(二)var 创建数组
var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项的数组
var arr6 = [“lily”,“lucy”,“Tom”]; // 创建一个包含3个字符串的数组
一、JavaScript 常用数组方法
顺序 | 方法名 | 功能 | 返回值 | 是否改变原数组 | 版本 |
1 | push() | (在结尾) 向数组添加一或多个元素 | 返回新数组长度 | Y | ES5- |
2 | unshift() | (在开头)向数组添加一或多个元素 | 返回新数组长度 | Y | ES5- |
3 | pop() | 删除数组的最后一位 | 返回被删除的数据 | Y | ES5- |
4 | shift() | 删除首个数组元素,并把所有其他元素“移位”到更低的索引 | 返回被删除的数据 | Y | ES5- |
5 | remove() | 反转数组中的元素 | 返回反转后数组 | Y | ES5- |
6 | sort() | 以字母顺序(字符串Unicode码点)对数组进行排序 | 返回新数组 | Y | ES5- |
7 | splice() | 在指定位置删除指定个数元素再增加任意个数元素 (实现数组任意位置的增删改) | 返回删除的数据 | Y | ES5- |
8 | concat() | 通过合并(连接)现有数组来创建一个新数组 | 通过合并(连接)现有数组来创建一个新数组 | N | ES5- |
9 | join() | 用特定的字符,将数组拼接形成字符串(默认"") | 返回拼接后的新数组 | N | ES5- |
10 | slipe() | 裁切指定位置的数组 | 被裁切的元素形成新的数组 | N | ES5- |
11 | toString() | 将数组转换为字符串 | 新数组 | N | ES5- |
12 | valueOf() | 查询数组原始值 | 数组的原始值 | N | ES5- |
13 | indexOf() | 查询某个元素在数组中第一次出现的位置 | 存在该元素,返回下边,不存在,返回-1 | N | ES5- |
14 | lastIdexOf() | 方向查询数组某个元素在数组中第一次出现的位置 | 存在该元素,返回下标,不存在 返回 -1 | N | ES5- |
15 | forEach() | (迭代)遍历数组,每次循环中执行传入的回调函数 | 无(undefined) | N | ES5- |
16 | map() | (迭代)遍历数组,每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 | 有/自定义 | N | ES5- |
17 | filter() | (迭代)遍历数组,每次循环时执行传入的回调函数,回调函数返回一个条件,把条件的元素筛选出来放到新的数组中 | 满足条件的元素组成新的数组 | N | ES5- |
18 | every() | (迭代) 判断数组中所有的元素是否满足某个条件 | 全都满足返回true 只要有一个不满足 返回false | N | ES5- |
19 | some() | (迭代) 判断数组中是否存在,满足某个条件的元素 | 只要有一个元素满足条件就返回true,都不满足返回false | N | ES5- |
20 | reduce() | (归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 | 最终操作的结果 | N | ES5- |
21 | reduceRight() | (归并)用法同reduce,只不过是从右向左 | 同reduce | N | ES5- |
22 | includes() | 判断一个数组是否包含一个指定的值. | 是返回 true,否则false | N | ES6 |
23 | Array.from() | 接收伪数组,返回对应的真数组 | 对应的真数组 | N | ES6 |
24 | find() | 遍历数组,执行回调函数,回调函数执行一个条件,返回满足条件的第一个元素,不存在返回undefined | 满足条件第一个元素/否则返回undefined | N | ES6 |
25 | findIndex() | 遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1 | 满足条件第一个元素下标,不存在=>-1 | N | ES6 |
26 | fill() | 用给定值填充一个数组 | 新数组 | N | ES6 |
27 | flat() | 用于将嵌套的数组“拉平”,变成一维的数组。 | 返回一个新数组 | N | ES6 |
28 | flatMap() | flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 ) | 返回新数组 | N | ES6 |
二、 方法详解
1、push()和pop()
push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
pop():数组末尾移除最后一项,减少数组的 length
值,然后返回移除的项。
var arr = [“Lily”,“lucy”,“Tom”];
var count = arr.push(“Jack”,“Sean”);
console.log(count); // 5
console.log(arr); // [“Lily”, “lucy”, “Tom”, “Jack”, “Sean”]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // [“Lily”, “lucy”, “Tom”, “Jack”]
2、shift() 和 unshift()
shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined
。
unshift:将参数添加到原数组开头,并返回数组的长度 。
这组方法和上面的push()
和pop()
方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。
var arr = [1, 2, "c"];
var rel = arr.unshift("A", "B");
console.log(arr); // [ "A", "B",1, 2, "c"]
console.log(rel); // 5 (数组长度)
var rel = arr.shift();
console.log(arr); // [2, "c"]
console.log(rel); // 1
3、reverse()
reverse():反转数组项的顺序。
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //3, 51, 24, 13
4、sort()
sort() 方法是最强大的数组方法之一。
sort(); 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode
码点。
例1:
var arr1 = [10, 1, 5, 2, 3];
arr1.sort();
console.log(arr1);
打印结果:
结果并不是我们想要的排序结果,因为它是根据unicode编码来排序的,这也显示了其不稳定性。
语法: 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 之前;
(从大到小排序)
那么我们就可以运用以上所说的function(a,b)去完成对数字的排序:
var arr = [10, 1, 5, 2, 3];
arr.sort(function (a, b) {
return a - b;
});
console.log(arr);
打印结果:
元素为对象时(可按其中某个属性来排序):
var arr1 = [
{ name: "张三", age: "38" },
{ name: "李四", age: "28" },
{ name: "王五", age: "48" },
];
arr1.sort(function (a, b) {
console.log(a, b);
return b.age - a.age;
});
console.log(arr1);
打印结果:(按 age 排序(大到小))
5、splice()
功能:向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。可以实现数组的增删改;
语法: arrayObject.splice(index,howmany,item1,…,itemX)
参数:
参数 | 描述 |
index | 必需。整数,规定添加/删除项目的位置(元素下标),使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, …, itemX | 可选。向数组添加的新项目。 |
例,删除arr()
中第三个元素并添加 "add1", "add2"
元素
var arr = ["a", "b", "c", 2, 3, 6];
var rel = arr.splice(2, 1, "add1", "add2");
console.log(arr); //原数组
console.log(rel); //新数组
打印结果:
6、concat()
concat() :将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()
方法传递参数的情况下,它只是复制当前数组并返回副本。
功能: 数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组
如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中.
如果是其他类型, 直接放到新数组中
另外,如果不给该方法任何参数,将返回一个和原数组一样的数组(复制数组)
var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // 1, 3, 5, 7
从上面测试结果可以发现:传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。但是如果传入的是一个二维数组呢?
var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]
上述代码中,arrCopy2
数组的第五项是一个包含两项的数组,也就是说concat
方法只能将传入数组中的每一项添加到数组中,如果传入数组中有些项是数组,那么也会把这一数组项当作一项添加到arrCopy2
中。
7、join()
通过join()
方法可以实现重复字符串,只需传入字符串以及重复的次数,就能返回重复后的字符串
函数如下:
function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString(“abc”, 3)); // abcabcabc
console.log(repeatString(“Hi”, 5)); // HiHiHiHiHi
8、slice()
slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。
slice():方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,
slice():方法返回从该参数指定位置开始到当前数组末尾的所有项。
如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。
语法: arr[].slice(startIndex,endIndex)
参数
参数 | 描述 |
startIndex | 起始下标 默认值 0 |
endIndex | 终止下标 默认值 length,可以接收负数,(倒着数) |
注意!起始下标和终止下标的区间是 左闭右开 [ a ,b) 能取到起始,取不到终止
var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //1, 3, 5, 7, 9, 11
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]
arrCopy
:只设置了一个参数,也就是起始下标为1,所以返回的数组为下标1(包括下标1)开始到数组最后。
arrCopy2
:设置了两个参数,返回起始下标(包括1)开始到终止下标(不包括4)的子数组。
arrCopy3
:设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值(6)来替换该位置的数,因此就是从1开始到4(不包括)的子数组。
arrCopy4
:中两个参数都是负数,所以都加上数组长度6转换成正数,因此相当于slice(2,5)
。
9、toString()
功能: 直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join()
;方法不添加任何参数 相同.
var list = ["a", "b", "c", "d"];
var rel = list.toString();
console.log(rel); // a,b,c,d (字符串类型)
10、valueOf()
功能: 返回数组的原始值(一般情况下其实就是数组自身)
var list = [1, 2, 3, 4];
var rel = list.valueOf();
console.log(list); // [1, 2, 3, 4]
console.log(rel); // [1, 2, 3, 4]
11、indexOf()和 lastIndexOf()
indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。
功能: 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4];
var index = list.indexOf(4); //3
var index = list.indexOf("4"); //-1
console.log(index);
lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。
功能: 查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4];
var index = list.lastIndexOf(4); //3
var index = list.lastIndexOf("4"); //-1
console.log(index);
12、forEach()
forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。
语法:
arr[].forEach(function(value,index,array){
//do something
})
参数:
参数 | 描述 |
item | 每次循环的当前元素 |
index | 当前项的索引 |
array | 原始数组 |
数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
实例1.
var list = [32, 93, 77, 53, 38, 87];
var res = list.forEach(function (item, index, array) {
console.log(item, index, array);
});
console.log(res);
打印结果:
实例2: 数组中元素的和
var list = [32, 93, 77, 53, 38, 87];
var sum = 0;
list.forEach(function (item) {
console.log(item);
sum += item;
});
console.log(sum);
打印结果:
13、map();
map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
。
功能: 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 ,
同forEach()
方法,但是map()
方法有返回值,可以return
出来;
语法:
arr[].map(function(item,index,array){
//do something
return XXX
})
参数:
参数 | 描述 |
item | 每次循环的当前元素 |
index | 当前项的索引 |
array | 原始数组 |
示例:
下面代码利用map
方法实现数组中每个数求平方。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
var list = [32, 93, 77, 53, 38, 87];
var res = list.map(function (item, index, array) {
return item + 5 * 2;
});
console.log("原数组", list);
console.log("新数组", res);
打印结果:
14、filter()
filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。
功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中.
语法:
arr[].filter(function(item,index,array){
//do something
return XXX //条件
})
参数:
参数 | 描述 |
item | 每次循环的当前元素 |
index | 当前项的索引 |
array | 原始数组 |
示例:
var list = [32, 93, 77, 53, 38, 87];
var resList = list.filter(function (item, index, array) {
return item >= 60; // true || false
});
console.log(resList);
打印结果:
15、every()
every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true
。
功能:遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true
只要有一个不满足 返回false
=> 判断数组中所有的元素是否满足某个条件
示例:
var list = [32, 93, 77, 53, 38, 87];
var result = list.every(function (item, index, array) {
console.log(item, index, array);
return item >= 50;
});
console.log(result);
打印结果:false
16、some()
some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true
。
功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true
,都不满足返回false
=> 判断数组中是否存在,满足某个条件的元素
示例:
var list = [32, 93, 77, 53, 38, 87];
var result = list.some(function (item, index, array) {
return item >= 50;
});
console.log(result);
打印结果:true
17、reduce()和 reduceRight()
这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。
这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。
传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。
reduce()
功能::遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev
,传入到下一次函数中, 返回最终操作的结果;
语法: arr.reduce(function(prev,item,index,array){})
参数:
参数 | 描述 |
prev | 初始值 (类似求和是 sum=0) 可以设置初始值( 参数),如果不设置初始值默认是数组中的第一个元素,遍历时从第二个元素开始遍历 |
item | 每次循环的当前元素 |
index | 每次循环的当前下标 |
array | 原数组 |
实例1: 不设置初始值的累加
var arr = [2, 3, 4, 5];
var sum = arr.reduce(function (prev, item, index, array) {
console.log(prev, item, index, array);
return prev + item;
});
console.log(arr, sum);
打印结果:
解析:
第一次循环:
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 设置初始值的累加
var arr = [2, 3, 4, 5];
var sum = arr.reduce(function (prev, item, index, array) {
console.log(prev, item, index, array);
return prev + item;
}, 0);
console.log(arr, sum);
打印结果:
解析:
可以看到与上一次设置初始值相比,最终的结果相同,但是多循环的一次,因为设置了prev
的初始值为0,所以循环遍历从第一个元素开始,而不设置初始值,循环从第一个元素开始.
reduceRight();
功能: 用法同reduce
,只不过是从右向左
18、includes()
功能: 用来判断一个数组是否包含一个指定的值,如果是返回 true
,否则false
。
实例
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
19、Array.from()
功能: 将一个类数组对象或者可遍历对象转换成一个真正的数组
注意: 将一个类数组对象转换为一个真正的数组,必须具备以下条件:
- 该 伪数组 / 类数组 对象必须具有
length
属性,用于指定数组的长度。如果没有length
属性,那么转换后的数组是一个空数组。 - 该 伪数组 / 类数组 对象的属性名必须为数值型或字符串型的数字
代码演示:
var all = {
0: "张飞",
1: "28",
2: "男",
3: ["率土", "鸿图", "三战"],
length: 4,
};
var list = Array.from(all);
console.log(all);
console.log(list, Array.isArray(list));
打印结果:
20、find()
功能: 遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的第一个元素,不存在则返回undefined
参数
参数 | 选项 | 描述 |
item | 必选 | 循环当前元素 |
index | 可选 | 循环当前下标 |
array | 可选 | 当前元素所属的数组对象 |
实例:
var list = [55, 66, 77, 88, 99, 100];
var index = list.find(function (item, index, array) {
console.log(item, index, array);
return item > 60;
});
console.log(index); //66
打印结果:
为66,每次循环判断当前元素是否满足条件,如果满足直接跳出循环,返回第一个满足条件的元素
21、findIndex()
功能 :遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在则返回-1
参数:
参数 | 选项 | 描述 |
item | 必选 | 循环当前元素 |
index | 可选 | 循环当前下标 |
array | 可选 | 当前元素所属的数组对象 |
注意:findIndex()
;和indexOf()
;不同 (刚接触时乍一看和indexOf()
怎么一模一样,仔细看了下才发现大有不同)
indexOf
是传入一个值.找到了也是返回索引,没有找到也是返回-1
,属于ES5
findIndex
是传入一个测试条件,也就是函数,找到了返回当前项索引,没有找到返回-1
. 属于ES6
实例:
var list = [55, 66, 77, 88, 99, 100];
var index = list.findIndex(function (item, index, array) {
console.log(item, index, array);
return item > 60;
});
console.log(index); // 1
打印结果:
为1, 循环步骤和find()
方法一样,但是它返回的是下标,find()
返回的是满足条件的元素
22、fill()
功能: 用给定值填充一个数组
参数:
参数 | 选项 | 描述 |
value | 必选 | 填充的值。 |
start | 可选 | 开始填充位置 |
end | 可选 | 停止填充位置 (默认为 array.length) |
实例:
var result = ["a", "b", "c"].fill("填充", 1, 2);
打印结果:
23、flat()
功能: 用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数据没有影响。
注意: 默认拉平一次 如果想自定义拉平此处 需要手动传参 ,如果想全都拉平 传 Infinity
var list = [1, 2, [3, 4, [5]]];
var arr = list.flat(); // 默认拉平一次
console.log("拉平一次", arr);
var arr = list.flat(2); // 拉平2次
console.log("拉平两次", arr);
打印结果:
24、flatMap()
功能 :flat()
和map()
的组合版 , 先通过map()
返回一个新数组,再将数组拉平( 只能拉平一次 )
var list = [55, 66, 77, 88, 99, 100];
var newArr = list.map(function (item, index) {
return [item, index];
});
console.log("Map方法:", newArr);
var newArr = list.flatMap(function (item, index) {
return [item, index];
});
console.log("flatMap方法:", newArr);
打印结果: