数组forEach、map、reduce、filter、some、every等方法

项目常用的一些数组对象方法

forEach 数组遍历

array.forEach(function(v, i, arr), thisValue)

forEach方法的第一个参数是一个函数，函数的第一个参数是元素，第二个参数才是索引号，第三个参数是当前元素所属的数组对象，与变量名没关系，顺序是固定的

• 不能写continue、break，想要终止循环，可以用some方法

var arr = [1,3,6,9,10]
var sum = 0

arr.forEach(v => sum+=v)
// sum => 29

map 映射

map

一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of 循环在每次迭代后会返回一个形式为[key，value]的数组。

// 用法1
[1, 3, 9].map(v => v * v)

// =>  [1, 9, 81]

// 用法2
const list = [
{ name: 'Lili',  age: 13 }, 
{ name: 'Jack',  age: 14 },
{ name: 'Frank', age: 15 }]

list.map(v => v.name)
// => ["Lili", "Jack", "Frank"]
list.map(v => v.age)
// => [13, 14, 15]

reduce 归纳求和

Array.reduce((obj, V, i, arr) => {},{})
// 归纳:当你需要根据数据，通过某种算法，归纳成一个数据时，就用reduce
// 首先有一点要注意:数组的很多方法，内部都有循环迭代机制
// 第一个参数:迭代执行的函数(这个函数也有四个参数) (注意:函数的返回值，会作为下一次循环迭代归纳的起始值)
    //第一个参数:当前归纳的值 => obj
    //第二个参数:迭代循环项 => V
    //第三个参数:迭代循环索引 => i
    //第四个参数:源数组 => arr 
// 第二个参数:归纳的起始值

// reduce求和
var arr = [1, 2, 3, 4, 5]

arr.reduce((sum,v) => sum + v)
// => 15

// reduce归纳
const obj = [
   { name: 'email',value: 'admin@163.com' },
   { name: 'pwd',  value: '123456' }
]

// obj.reduce((obj, v) => ({ ...obj, [v.name] : v.value }),{})
obj.reduce((obj, v) => {
   obj[v.name] = v.value
   return obj
},{})
// => {email: "admin@163.com", pwd: "123456"}

// 求age>18的数量以及平均年龄
var arr = [
    { name: 'zs', age: 18 }, 
    { name: 'ls', age: 26 }, 
    { name: 'ww', age: 29 }, 
    { name: 'zl', age: 33 }
]

arr.reduce((obj, v, i) => {
   if(v.age > 18) {
    obj.num++
   }
   obj.average+=v.age
   if(i === arr.length-1 ) {
    obj.average = obj.average/arr.length
   }
   return obj
}, { num: 0, average: 0 })
// => {num: 3, average: 26.5}

for in 、Object.keys()

for in 、Object.keys()获取对象的属性
for…in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环

Object.keys()：返回给定对象所有可枚举属性的字符串数组

const obj = { 
    a: [{name: 'zs',age:18}],
    b: [{name: 'zs',age:18}],
    c: [{name: 'zs',age:18}],
    d: [{name: 'zs',age:18}],
    e: [{name: 'zs',age:18}],
    f: [{name: 'zs',age:18}]
}

let newobj = []
/* 第一种方法 用for .. in .. */
for(let i in obj){
  newobj.push(i)
}
// newobj   控制台=>  ["a", "b", "c", "d", "e", "f"]

/* 第一种方法 用Object.keys() */
Object.keys(obj)
// 控制台=> ["a", "b", "c", "d", "e", "f"]

filter 和 ES6 中的Set 去重

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

callback 被调用时传入三个参数：

1. 元素的值 => element
2. 元素的索引 => index
3. 被遍历的数组本身 => self

filter

var arr = ['apple','banana','pear','orange','apple','banana','pear','strawberry']

arr.filter(function(element, index, self){
    return self.indexOf(element) === index;
})
// =>  ["apple", "banana", "pear", "orange", "strawberry"]
// tip: 去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等，因此被filter过滤掉了!!!

ES6 Set

Set数据结构：ES6新增的数据结构，类似数组，但是内部不会有重复的元素（值、内存地址），并且是一个无序的数据结构，木有索引号

• 可以通过构造函数来创建Set数据结构的实例：new Set()或new Set([ 1, 2, 3 ])

• 可以通过size属性获取Set数据结构实例的长度

• 实例方法：

  • add：添加，返回值是数据结构本身，可以链式调用
  • delete：删除，返回值是布尔值，true：删除成功，false：删除失败
  • has：是否存在，返回值是布尔值，true：存在，false：不存在
  • clear：清空，木有返回值
  • forEach：遍历元素，类似数组，但是木有索引

  补充说明，我们可以先将其转换成数组（[...someSet]），再来调用数组上强大的API方法操作数据

var arr = ['apple','banana','pear','orange','apple','banana','pear','strawberry']


[...new Set(arr)]
// => ["apple", "banana", "pear", "orange", "strawberry"]

some

some方法，是用来看数组中是否存在符合条件的元素（运行机制：内部也有循环机制，每次循环也会调用函数，只要函数返回true，则终止循环，some函数也返回true，若果循环结束，还没有一个返回true，则some函数返回false）

• 返回值是布尔值，如果有，则返回true，否则返回false
• 一旦找到符合条件的，则立即终止循环
• 当循环逻辑比较复杂或耗时时，可以提高一丢丢性能

// 检测在数组中是否有元素大于 10
[2, 5, 8, 1, 4].some(v => v > 10);  // false
[12, 5, 8, 1, 4].some(v => v > 10); // true

every

every方法，和some类似，但必须每一个都符合条件，才返回true，反之，只要有一个不符合条件，就返回false

// 检测数组中的所有元素是否都大于 10
[12, 5, 8, 130, 44].every(v => v >= 10); // false
[12, 54, 18, 130, 44].every(v => v >= 10); // true

后面，会更新更多!!!