第二十五天2019-01-25

js 常用数组方法小结 (2)

碎碎念

有些数组方法会经常用,这里今天就介绍一下reduce()方法和find()方法。

Array.protytype.reduce()

背景

看完一些方法,目前来说,reduce()方法,能实现的比较多,且我之前看到的文章中对其的推崇是比较多的。据说它能做很多事情。昨天看了下MDN上的介绍和几个例子,确实感觉其功能的强大。本文基于MDN上的代码以笔记的形式注释,先对功能做栗子,然后对方法进行一些描述。

举个栗子

一些简单的例子

  1. 累加数组中的值?

    let sum = [3, 9, 12, 34].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
    })
    console.log(sum) // 58
  2. 累加对象数组中的值?

    let sum = [{x: 1}, {x:2}, {x:3}].reduce((accumulator, currentValue) => {
    // 将键名为x的逐个累加到累加器中
    return accumulator + currentValue.x
    }, 0)
    console.log(sum) // 6

initialValue 为初始值,且初始值是必须提供的

  1. 二维数组转为一维数组?
    let flattened =  [[0, 1], [2, 3], [4, 5]].reduce((acc, cval, cidx, arr) => {
    // 初始值为空数组,取出当前下标数组中的值,放入累加器中的空数组,逐个累加
    return acc.concat(cval)
    }, [])
    console.log(flattened)

一些稍微复杂点的

  1. 计算数组中每个元素出现的次数?

    let arr = [1, 3, 54, 21, 1]
    let count = arr.reduce((acc, cval) => {
    // 这里要注意是在累加器中去寻找是否存在值
    if (cval in acc) {
    // 以对象形式赋值,真个reduce过程一次次去遍历
    acc[cval]++
    } else {
    acc[cval] = 1
    }
    return acc
    }, {})
    console.log(count) // { '1': 2, '3': 1, '21': 1, '54': 1 }
  2. 属性对object分类?

    let people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
    ]
    function groupBy (objArr, property) {
    return objArr.reduce((acc, obj) => {
    // 键名
    let key = obj[property]
    // 判断累加器中是否有重复的元素
    if(!acc[key]) {
    acc[key] = []
    }
    acc[key].push(obj)
    return acc
    }, {})
    }
    let groupedByPeople = groupBy(people, 'age')
    console.log(groupedByPeople)
  3. 使用扩展运算符和initialValue绑定包含在对象数组中的数组
    简单点说就是取出数组集合中对象中的数组

    let friends = [{
    name: 'Anna',
    books: ['Bible', 'Harry Potter'],
    age: 21
    }, {
    name: 'Bob',
    books: ['War and peace', 'Romeo and Juliet'],
    age: 26
    }, {
    name: 'Alice',
    books: ['The Lord of the Rings', 'The Shining'],
    age: 18
    }]
    // 列出所有包含的书籍
    // 题目不容易理解,好好一想,就容易的多,还得对扩展符了解的比较多点就更容易上手
    let containerBook = friends.reduce((prev, curr) => {
    return [...prev, ...curr.books]
    }, [])
    console.log(containerBook)

然后,鸽了鸽了。先写到这里吧。时间又不够了。

参考

[1]. Array.prototype.reduce()
–end–

文章作者: lmislm
文章链接: http://lmislm.com/2019/01/25/2019-01-25/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog