11.数组：Array

1. 数组的5种遍历：

（1）forEach()--返回永远是undefind:

let total=null;
let arr=[10,20,30];
let result=arr.forEach(item=>{
    total+=item;
    return item+5;
})
console.log(total); //60
console.log(arr); //[10,20.30]
console.log(result); //undefined

（2）map()--返回一个新数组:

let arr=[10,20,30];
let result=arr.map(item=>{
    return item+5;
})
console.log(arr); //[10,20.30]
console.log(result); //[15,25.35]

（3）filter()--筛选符合条件的:

let arr=[10,20,30];
let result=arr.filter(item=>{
    return item>=15;
})
console.log(arr); //[10,20.30]
console.log(result); //[20,30]

（4）find()--只要找到一个符合的就停止遍历:

let arr=[10,20.30];
let result=arr.find(item=>{
    return item>=15;
})
console.log(arr); //[10,20.30]
console.log(result); //20

（5）reduce(函数，初始值)--返回累加后的值:   注意后面有个初始值0

let arr=[{price:10,num:1},{price:20,num:2},{price:30,num:3}];
let result=arr.reduce((pre,cur)=>{
    return cur.price+pre;
},0);
console.log(arr[0]); //[{price:10,num:1}]
console.log(result); //60

（6）some和every--返回的是布尔值，上面那些返回的是数据:

some是数组中只要有一个符合条件就返回true,every是每一个元素都符合条件才返回true

let arr=[10,20.30];
let result=arr.some(item=>{
    return item>=15;
})
let result2=arr.every(item=>{
    return item>=15;
})
console.log(arr); //[10,20.30]
console.log(result); //true
console.log(result2); //false

 

2. 数组去重：

（1）普通数组去重:

//方法一：reduce（）方法去重
let arr=[1,2,3,4,4,1];
let newArr=arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre,concat(cur);
    }else{
        return pre;
    }
},[]);
console.log(newArr); //[1,2,3,4]

//方法二：将数组转换成Set，再转换为数组(只针对基本数据类型组成的数组)
let arr=[1,2,3,4,4,1];
let arr2=new Set(arr);
let arr3=[...arr2];
console.log(newArr); //[1,2,3,4]

（2）对象类数组去重:

//data
let arr=[{id:1,name:'张三'},{id:1,name:'张三'},{id:2,name:'王五'},{id:3,name:'李四'}];
let arr1=this.unique(arr);

//methods
unique(val){
    const res=new Map();
    return val.filter(item=>!res.has(item.id)&&res.set(item.id,1));
}

 

3. 数组新增属性：

（1）vue组件里:

//给数组newData添加属性price，并赋值12
this.$set(newData,'price',12)

（2）js里:

//给数组newData添加属性price，并赋值12
Vue.set(newData,'price',12)

 

4. 计算数组中每个元素出现的次数：

let name=['Alice','Bob','Tiff','Bruce','Alice'];
let nameNum=name.reduce((pre,cur)=>{
    if(cur in pre){
        pre[cur]++;
    }else{
        pre[cur]=1;
    }
    return pre;
},{});
console.log(nameNum); //{Alice:2,Bob:1,Tiff:1,Bruce:1}

 

5. 分别取出两个数组中相同的元素，和不同的元素：

let arr1=['111','222','333','444','555','666'];
let arr2=['aaa','bbb','444','555','ddd','eee'];
//获取不同元素：['aaa','bbb','ddd','eee']
let differ=arr2.filter(item=>arr1.indexOf(item)==-1); //注意：不能写大括号
//获取相同元素：['444','555']
let same=arr2.filter(item=>arr1.indexOf(item)!=-1);

 

6. 数组求和、求乘：

let arr=[1,2,3,4];
let sum=arr.reduce((x,y)=>x+y);
let mul=arr.reduce((x,y)=>x*y);
console.log(sum); //求和：10
console.log(sum); //求乘：24

 

7. 将新的数组覆盖旧数组：

this.$set(this.car,1,'苹果'); //this.$set(原始数组，哪个位置，新数据)
this.car.splice(2,1); //splice(哪个位置，删除几个)
this.car.push('苹果'); //在数组最后面添加一个元素，返回当前数组的长度
this.car.unshift('苹果'); //在数组最前面添加一个元素，返回当前数组的长度
this.car.pop(); //删除数组最后一个元素，返回删除元素的值
this.car.shift(); //删除数组第一个元素，返回删除元素的值
this.car.sort(); //返回排序后的数组
this.car.reverse(); //返回倒序后的数组

 

8. 将多维数组转化为一维：

//情况一：二维转一维
let arr=[[0,1],[2,3],[4,5]];
let arr2=arr.reduce((pre,cur)=>{
    return pre.concat(cur);
},[]);
console.log(arr2); //[0,1,2,3,4,5]
 
//情况二：多维转一维
let arr=[[0,1],[2,3],[4,[5,6,7]]];
const newArr=function(arr){
    return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
let arr2=newArr(arr);
console.log(arr2); //[0,1,2,3,4,5,6,7]

 

9. 对象类数组更改属性名：

let arr = [{ id: 1, name: "张三" },{ id: 2, name: "王五" },{ id: 3, name: "李四" }];
arr = arr.map(item => ({
    my_id: item.id,
    my_name: item.name
}));
console.log(arr); //[{my_id: 1, my_name: "张三"},{my_id: 2, my_name: "王五"},{my_id: 3, my_name: "李四"}]