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();
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
