目录
1. 常用的数组方法
- push: 向数组的末尾添加一个或多个，并返回新的长度
- shift: 删除数组中第一个元素，并返回数组
- unshift :向数组的开头添加一个或多个元素，并返回新数组
- map :遍历数组，将a数组的某个值存储到b数组中
- isArray: 判断对象是否是数组 ,如果是数组返回true，否则返回false
- includes : 判断数组中是否包含一个指定的值,如果包含返回true，否则返回false
- forEach： 遍历数组
- filter:创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
- slice（下标） :获取==下标的数组
- splice :用于删除或添加数组中的元素
- toString():把数组转换为字符串，并返回结果。
2. 关于数组的方法，哪些方法不会改变原值
- forEach
- filter
- toString
- isArray
- slice
- some
3. 遍历数组
map、forEach、filter
4. 案例
1. push
let res=["aa","bb"],
/**第一种*/
add(){
res.push(["ccc","ddd"]);
}
console.log(res); //["aa","bb",["ccc","ddd"]]
/**第二种*/
add(){
res.push("ccc","ddd");
}
console.log(res); //["aa","bb","ccc","ddd"]
/**第三种*/
add(){
res.push(["ccc"],["ddd"]);
}
console.log(res); //["aa","bb",["ccc"],["ddd"]]2. shift
let res=["aaa","bbb","cc","dd"]
add(){
res.shift()
}
console.log(res); //["bbb","cc","dd"]3. unshift
let res=["a","b","c"]
add(){
res.unshift("aaaaa")
}
console.log(res); // ['aaaaa', 'a', 'b', 'c']4. map
let res=[
{ "id": 1, "name": "苹果", price: 80, color: "红色" },
{ "id": 2, "name": "香蕉", price: 50, color: "黄色" },
]
let newTable = [];
res.map((item) => {
if (item.id==1) {
newTable.push(item);
}
});
console.log("newdata===",newTable);
//[{"id": 1, "name": "苹果", price: 80, color: "红色"}]
console.log("olddata===",res);
//[{ "id": 1, "name": "苹果", price: 80, color: "红色" },
// { "id": 2, "name": "香蕉", price: 50, color: "黄色" },]map 获取数组中每个元素的某个属性，合并为字符串
let jieYueData=[ { "id":1, "name":"张三", "fileName":"文件1", }, { "id":2, "name":"李四", "fileName":"文件2", }, ] let city2 = jieYueData.map((value) => value.id).join(',')
5. isArray
let res=["a","b"]
let type=Array.isArray(res)
console.log(type); //true
6. includes
let res=["a","b"]
let aa=res.includes("b");
console.log(aa); //true
7. forEach
forEach 终止循环(使用抛出异常的方式跳出循环)
let jieYueData = this.tableData; let jieyueFlag = 0; //是否打开登记借阅表单 try { // 执行到item.FileFormat!=纸质时，结束循环 jieYueData.forEach(function(item,index){ if (item.FileFormat == '纸质') { jieyueFlag=1 } else { jieyueFlag = 0; throw new Error("0"); } }); } catch(e) { if(e.message!="0") throw e; }; // 下面的代码不影响继续执行 // console.log("jieyueFlag==",jieyueFlag);//下方代码
8. filter
let aa=[{
name:"name1",id:1
},{name:"name2",id:2},{name:"name3",id:3}]
let bb=aa.filter(function(item,index,aa){
console.log(item,index,aa);
return item.id==1
})
console.log(aa) //
console.log(bb) //9. slice
10 .toString
let res=["a","w","1"]
let newRes=res.toString();
console.log(newRes); //a,w,111. splice
/**第一种：从下标=2的数据开始删，删除第一个*/
let res=["aa","bb","cc"]
let newRes=res.splice(2,1);
console.log(newRes); //打印出来的是被删除的哪一个 ["cc"]
/***第二种* 从下标=2的数据开始删，删除第一个，并添加新的元素*/
let res=["aa","bb","cc"]
let newRes=res.splice(2,1,"111");
console.log(newRes); //显示被删除的元素 ["cc"]
console.log(res); //显示经过删除后又添加操作后的数据 ["aa","bb","111"]
12. sort (排序)
1. 值为字符串
1. let arr=['ff','aa','ea','abc','kul','url'] 2. arr.sort(); 3. console.log(arr); //['aa', 'abc', 'ea', 'ff', 'kul', 'url']
2. 值为数组
1. let arr1=['12','21','23','41','43','55'] 2. arr1.sort(); 3. console.log(arr1); //['12', '21', '23', '41', '43', '55'] //从小到大排序 1. let arr3=[12,3,45,5,675,1] 2. function comm(a,b){ return a-b; } 3. console.log(arr3.sort(comm)); //[1, 3, 5, 12, 45, 675] //从大到小 1. let arr4=[12,3,45,5,675,1,'123'] 2. function commm(a,b){ return b-a; } 3. console.log(arr4.sort(commm)); //[675, '123', 45, 12, 5, 3, 1] //
3. 值为json格式
1. let arr5=[ {id:1,name:"张三",age:31,school:"三中学"}, {id:2,name:"李四",age:12,school:"三中学"}, {id:3,name:"王五",age:15,school:"三中学"},] 2. function commm(key){ return function(a,b){ let a1=a[key]; let a2=b[key]; return a1-a2 } } 3. console.log("按年龄排序==",arr5.sort(commm('age'))); // 按年龄排序== [{id: 2, name: '李四', age: 12, school: '三中学'}{id: 3, name: '王五', age: 15, school: '三中学'}{id: 1, name: '张三', age: 31, school: '三中学'}]
13. some （不会改变原数组）
some为数组中的每一个元素执行一次callback函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some将会立即返回true，如果在结束都没找到就返回false。const selected = listData.some((item) => item.id === rows.id); console.log(selected); // 完整代码： /* *行点击事件 * rows ,点击表格某一行获取的值；listData:定义的表格数据 */ rowToggleSelection(rows) { const selected = listData.some((item) => item.id === rows.id); console.log(selected, "点击事件中的值1"); if (!selected) { console.log(!selected, 1); } else { console.log(selected, 2); },//item 是正在处理的数据； index 是该数据的下标； array 是处理的数组 var a = [11,50,40,3,5,80,90,4] function some(item,index,array){ console.log(item); return item>10 } a.some(some); //11 //true
ps:
1. 给数组中每个对象都插入一个字段
旧数组：tempTabledata=[{name:"哈哈哈",age:12},{name:"哈哈",age:10},{name:"哈",age:2}]
let newTable=[]
tempTabledata.map((item, index) => {
newTable.push(Object.assign({}, item, { EnabledMarkName: "" }));
});
//添加之后的数组：
newTable=[{name:"哈哈哈",age:12,EnabledMarkName:""},{name:"哈哈哈",age:12,EnabledMarkName:""},{name:"哈哈哈",age:12,EnabledMarkName:""}]新增：
map 遍历
let tempParentName ="",//定义变量
this.tempParentdata.map((item) => {
console.log(item, "遍历tempParentdata");
// 第一层
if (item.ID == n.ParentId) {
this.tempParentName = item.Text;
}
// 如果有子级
if (item.Children.length > 0) {
debugger;
// 第二层
item.Children.map((el) => {
if (el.ID == n.ParentId) {
this.tempParentName = el.Text;
}
// 如果第二层还有子级
if (el.Children.length > 0) {
// 第三层
el.Children.map((three) => {
if (three.ID == n.ParentId) {
this.tempParentName = three.Text;
}
});
}
});
}
});
console.log(this.Form, "111111111111111");forEach 遍历
1. 最简单的
//1
let selectUsers = [];
tempTabledata.forEach((item) => {
selectUsers.push({
label: item.RealName,
value: item.ID,
});
});
//2
newTable.forEach((element) => {
if (element.EnabledMark == 0) {
element.EnabledMarkName = "禁用";
} else if (element.EnabledMark == 1) {
element.EnabledMarkName = "启用";
}
});2. 稍复杂的
resData.forEach((item) => {
item.MenuName = item.Model.MenuName;
item.IsEnabled = item.Model.IsEnabled;
item.MenuURL = item.Model.MenuURL;
item.IconClass = item.Model.IconClass;
item.ModuleID = item.Model.ID;
item.ParentId = item.Model.ParentId;
//使用递归 todo
if (item.Children.length != 0) {
item.Children.forEach((item) => {
item.MenuName = item.Model.MenuName;
item.IsEnabled = item.Model.IsEnabled;
item.MenuURL = item.Model.MenuURL;
item.IconClass = item.Model.IconClass;
item.ModuleID = item.Model.ID;
item.ParentId = item.Model.ParentId;
if (item.Children.length != 0) {
item.Children.forEach((item) => {
item.MenuName = item.Model.MenuName;
item.IsEnabled = item.Model.IsEnabled;
item.MenuURL = item.Model.MenuURL;
item.IconClass = item.Model.IconClass;
item.ModuleID = item.Model.ID;
item.ParentId = item.Model.ParentId;
});
}
});
}
});
this.DepartmentData.forEach(item=>{
if (item.ID===this.DepartmentNameID){
this.DName=item.Text
}
// this.DName= item.ID===this.DepartmentNameID?item.Text:""
if (item.Children.length>0){
item.Children.forEach(item2=>{
if (item2.ID===this.DepartmentNameID){
this.DName=item2.Text
}
if (item2.Children.length>0){
item.Children.forEach(item3=> {
if (item3.ID===this.DepartmentNameID){
this.DName=item3.Text
}
})
}
})
}
})
拼接数组
1. es6 写法 [...arr, ...array]
let tempModelID = this.$refs.tree.getCheckedKeys(); //全选
let tempModelIDs = this.$refs.tree.getHalfCheckedKeys(); //半选
console.log(this.$refs.tree.getCheckedKeys(), "树ID");
let temptemp = [...tempModelID, ...tempModelIDs]; //拼接
console.log(temptemp, "传给后端");2. 数组去重(set)
let arr1 = [1,2,3,2,3]
console.log([...new Set(arr1)]) // [1, 2, 3]let arr3 = ['1','2','3','2','3']
console.log([...new Set(arr3)]) //['1', '2', '3']另外： 还可通过filter+indexOf 实现去重
let arr5=[1,3,1,5,7,3,9,23,5] let arr6=arr5.filter(function(item,i){ return i === arr5.indexOf(item); }) console.log(arr6); // [1, 3, 5, 7, 9, 23]foreach+indexOf
let newarr1 = [] let arr1 = [1,2,3,2,3] arr1.forEach(function(item, i) { if (newarr1.indexOf(item) === -1) { newarr1.push(item) } }) console.log(newarr1) //[1,2,3]
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
