javascript数组的常用方法
数组的添加和删除
方法 | 描述 | 备注 |
---|---|---|
push() | 向数组的最后面插入一个或多个元素,返回结果为该数组新的长度 | 会改变原数组 |
pop() | 删除数组中的最后一个元素,返回结果为被删除的元素 | 会改变原数组 |
unshift() | 在数组最前面插入一个或多个元素,返回结果为该数组新的长度 | 会改变原数组 |
shift() | 删除数组中的第一个元素,返回结果为被删除的元素 | 会改变原数组 |
push()和pop举例如下:
var arr=["用户1","用户2","用户3","用户4"]
//push()方法,向最后添加一个元素,返回结果为该数组新的长度
var length=arr.push("用户x")
console.log(length)
console.log(JSON.stringify(arr))
//pop() 删除最后一个元素,,返回结果为被删除的元素
var a=arr.pop();
console.log(a)
console.log(JSON.stringify(arr))
运行结果:
unshift()和shift()举例
var arr=["用户1","用户2","用户3","用户4"]
//unshift()方法,向最后添加一个元素,返回结果为该数组新的长度
var length=arr.unshift("用户x")
console.log(length)
console.log(JSON.stringify(arr))
//shift()方法,删除数组中的第一个元素,返回结果为被删除的元素
var a=arr.shift();
console.log(a)
console.log(JSON.stringify(arr))
结果:
数组的常用方法
方法 | 描述 | 备注 |
---|---|---|
slice() | 在数组最前面插入一个或多个元素,返回结果为该数组新的长度 | 不会改变原数组 |
splice() | 从数组中删除指定的一个或多个元素,返回删除的内容 | 会改变原数组 |
concat() | 连接两个或多个数组,返回结果为新的数组 | 不会改变原数组 |
join() | 将数组转换为字符串,返回结果为转换后的字符串 | 不会改变原数组 |
reverse() | 反转数组,返回结果为反转后的数组 | 会改变原数组 |
sort() | 对数组的元素,默认按照Unicode编码,从小到大进行排序 | 会改变原数组 |
slice()例子:
var arr=["用户0","用户1","用户2","用户3"];
/*slice(开始位置的索引, 结束位置的索引(不包含此位置的值)):
从数组中提取指定的一个或者多个元素,返回结果为新的数组*/
var a=arr.slice(0,2) //提取第0-1元素
var b = arr.slice(-2); //提取最后两个元素
var c = arr.slice(1); //从第1个元素开始提取
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));
console.log(JSON.stringify(c));
结果:
【注】很多前端开发人员会用 slice()将伪数组,转化为真数组。写法如下:
function fn(){
//此时newarr是可以操作的真数组
var newarr=Array.prototype.slice(arguments);
console.log(newarr)
}
fn(1,2,3,4,5)
ES6 出了一个新的 API:(专门用来将伪数组转化成真数组)
array = Array.from(arrayLike)
splice() 例子:
这个方法既可以删除也可以添加。使用方法如下:
新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...);
具体例子
var arr=["用户0","用户1","用户2","用户3","用户4","用户5"];
//splice():从数组中删除指定的一个或多个元素,返回删除的内容
var a=arr.splice(1,2);//删除从1开始的两个元素
console.log(JSON.stringify(a));
console.log(JSON.stringify(arr));
//删除从0元素开始的一个元素,且在删除后的0元素前插入两个元素
var b=arr.splice(0,1,"用户a","用户b")
console.log(JSON.stringify(b));
console.log(JSON.stringify(arr));
concat()例子
格式:
新数组 = 数组1.concat(数组2, 数组3 ...);
var arr1=["用户0","用户1","用户2"];
var arr2=["用户3","用户4","用户5"];
// concat():连接两个或多个数组,返回结果为新的数组。
var newarr=arr1.concat(arr2);
console.log(JSON.stringify(newarr))
结果:
join例子
可以指定连接符。
var arr1=["用户0","用户1","用户2"];
//将数组转换为字符串,返回结果为转换后的字符串
console.log(arr1.join());//此时和toString()方法作用一样
console.log(arr1.toString())
console.log(arr1.join("-"));
console.log(arr1.join(""));
结果:
reverse()例子
var arr1 = ["a", "b", "c", "d", "e", "f"];
// 将数组 arr1 进行反转,返回结果为反转后的数组
var arr2 = arr1.reverse();
console.log("arr1 =" + JSON.stringify(arr1));
console.log("arr2 =" + JSON.stringify(arr2));
运行结果:
sort()例子
1、如果在使用 sort() 方法时不带参,则默认按照Unicode编码
var arr=[1,13,2,5,34,334];
var newarr=arr.sort();//按照Unicode编码排序
console.log(JSON.stringify(newarr));
console.log(JSON.stringify(arr));
结果:
2、sort()方法带参时
可以在sort()添加一个回调函数,来指定排序规则。回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器根据回调函数的返回值来决定元素的排序:(重要)
如果返回一个大于0的值,则元素会交换位置
如果返回一个小于0的值,则元素位置不变
如果返回一个0,则认为两个元素相等,则不交换位置
var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
if (a > b) { // 如果 a 大于 b,则交换 a 和 b 的位置
return 1;
} else if (a < b) { // 如果 a 小于 b,则位置不变
return -1;
} else { // 如果 a 等于 b,则位置不变
return 0;
}
});
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));
运行结果
还有一种简单些的格式,结果一样:
var arr3 = [5, 2, 11, 3, 4, 1];
// 自定义排序规则
var result = arr3.sort(function(a, b) {
return a - b; // 升序排列
// return b - a; // 降序排列
});
console.log("arr3 =" + JSON.stringify(arr3));
console.log("result =" + JSON.stringify(result));
数组的遍历
forEach() 遍历
forEach()方法需要一个函数作为参数。这种函数,是由我们创建但是不由我们调用的,我们称为回调函数。
数组中有几个元素,该回调函数就会执行几次。执行完毕后,浏览器会将遍历到的元素。
回调函数中传递三个参数:
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遍历的元素的索引
第三个参数,就是正在遍历的数组
例子:
var arr = ["用户1", "用户2", "用户3"];
arr.forEach(function(item, index, obj) {
console.log("item:" + item); //当前正在遍历的元素
console.log("index:" + index); //元素的索引
console.log("obj:" + obj);
console.log("----------");
});
运行结果:
map()方法
对数组中每一项运行回调函数,返回该函数的结果,组成的新数组。
例子:
var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.map(function (item, index) {
return item + 10; //让arr1中的每个元素加10
})
console.log(arr2);
结果
map()方法可以抽取数组的属性值,成为数组。
var arr1=[{name:"小明",age:18},
{name:"小李",age:19}]
var arr2=arr1.map(item => item.name);
console.log(arr2)
结果:
filter()方法的应用
对数组中每一项运行回调函数,该函数返回结果是true的项,将组成新的数组
var arr1 = [1, 3, 6, 2, 5, 6];
//将arr1中大于4的元素返回,组成新的数组
var arr2 = arr1.filter(function(item, index) {
if(item>4){
return true;
}else{
return false;
}
});
console.log(JSON.stringify(arr2));
运行结果
ES6中写成:
var arr1 = [1, 3, 6, 2, 5, 6];
//将arr1中大于4的元素返回,组成新的数组
var arr2 = arr1.filter(item=> item > 4);
console.log(JSON.stringify(arr2));
every()方法的应用
every():对数组中每一项运行回调函数,如果都返回true,every就返回true;如果有一项返回false,则停止遍历,此方法返回false。
例子如下:
var arr=[{name:"商品0",price:20},{name:"商品1",price:150},
{name:"商品2",price:30},{name:"商品3",price:100}]
var result=arr.every(function(item,index,arr){
if(item.price>10){
return true;
}else{
return false
}
})
console.log("所以商品价格是否都大于10元:"+result);
结果:
some()方法应用
some():对数组中每一项运行回调函数,只要有一项返回true,则停止遍历,此方法返回true。此方法是找到一个符合条件的就可以了,和every相对。
例子:
var arr=[{name:"商品0",price:20},{name:"商品1",price:150},
{name:"商品2",price:30},{name:"商品3",price:100}]
var result=arr.some(function(item,index,arr){
if(item.price<10){
return true;
}else{
return false
}
})
console.log("是否至少有一个商品价格小于10元:"+result);
reduce()方法
为数组中的每一个元素,依次执行回调函数。
当需要对每个内容进行遍历,并且最终输出1个结果的时候,就可以使用reduce。
例子:
var arr=[{name:"商品0",price:20},{name:"商品1",price:150},
{name:"商品2",price:30},{name:"商品3",price:100}]
var result=arr.reduce(function(total,item,index,arr){
return total+item.price;
},0)//0为初始值,给第一个参数的初始值
console.log("商品的总价格是:"+result);
结果:
其他方法:
方法 | 描述 |
---|---|
indexOf(value) | 从前往后索引,获取 value 在数组中的第一个下标 |
lastIndexOf(value) | 从后往前索引,获取 value 在数组中的最后一个下标 |
find(function()) | 找出第一个满足「指定条件返回true」的元素。 |
findIndex(function()) | 找出第一个满足「指定条件返回true」的元素的index |
Array.from(arrayLike) | 将伪数组转化为真数组 |
Array.of(value1, value2, value3) | 将一系列值转换成数组。 |
indexOf() 和 lastIndexOf():获取数据的索引
- indexOf(value):从前往后索引,获取 value 在数组中的第一个下标。
- lastIndexOf(value) :从后往前索引,获取 value 在数组中的最后一个下标。
不存在返回-1
var arr=["洗衣机","手机","电脑","游戏机","洗衣机"]
var result1=arr.indexOf("洗衣机")
var result2=arr.lastIndexOf("洗衣机")
console.log(result1);
console.log(result2);
结果:
find()的应用
格式:
find(function(item, index, arr){return true})
作用:找出第一个满足「指定条件返回true」的元素。返回该元素。
例子:
var arr=[{name:"商品0",price:20},{name:"商品1",price:150},
{name:"商品2",price:30},{name:"商品3",price:30}]
var result=arr.find(function(item,index,arr){
if(item.price==30){
return true
}else{
return false
}
})
]console.log(result);
结果:
findIndex()应用
格式:
findIndex(function(item, index, arr){return true})
作用:找出第一个满足「指定条件返回true」的元素的index,返回index。
例子:
var arr=[{name:"商品0",price:20},{name:"商品1",price:150},
{name:"商品2",price:30},{name:"商品3",price:30}]
var result=arr.findIndex(function(item,index,arr){
if(item.price==30){
return true
}else{
return false
}
})
]console.log(result);
结果:
Array.from()应用
伪数组与真数组的区别:
伪数组的原型链中没有 Array.prototype,而真数组的原型链中有 Array.prototype。因此伪数组没有 pop、join等属性。
array = Array.from(arrayLike)
作用:将伪数组或可遍历对象转换为真数组。
例子:
var fn=function(){
var newarr=Array.from(arguments);
console.log(newarr);
}
fn(1,2,3,4,5,6);
结果:
补充的一些方法
1、Array.of()应用(不常用)
var arr = Array.of(1, 'abc', true);
console.log(arr);
2、isArray():判断是否为数组
检测伪数组时是返回false
布尔值 = Array.isArray(被检测的值) ;
3、toString():转换数组
字符串 = 数组.toString();