今天学习vue的时候操作到了数组,用到了过滤filter(),排序sort(),太久没用到过,居然忘记有这个东西了(-_-||),借此机会重新查阅文档学习并且记录下数组的方法。
数据处理一般是后端进行操作,前端用的非常之少,所以导致我对数组的方法太过陌生。
但是应用层面来讲,较少数据直接渲染给用户看,也是可以直接使用数组方法对数据进行操作的。所以,数组方法还是必须掌握的。
整理不易,望收藏,给予肯定谢谢~
filter() 过滤筛选符合条件的数据返回一个新数组
const arrs = [{
name: 'lian',
age: 15
}, {
name: 'hao',
age: 19
}, {
name: 'wei',
age: 21
}];
console.log(arrs.filter((arr) => {
return arr.age > 18
}));
// console export: [{name: 'hao',age: 19}, {name: 'wei',age: 21}];
sort() 对数组的数据排序 ,会改变原始数组
const arrs = [{
name: 'lian',
age: 15
}, {
name: 'hao',
age: 19
}, {
name: 'wei',
age: 21
}];
console.log(arrs.sort((a, b) => {
return a.age - b.age //升序
}));
// console export:
/* 0: {
name: 'lian',
age: 15
}
1: {
name: 'hao',
age: 19
}
2: {
name: 'wei',
age: 21
}*/
console.log(arrs.sort((a, b) => {
return b.age - a.age //降序
}));
// console export:
/* 0: {name: 'wei', age: 21}
1: {name: 'hao', age: 19}
2: {name: 'lian', age: 15} */
join() 把数组中数据拼接成字符串:
const arrs = ["lian", "hao", "wei"];
console.log(arrs.join("-"));
// console export: lian-hao-wei
push() 向数组末尾添加数据
let arrs = ["lian", "hao", "wei"];
arrs.push("csdn");
console.log(arrs);
// console export: ["lian", "hao", "wei","csdn"]
pop() 删除最后一个数组数据。result:return被删除最后一个数据,原数组改变
let arrs = ["lian", "hao", "wei"];
console.log(arrs.pop("wei"));
// console export: ["wei"]
console.log(arrs);
// console export: ["lian", "hao"]
unshift() 向数组开头添加数据。result:return新数组长度
let arrs = ["lian", "hao", "wei"];
console.log(arrs.unshift("csdn"));
// console export: 4
console.log(arrs);
// console export: ["csdn","lian", "hao", "wei"]
shift() 删除第一个数组数据。result:return被删除的数据
let arrs = ["lian", "hao", "wei"];
console.log(arrs.shift());
// console export: lian
console.log(arrs);
// console export: ["hao", "wei"]
reverse() 颠倒数组
let arrs = ["lian", "hao", "wei"];
console.log(arrs.reverse());
// console export: ["wei", "hao","lian"]
console.log(arrs);
// console export:v["wei", "hao","lian"]
concat() 连接拼接数组,原数组不改变。此方法亦可以拼接字符串
let arrs = ["lian", "hao", "wei"];
let newArrs = arrs.concat("cs", "dn", ["ok"], {
name: "lian"
})
console.log(newArrs);
// console export: ["lian", "hao", "wei","cs","dn","ok",{name:"lian"}];
console.log(arrs);
// console export: ["lian", "hao", "wei"]
slice() 截取指定索引下标范围内的数据,原数组不改变
let arrs = ["lian", "hao", "wei"];
let newArrs = arrs.slice(0, 2)
console.log(newArrs);
// console export: ["lian", "hao"];
console.log(arrs);
// console export: ["lian", "hao", "wei"]
splice() 删除跟添加数据,可以说是push(),unshift(),pop(),shift()这四个方法的自定义方法。
下边是splice() 的删除操作:
let arrs = ["lian", "hao", "wei"];
let newArrs = arrs.splice(0, 1) //删除索引值0开头(包括0)后的一个数据
console.log(newArrs);
// console export: ["lian"];
console.log(arrs);
// console export: ["hao", "wei"]
下边是splice() 的添加操作:
let arrs = ["lian", "hao", "wei"];
let newArrs = arrs.splice(1, 0, "csdn") //在索引值为1的位置追加数据,0代表删除0位
console.log(newArrs);
// console export: [];
console.log(arrs);
// console export: ["lian","csdn" "hao", "wei"]