拓展-4【数组扩展方法小结2】

一.研究方向

(1).reduce

基本概念

reduce的参数为data.reduce((pre,item,index,itemArray),start)

pre:为上一次函数循环后的返回值

item:当前操作的项

index:当前操作项的下标

itemArry:当前操作的数组

start：为初始值

初始值问题

如果不赋值的化，默认Pre为数组第一项，item为数组第二项，index为1

如果数组为空，不赋初始值便开始循环为报错，有初始值则为空对象

应用问题

对象里的属性求和

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]

多维数组转化为一维

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),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

数组去重

方法一.

includes检测数组中是否包含该字符串

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唯一性去重

function quchong2(data){
    let set  = new Set(data);
    console.log([...set])
}
console.log(quchong2(arr));// [1, 2, 3, 4]

计算元素出现次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.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}

数组运算

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

感想

reduce用于在该数组中循环执行函数时使用，每次的结果都可以交到第二次函数循环中

(2).reduceRight

es6中reduceRight()方法

从右往左开始

参数和上面是一样。

let names = ['1', '2', '3', '4', '5'];

let name = names.reduceRight((pre,item)=>{
    console.log(pre,item)
}

)
console.log(name);// 5 4

(3).every

如果有一个不满足条件就停止返回数组

var res = data.every(function(elem, index, array){
    return elem.isfree =='0';
},{name: 'test'})

(4).some

如果有一个满足条件就停止且返回数组

var res = data.every(function(elem, index, array){
    return elem.isfree =='0';
},{name: 'test'})

(5).filter

只返回满足条件的数组

var newArr = data.filter(function(elem, index, array){
    return elem.inFree === '0';
},{name : 'test'})

(6).map/forEach

共同点：

     1.都是循环遍历数组中的每一项。

    2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。

   3.匿名函数中的this都是指Window。

   4.只能遍历数组。

不同点

forEach没有返回值

let names = ['1', '2', '3', '4', '5'];

let name = names.forEach((item)=>{
   return item
}

)
console.log(name);//undefined

map可以通过return操作返回值

(7)....

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

(8).for in for of

1–for … of遍历获取的是对象的键值,for … in 获取的是对象的键名

2–for … in会遍历对象的整个原型链,性能非常差不推荐使用,而for … of只遍历当前对象不会遍历原型链

3–对于数组的遍历,for … in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for … of只返回数组的下标对应的属性值

(9).keys values entries

这三个方法数组对象都可以用，说白了就是会将参数转化为数组得方法

Object.keys

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。 数组就返回下标

Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。

Object.entries()

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。 会形成二位数组

2.最终试炼

var arr1 = [
    { da: 12, list: [1, 2] },
    { da: 23, list: [3, 4] },
]

var arr2 = [
    { da: 12, list: [3, 4] },
    { da: 34, list: [1, 2] },
    { da: 23, list: [1, 2] },
]


let obj = {}
let arr = [...arr1,...arr2].reduce((pre,item)=>{
    let oda = obj[item.da]

    if(oda===undefined){
        obj[item.da] = pre.length;
        pre.push(item)
    }else{
        
        pre[oda].list = [...pre[oda].list,...item.list]
    }
return pre;
},[])
console.log(arr);

解决思路

第一我需要将上一次的循环结果交给下一次循环处理故用到了reduce

第二我需要判断数组中的对象值是否重复所以我需要再在外界声明一个对象来存储重复值的下标

所以我第一次循环为空

第二次循环的时候去判断外界的Obj中是否有这个对象值

如果有

则向pre增加当前的item，以及向外界的对象中存储对应的下标

如果没有

则访问pre[存储好的下标] = [...pre[存储好的下标].list,....item.list]

最后返回Pre即可