常用的数组操作总结

1. forEach

数组遍历的方法

forEach() 方法对数组的每个元素执行一次提供的函数。

方法中的function回调有三个参数：
1）item：遍历的数组内容
2）index：对应的数组索引
3）arr:原数组

[ ].forEach(function(item,index,arr){
　　　　//code something
});

特点：

1）没有返回值

2）不能return，会返回undefinde

var array = ['a', 'b', 'c'];

array.forEach(function(element) {
  console.log(element);
});

输出为：
a;
b;
c;

---

2. map

数组遍历的方法

特点：

1）有返回值，返回一个新数组

2）可以return，可以自定义返回值

不同点:

1）map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

2）forEach()允许callback更改原始数组的元素，map()返回新的数组，map() 不会对空数组进行检测。

3)  forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也会发生变化。

4)  map遍历后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化。

使用场景推荐：

1. forEach适合于你并不打算改变数据的时候。

2. map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)。 

var arr = [
  { id: 1, name: 'A'},
  { id: 2, name: 'B'},
  { id: 3, name: 'C'},
]
 
var newArr = arr.map((item, index) => {
  return {
    ...item,
    val: item.name,
  }
})
console.log(newArr)

输出为：
[
  { id: 1, name: 'A', val: 'A' },
  { id: 2, name: 'B', val: 'B' },
  { id: 3, name: 'C', val: 'C' },
]

---

3. filter

数组过滤器方法

Array.filter(callback(element[, index[, array]])[, thisArg])

特点：

1）有返回值，返回一个新数组

2）可以return，返回满足条件的每一项数据

var arr = [
  { id: 1, name: 'A'},
  { id: 2, name: 'B'},
  { id: 3, name: 'C'},
]
 
var newArr = arr.filter((item) => {
  if (item.id == 1) {
    return item
  }
})
 
console.log(newArr)
 

输出为：
[
  { id: 1, name: 'A', val: 'A' }
]

---

4. some

数组筛选的方法

主要是用于测试数组中是不是至少有一个元素通过了被提供的函数测试

特点：

1）有返回值，返回一个bool

2）可以return，只要有一项满足条件就是true

注意：some方法只能返回布尔值，也就是说，返回的结果要么是true,要么是false。

var arr = [
  { id: 1, name: 'A'},
  { id: 2, name: 'B'},
  { id: 3, name: 'C'},
]
 
var newArr = arr.some((item) => {
  return item.id == 1
})
 
console.log(newArr)

输出为：
[
  { id: 1, name: 'A' }
]

---

5. every

数组判断的方法

判断数组中是否所有元素都满足

特点：

1）有返回值，返回一个bool

2）有return，只要有一个不满足就是false

特点说明：

1)循环次数 !== 数组长度

2)函数内部的return

return true : 循环继续 当前元素满足条件,继续判断,如果循环执行完毕还是true,则every的返回值就是true

return false : 循环结束,当前元素不满足条件,every的返回值也是false

(3)every方法的返回值

return true : 全部元素都满足条件

return false : 有元素不满足条件

var arr = [
  { id: 1, name: 'A'},
  { id: 2, name: 'B'},
  { id: 3, name: 'C'},
]
 
var newArr = arr.every((item) => {
  return item.name == 'A'
})
 
console.log(newArr)

输出为: false

---

6. reduce

数组累加的方法

reduce接收一个函数作为累加器，有返回值，可以返回叠加的数据

还可以用于数组去重

const arr = [1, 2, 3, 4, 5, 6]
const arrNum = arr.reduce((pre, next) => pre + next)
console.log(arr)

输出为: 21

项目中示例：
timeSlotObjReduceData(type) {
            return this.timeSlotObj[type].data.reduce((acc, cur) =>{
                    let curE = cur.endTime === '24:00'? '00:00' : cur.endTime;
                    let Istart = timeOptions.findIndex(time => time === cur.startTime);
                    let Iend = timeOptions.findIndex(time => time === curE);
                    if(Istart !== -1 && Iend !== -1){
                        let CItem=  {
                            key: Date.now() + cur.startTime,
                            startTime: timeOptions.findIndex(time => time === cur.startTime),
                            endTime: timeOptions.findIndex(time => time === curE),
                        }
                        acc.push(CItem);
                    }
                    return acc;
                }, [])
        },

---

7. findIndex

数组的查找方法

特点：

1）返回一个索引【下标】

2）可以return，只要有条件满足就会返回索引

var arr = [
  { id: 1, name: 'A'},
  { id: 2, name: 'B'},
  { id: 3, name: 'C'},
]
var index = arr.findIndex((item) => {
  return item.id === 1
})
 
console.log(index)

输出为: 0

---

8.  find

数组的查找方法

特点：

1）有返回值，返回一个对象

2）可以return，只要有条件满足就会返回当前满足项

var arr = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B'},
  { id: 3, name: 'C'},
]
 
var obj = arr.find((item) => {
  return item.id === 1
})
 
console.log(obj)

输出为: 

 { id: 1, name: 'A' }

---

9. slice

数组截取的方法

 slice(startInx,endInx)   从索引startInx开始到索引endInx -1结束

不会影响原数组

var arr = ['a', 'b', 'c']
var arrNew = arr.slice(1, 2)
console.log(arr) 
console.log(arrNew) 

输出为:

['b']

['a', 'b', 'c']

---

10. splice

数组截取的方法

 slice(startInx,endInx)   从索引startInx开始到索引endInx -1结束

会影响原数组

var arr = ['a', 'b', 'c']
var arrNew = arr.splice(0, 1)
console.log(arr)
console.log(arrNew) 

输出为:

['a']

['b', 'c']

---

11.includes

数组包含的方法

用来判断一个数组是否包含一个指定的值，返回一个布尔值，如果是返回 true，否则false。

const arr = [100,200,300,400];

arr.includes(300); // 返回值为true

arr.includes(1); // 返回值为false

arr.includes(100,2); //返回值为false

---

未完待更...