关于Array对象的知识点
Array对象
在JavaScript中,数组是一种特殊类型的对象,typeof 检测数组会返回 object。数组长度可变,数组的元素可以是数字、字符或对象等任意类型,可以通过索引号来访问数组元素
创建Array对象
使用数组文本
var arr1 = []; // 创建一个空数组
var arr2 = [1, 2, 3, 4];
使用new关键字
var arr1 = new Array(); // 创建一个空数组
var arr2 = new Array(4); // 创建一个指定长度的数组
var arr3 = new Array(1,2,3,4); // 创建一个有初始化元素的数组
Array对象的属性
length
属性返回数组的长度(数组元素的数目)
var arr = [1, 2, 3, 4];
console.log(arr.length); // 4
Array对象的方法
方法 | 作用 | 改变数组? | 版本 |
---|---|---|---|
concat() | 连接两个或多个数组,返回连接后的新数组 | No | ES1 |
join() | 将数组元素放入字符串,以指定字符分隔 | No | ES1 |
push() | 向数组末尾添加一个元素,返回新数组长度 | Yes | ES1 |
pop() | 删除数组末尾元素,并返回该元素 | Yes | ES1 |
shift() | 删除数组第一个元素,并返回该元素 | Yes | ES1 |
unshift() | 向数组开头添加一个或多个元素,并返回新数组长度 | Yes | ES1 |
reverse() | 颠倒数组元素顺序,并返回新数组 | Yes | ES1 |
sort() | 将数组元素按序排序(默认升序),并返回新数组 | Yes | ES1 |
slice() | 截取指定位置的数组,并返回该片段 | No | ES1 |
splice() | 删除数组某片段,可设置替换项,并返回被删除的数据 | Yes | ES1 |
toString() | 将数组转换为字符串,并返回字符串 | No | ES1 |
indexOf() | 查询并返回指定数据第一次在数组中出现的索引值,不存在则返回-1 | No | ES5 |
lastIndexOf() | 反序查找并返回指定数据第一次在数组中出现的索引值,不存在则返回-1 | No | ES5 |
forEach(callback) | 遍历数组每一项,无返回值 | No | ES5 |
map(callback) | 同forEach,callback返回数据,由map组成新数组返回 | No | ES5 |
filter(callback) | 同forEach,callback返回布尔值,为true的数据由filter组成新数组返回 | No | ES5 |
every(callback) | 同forEach,callback返回布尔值,全部为true则every返回true | No | ES5 |
some(callback) | 同forEach,callback返回布尔值,一个为true则some返回true | No | ES3 |
reduce(callback,initial) | 遍历并迭代数组所有项,构建一个最终值由reduce返回 | No | ES5 |
reduceRight(callback,initial) | 反向遍历并迭代数组所有项,构建一个最终值由reduceRight返回 | No | ES5 |
find(callback) | 查询并返回数组中第一个通过测试的元素的值,不存在则返回undefined | No | ES6 |
findIndex(callback) | 查询并返回数组中第一个通过测试的元素的索引值,不存在则返回-1 | No | ES6 |
flat(depth) | 实现数组扁平化,将数组中所有元素以及子数组的元素合并为一个新数组返回 | No | ES6+ |
concat()
方法连接两个或多个数组,返回连接后的新数组。此方法不改变原数组
var arr1 = [1, 2, 3];
var arr2 = ["hello", "world"];
var arrConcat = arr1.concat(arr2);
console.log(arrConcat); // [1, 2, 3, "hello", "world"]
console.log(arr1); // [1, 2, 3]
join()
方法用指定字符将数组元素拼接成字符串,并返回该字符串。此方法不改变原数组
var arr1 = [1, 2, 3];
var arrJoin = arr1.join('.');
console.log(arrJoin); // 1.2.3
console.log(arr1); // [1, 2, 3]
push()
方法向数组末尾添加元素,返回新数组的长度。此方法会改变原数组
var arr1 = [1, 2, 3];
var arrPush = arr1.push(4);
console.log(arrPush); // 4
console.log(arr1); // [1, 2, 3, 4]
pop()
方法删除数组最后一项,并返回被删除的元素。此方法会改变原数组
var arr1 = [1, 2, 3];
var arrPop = arr1.pop();
console.log(arrPop); // 3
console.log(arr1); // [1, 2]
shift()
方法删除数组第一项,并返回被删除的元素。此方法会改变原数组
var arr1 = [1, 2, 3];
var arrShift = arr1.shift();
console.log(arrShift); // 1
console.log(arr1); // [2, 3]
unshift()
方法向数组开头添加一个或多个元素,并返回新数组的长度。此方法会改变原数组
var arr1 = [1, 2, 3];
var arrUnshift = arr1.unshift(0);
console.log(arrUnshift); // 4
console.log(arr1); // [0, 1, 2, 3]
var arrUnshift1 = arr1.unshift(1, 2);
console.log(arrUnshift1); // 6
console.log(arr1); // [1, 2, 0, 1, 2, 3]
var arrUnshift2 = arr1.unshift([0]);
console.log(arrUnshift2); // 7
console.log(arr1); // [[0], 1, 2, 0, 1, 2, 3]
reverse()
方法颠倒数组元素顺序,并返回新的数组。此方法会改变原数组
var arr1 = [1, 2, 3];
var arrReverse = arr1.reverse();
console.log(arrReverse); // [3, 2, 1]
console.log(arr1); // [3, 2, 1]
sort()
方法将数组排序,返回新数组,默认升序排序。此方法会改变原数组
注意
:这里的排序是针对字符的排序
,不是 Number 型的数据排序。先使用数组的 toString() 方法转为字符串,再逐位比较,3是大于12的,因为首位3>1
var arr1 = [12, 3, 0, 45];
var arrSort = arr1.sort();
console.log(arrSort); // [0, 12, 3, 45]
console.log(arr1); // [0, 12, 3, 45]
sort(callback)
给 callback 传参,设定返回值,即可按照数值排序。返回值表明两个数之间的相对顺序
var arr1 = [12, 3, 0, 45];
var arrSort = arr1.sort(function(a,b){
return a-b; // a<b
});
console.log(arrSort); // [0, 3, 12, 45]
console.log(arr1); // [0, 3, 12, 45]
slice(start, end)
方法截取 start 至 end 下标的子数组(不包括 end),返回子数组。此方法不改变原数组
var arr1 = [1, 2, 3, 4];
var arrSlice = arr1.slice(0, 2);
console.log(arrSlice); // [3, 4]
console.log(arr1); // [1, 2, 3, 4]
splice(start, num, [arg])
方法删除从start 开始的 num 个元素
,若指定 [arg],则将 [arg] 代替被删除的片段,并返回被删除的子数组。此方法会改变原数组
注意
:替代项整体替代被删除的片段,放入数组中
var arr1 = [1, 2, 3, 4, 5, 6];
var arrSplice1 = arr1.splice(0, 2);
console.log(arrSplice1); // [1, 2]
console.log(arr1); // [3, 4, 5, 6]
var arrSplice2 = arr1.splice(0, 2, [0, 1]);
console.log(arrSplice2); // [3, 4]
console.log(arr1); // [[0, 1], 5, 6]
console.log(arr1[0]); // [0, 1]
toString()
方法将数组转换成字符串,并返回该字符串。此方法不改变原数组
var arr1 = [1, 2, 3, 4];
var arrString = arr1.toString();
console.log(arrString); // 1,2,3,4
indexOf(arg, start)
方法从左往右
,查找 arg 在数组中出现的位置,一旦找到就停止查询并返回其索引值
,未找到则返回 -1。若设置 start 参数,表示从 start 处开始往右查找
var arr1 = [1, 2, 3, 4, 2, 3];
var arrIndexOf = arr1.indexOf(2);
console.log(arrIndexOf); // 1
arrIndexOf = arr1.indexOf(2, 2); // 从索引值2开始往后查询,数字2第一次出现的索引值
console.log(arrIndexOf); // 4
arrIndexOf = arr1.indexOf(2, -2); // 从倒数第2位开始往后查询,数字2第一次出现的索引值
console.log(arrIndexOf); // 4
lastIndexOf(arg, start)
方法从右往左
,查找 arg 在数组中的位置,一旦找到就停止查询并返回其索引值
,未找到则返回 -1。若设置 start 参数,表示从 start 处开始往左查找
var arr1 = [1, 2, 3, 4, 2, 3, 7, 3];
var arrLastIndexOf = arr1.lastIndexOf(3);
console.log(arrLastIndexOf); // 7
arrLastIndexOf = arr1.lastIndexOf(3, 3); // 从索引值3开始往前查询,数字3第一次出现的索引值
console.log(arrLastIndexOf); // 2
arrLastIndexOf = arr1.lastIndexOf(3, -3); // 从倒数第3位开始往前查询,数字3第一次出现的索引值
console.log(arrLastIndexOf); // 5
forEach(callback)
方法可以遍历数组元素。不生成新的数组
注意
:callback 回调函数有3个参数,分别是:value
(当前遍历的数组元素)、index
(对应的索引值)、self
(数组自身),forEach 方法无返回值,且无法使用 break 跳出循环,一旦开始就会一直遍历,直到遍历完成最后一个元素
var arr1 = [1, 2, 3];
var arrForEach = arr1.forEach(function(value, index, self) {
console.log("index="+index+",value="+value+",self="+self);
});
console.log(arrForEach); // undefined
map(callback)
方法遍历数组元素。会生成一个新的数组,新数组长度与被遍历数组相等
注意
:callback 可设置返回值,map 会将回调函数的返回值组成新数组并返回
var arr1 = [1, 2, 3];
var arrMap1 = arr1.map(function(value, index, self) {
console.log("index="+index+",value="+value+",self="+self);
});
console.log(arrMap1); // [undefined, undefined, undefined]
var arrMap2 = arr1.map(function(value, index, self){
return "arr1["+index+"]="+value;
});
console.log(arrMap2); // ["arr1[0]=1", "arr1[1]=2", "arr1[2]=3"]
filter(callback)
方法遍历数组元素。会生成一个新的数组
注意
:callback 返回布尔值,filter 将返回 true 的数据组成新数组并返回
var arr1 = [1, 2, 3];
var arrFilter1 = arr1.filter(function(value, index, self) {
console.log("index="+index+",value="+value+",self="+self);
});
console.log(arrFilter1); // []
var arrFilter2 = arr1.filter(function(value, index, self){
return value > 2;
});
console.log(arrFilter2); // [3]
every(callback)
方法可以遍历数组元素,判断数组中每一项是否都满足条件,所有项
满足条件时返回true。
注意
:callback 返回布尔值,返回 true 继续遍历,返回 false 立即停止遍历。每次回调函数的返回值都是 true 时,every 最终返回 true;只要有一次返回 false,every 就返回 false
var arr1 = [1, 2, 3];
var arrEvery1 = arr1.every(function(value, index, self) {
console.log("index="+index+",value="+value+",self="+self);
// 没有返回值默认返回undefined,等同于返回false
// 只打印 index=0,value=1,self=1,2,3
});
console.log(arrEvery1); // false
var arrEvery2 = arr1.every(function(value, index, self){
console.log("index="+index+",value="+value+",self="+self);
return value < 2;
// 只打印 index=0,value=1,self=1,2,3
});
console.log(arrEvery2); // false
var arrEvery3 = arr1.every(function(value, index, self){
console.log("index="+index+",value="+value+",self="+self);
// 所有项都符合条件,因此全部打印
return value < 4;
});
console.log(arrEvery3); // true
some(callback)
方法可以遍历数组元素,判断数组中是否存在满足条件的项,有一项
满足条件就返回true。
注意
:callback 返回布尔值,返回 false 继续遍历,返回 true 立即停止遍历。每次回调函数的返回值都是 false 时,some 最终返回 false;只要有一次返回 true,some 就返回 true
var arr1 = [1, 2, 3];
var arrSome1 = arr1.some(function(value, index, self) {
console.log("index="+index+",value="+value+",self="+self);
// 没有返回值默认返回undefined,等同于返回false
// 遍历了所有项
});
console.log(arrSome1); // false
var arrSome2 = arr1.some(function(value, index, self){
console.log("index="+index+",value="+value+",self="+self);
return value > 0;
// 只打印 index=0,value=1,self=1,2,3
});
console.log(arrSome2); // true
var arrSome3 = arr1.some(function(value, index, self){
console.log("index="+index+",value="+value+",self="+self);
return value < 1;
// 所有项都不符合条件,因此全部打印
});
console.log(arrSome3); // false
reduce(callback, initial)
方法从数组的第一项开始逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。
注意
:callback 回调函数有4个参数,分别是:prev
、next
、index
(当前项 next 在数组中的索引值)、self
(数组自身)。initial
参数是第一次遍历时 callback 的 prev,若省略,则第一次遍历时 callback 的 prev 为数组第一项,next 为数组第二项。callback 每次被调用的返回值,都会被作为下一次调用的 prev
。reduce 返回最终回调函数的返回值
var arr1 = [1, 2, 3];
var arrReduce1 = arr1.reduce(function(prev, next, index, self) {
console.log("prev="+prev+",next="+next+",index="+index);
// 没有返回值默认返回undefined
// prev=1,next=2,index=1
// prev=undefined,next=3,index=2
// prev=undefined,next=0,index=3
});
console.log(arrReduce1); // undefined
var arrReduce2 = arr1.reduce(function(prev, next, index, self){
console.log("prev="+prev+",next="+next+",index="+index);
return prev + next;
// prev=1,next=2,index=1
// prev=3,next=3,index=2
// prev=6,next=0,index=3
});
console.log(arrReduce2); // 6
var arrReduce3 = arr1.reduce(function(prev, next, index, self){
console.log("prev="+prev+",next="+next+",index="+index);
return prev + next;
// prev=1,next=1,index=0
// prev=2,next=2,index=1
// prev=4,next=3,index=2
// prev=7,next=0,index=3
},1);
console.log(arrReduce3); // 7
reduceRight(callback, initial)
方法从数组的最后项往前逐个遍历,迭代数组的所有项,然后构建一个最终返回的值。
注意
:callback回调函数有4个参数,分别是:prev
、next
、index
(当前项 next 在数组中的索引值)、self
(数组自身)。initial
参数是第一次遍历时 callback 的 prev,若省略,则第一次遍历时 callback 的 prev 为数组最后一项,next 为数组倒数第二项。callback 每次被调用的返回值,都会被作为下一次调用的 prev
。reduce 返回最终回调函数的返回值
var arr1 = [1, 2, 3];
var arrReduce1 = arr1.reduce(function(prev, next, index, self) {
console.log("prev="+prev+",next="+next+",index="+index);
// 没有返回值默认返回undefined
// prev=3,next=2,index=1
// prev=undefined,next=1,index=0
});
console.log(arrReduce1); // undefined
var arrReduce2 = arr1.reduce(function(prev, next, index, self){
console.log("prev="+prev+",next="+next+",index="+index);
return prev + next;
// prev=3,next=2,index=1
// prev=5,next=1,index=0
});
console.log(arrReduce2); // 6
var arrReduce3 = arr1.reduce(function(prev, next, index, self){
console.log("prev="+prev+",next="+next+",index="+index);
return prev + next;
// prev=1,next=3,index=2
// prev=4,next=2,index=1
// prev=6,next=1,index=0
},1);
console.log(arrReduce3); // 7
find(callback)
方法查找数组中第一个
满足测试函数的元素的值
,若元素不存在则返回 undefined。此方法不改变原数组
var arr1 = [1, 2, 3, 4, 5, 9, 10];
var arrFind = arr1.find(function(value,index,self) {
return value >= 7
});
console.log(arrFind); // 9
findIndex(callback)
方法查找数组中第一个
满足测试函数的元素的索引值
,若元素不存在则返回 -1。此方法不改变原数组
var arr1 = [1, 2, 3, 4, 5, 9, 10];
var arrFindIndex = arr1.findIndex(function(value,index,self) {
return value >= 7
});
console.log(arrFindIndex); // 5
flat(depth)
方法按照指定深度 depth(默认为1)递归遍历数组,在遍历过程中会自动去除数组中的空项(即值为 undefined 的元素)。此方法不改变原数组
var arr1 = [1, , [3, 4]];
arr1.flat();
// [1, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
arr2.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity,可展开任意深度的嵌套数组
var arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]