JavaScript中那些常用的数组方法/含对象数组去重方法封装

1、forEach（）

这个函数没有返回值。
基本使用

let arr = ['one','two','three']
arr.forEach(function(item,index){
     console.log(item)
     console.log(index)
 })

打印结果

在forEach函数的参数中是一个回调函数，该回调函数的中有两个形参，其中item是便利出来的数组项，index就是该项的索引。

---

2、map（）

• 在原数组的基础上，对每一个数组项进行操作，返回操作之后的新数组。map方法必须要有返回值，这个返回值是一个操作之后的新数组，如果没有返回值则会返回undefined。
• 需要定义变量去接收新的数组。

let arr = ['one','two','three']
let newArr = arr.map(function(item,index){
     return item + '123' //对数组的每一项都拼接123
 })
 console.log(arr)//打印原数组
 console.log(newArr)//打印操作之后的新数组

打印结果

可以看到打印结果是两个数组，map函数会在不改变原数组的情况下返回一个新的数组。

---

3、some（）、every（）

这两个方法有相似之处，所以一块演示。这两个函数的最终返回值都是一个Boolean值，即true|false。但是不同之处在于：

• some()：一真即真，只要有一个数组项满足条件即可，满足之后立即返回，不会继续数组的遍历，相当于||。

let arr = ['one','two','three','one']
 let one = arr.some(function(item,index){
     console.log(item) //打印遍历出来的数组项
     return item == 'one' //对数组的每一项都拼接123
 })
 console.log(one)//打印返回的boolean值

• every()：一假即假，需要所有数组项都满足条件，会对数组进行完全的遍历，相当于&&。

let arr = ['one','one','one','two']
  let one = arr.every(function(item,index){
      console.log(item) //打印遍历出来的数组项
      return item == 'one' //判断数组中每一项是否都等于one
  })
  console.log(one)//打印返回的boolean值

在开发中我会经常配合箭头函数来使用，箭头函数有一个特性就是，当运算的结果就是返回值时，不需要进行return。如下：

let arr = ['one','one','one','two']
console.log(arr.every(item=> item == 'one'))//打印返回的boolean值：false

some函数这样也同样适用，这样就可以轻易的获取到数组中的每一项是否都符合自己的表达式。

---

4、filter（）

• 字面意思，过滤，返回值是一个新数组，在原数组的基础上筛选出符合自定义条件的数组。

let arr = [1,3,5,7,9,10]
let newArr = arr.filter(function(item,index){
    console.log(item) //打印遍历出来的数组项
    return item > 5 //返回数组项大于5的新数组
})
console.log(newArr)//打印返回的新数组

打印结果

可以看到打印结果是一个符合自定义表达式的新数组。

---

5、find（）

• 有返回值，返回值是第一个符合条件的数组成员，不会将数组完全便利只要找到了符合条件的成员即返回。

let arr = [1,3,5,7,9,10]
let arrMember = arr.find(function(item,index){
      return item > 1 //返回数组项大于5的新数组
  })
  console.log(arrMember)//打印返回的数组成员：3

---

6、findIndex（）

• 有返回值，返回值是符合条件的第一个数组成员的索引值，与find不同的是find返回的是数组的成员，findIndex返回的是成员的索引。

let arr = [1,3,5,7,9,10]
let arrMemberIndex = arr.findIndex(function(item,index){
    console.log(item) //打印遍历出来的数组项
    return item > 1 //返回数组项大于5的新数组
})
console.log(arrMemberIndex)//打印返回的索引：1

---

7、includes（）、indexOf（）

• includes： 有返回值，返回值是一个布尔值，即true|false，判断数组中是否包含一个给定的值，有则返回true，反之返回false。

let arr = [1,3,5,7,9,10]
let isIncludes = arr.includes(3);//判断该数组是否包含3
console.log(isIncludes)//true

• indexOf： 有返回值，返回值是一个数值，判断数组中是否包含一个给定的值，有则返回该给定值的索引，没有则返回-1。

let arr = [1,3,5,7,9,10]
let index1 = arr.indexOf(3);//判断该数组是否包含3
 let index2 = arr.indexOf(11);//判断该数组是否包含11
 console.log(index1)//包含3，返回3的索引：1
 console.log(index2)//不包含11，返回-1

---

8、reduce（callback，初始值）含数组去重方法封装

• 有返回值，返回值是经过操作之后的值。这个函数有两个值，第一个是一个回调，第二个参数就是你返回值的初始值，这个初始值是可选的。

let arr = [1,3,5,7,9,10]
let res = arr.reduce(function(preValue,item){
   console.log(preValue,'--')//上一次调用回调返回的值，或者是提供的初始值
   console.log(item,'++')//当前遍历的数组成员
   return preValue + item
})
console.log(res)//35

今天遇到的应用场景，对象数组的去重：

let arr = [
            {
                key:'1',
                name:'林青霞'
            },
            {
                key:'2',
                name:'张三丰'
            },
            {
                key:'1',
                name:'段誉'
            },
        ]
       let obj = {}
        let res = arr.reduce(function(preValue,item){
            console.log(preValue,'--')//上一次调用回调返回的值，或者是提供的初始值
            console.log(item,'++')//下一个要遍历的数组成员
            // 下面这句话是首先是判断当前数组成员的key是否存在于obj中，如果已经存在，将这个obj中的key设置为空，并且值设置为true，再将当前数组成员添加到返回值中
            // 如果不存在，obj中的key为当前数组成员的key，并且值设置为true，再将当前数组成员添加到返回值中
            obj[item.key] ? '' : obj[item.key] = true && preValue.push(item);
            console.log(obj,'obj2')
            return preValue
        },[])//将返回值的初始值定义为空数组
        console.log(res,'===')

打印结果

进一步封装

let arr = [
            {
                key:'1',
                name:'林青霞'
            },
            {
                key:'2',
                name:'张三丰'
            },
            {
                key:'1',
                name:'段誉'
            },
            {
                key:'3',
                name:'林青霞'
            },
        ]
        // 封装方法:根据提供的属性去重
        function arrDistinctByProp(arr,prop){
            let obj = {};
            return arr.reduce(function(preValue,item){
                obj[item[prop]] ? '' : obj[item[prop]] = true && preValue.push(item);
                return preValue
            },[])
        }
        // 根据name去重
        let newArr = arrDistinctByProp(arr,'name')
        // 打印返回的新数组
        console.log(newArr)