JavaScript 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()连接两个或多个数组,返回连接后的新数组NoES1
join()将数组元素放入字符串,以指定字符分隔NoES1
push()向数组末尾添加一个元素,返回新数组长度YesES1
pop()删除数组末尾元素,并返回该元素YesES1
shift()删除数组第一个元素,并返回该元素YesES1
unshift()向数组开头添加一个或多个元素,并返回新数组长度YesES1
reverse()颠倒数组元素顺序,并返回新数组YesES1
sort()将数组元素按序排序(默认升序),并返回新数组YesES1
slice()截取指定位置的数组,并返回该片段NoES1
splice()删除数组某片段,可设置替换项,并返回被删除的数据YesES1
toString()将数组转换为字符串,并返回字符串NoES1
indexOf()查询并返回指定数据第一次在数组中出现的索引值,不存在则返回-1NoES5
lastIndexOf()反序查找并返回指定数据第一次在数组中出现的索引值,不存在则返回-1NoES5
forEach(callback)遍历数组每一项,无返回值NoES5
map(callback)同forEach,callback返回数据,由map组成新数组返回NoES5
filter(callback)同forEach,callback返回布尔值,为true的数据由filter组成新数组返回NoES5
every(callback)同forEach,callback返回布尔值,全部为true则every返回trueNoES5
some(callback)同forEach,callback返回布尔值,一个为true则some返回trueNoES3
reduce(callback,initial)遍历并迭代数组所有项,构建一个最终值由reduce返回NoES5
reduceRight(callback,initial)反向遍历并迭代数组所有项,构建一个最终值由reduceRight返回NoES5
find(callback)查询并返回数组中第一个通过测试的元素的值,不存在则返回undefinedNoES6
findIndex(callback)查询并返回数组中第一个通过测试的元素的索引值,不存在则返回-1NoES6
flat(depth)实现数组扁平化,将数组中所有元素以及子数组的元素合并为一个新数组返回NoES6+

concat()

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()

join() 方法用指定字符将数组元素拼接成字符串,并返回该字符串。此方法不改变原数组

var arr1 = [1, 2, 3];
var arrJoin = arr1.join('.');
console.log(arrJoin);	// 1.2.3
console.log(arr1);	// [1, 2, 3]

push()

push() 方法向数组末尾添加元素,返回新数组的长度。此方法会改变原数组

var arr1 = [1, 2, 3];
var arrPush = arr1.push(4);
console.log(arrPush);	// 4
console.log(arr1);	// [1, 2, 3, 4]

pop()

pop() 方法删除数组最后一项,并返回被删除的元素。此方法会改变原数组

var arr1 = [1, 2, 3];
var arrPop = arr1.pop();
console.log(arrPop);	// 3
console.log(arr1);	// [1, 2]

shift()

shift() 方法删除数组第一项,并返回被删除的元素。此方法会改变原数组

var arr1 = [1, 2, 3];
var arrShift = arr1.shift();
console.log(arrShift);	// 1
console.log(arr1);	// [2, 3]

unshift()

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()

reverse() 方法颠倒数组元素顺序,并返回新的数组。此方法会改变原数组

var arr1 = [1, 2, 3];
var arrReverse = arr1.reverse();
console.log(arrReverse);	// [3, 2, 1]
console.log(arr1);	// [3, 2, 1]

sort()

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()

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()

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()

toString() 方法将数组转换成字符串,并返回该字符串。此方法不改变原数组

var arr1 = [1, 2, 3, 4];
var arrString = arr1.toString();
console.log(arrString);	// 1,2,3,4

indexOf()

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()

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()

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()

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()

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()

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()

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()

reduce(callback, initial) 方法从数组的第一项开始逐个遍历到最后,迭代数组的所有项,然后构建一个最终返回的值。

注意:callback 回调函数有4个参数,分别是:prevnextindex(当前项 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()

reduceRight(callback, initial) 方法从数组的最后项往前逐个遍历,迭代数组的所有项,然后构建一个最终返回的值。

注意:callback回调函数有4个参数,分别是:prevnextindex(当前项 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()

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()

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()

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]
  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值