这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

JavaScript中类数组转换为数组的几种方式

首先我们要知道类数组不具有slice等方法

于是我们使用[].slice.call(ArryLike) 或 Array.protype.slice.call(ArrayLike)的形式来进行转换。

但是在es6，有了新的解决方案

Array.from(arraylLike, MapFn, thisArg)

• arrayLike：第一个参数，指定一个类数组对象or可迭代对象

• MapFn(可选)：第二个参数，新数组中的每一个元素执行该回调函数

• thisArg(可选)：第三个参数，执行回调函数MapFn时的this对象

• 返回值：一个新数组实例

其中有了第二个参数 MapFn的回调函数，就不在需要Array.from().map()的使用形式进行函数增强了。

同时结合第三个参数this指向，可以再进一步简化代码，回调函数可以来自某个现成的对象中的方法，而不需要在这里再写一遍。

例如Array.from(ArrayLike, obj.func, obj)

这里再提醒一下obj.func回调函数的执行时机发生在类数组转换为新数组之后，对新数组中的元素进行执行。

reduce方法的妙用

• reduce方法是函数式编程思想的一种代码风格，遍历可迭代对象进行一些整体的操作。

• 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。简单来说有汇总的功能，ES6新增数组函数当中，reduce无疑是最强大的一个函数，掌握好可以在日常工作中节省很多无用功。

reduce函数的参数：

• currentValue (cur) (当前值)
• previousValue(pre) （上一次汇总值，当存在initialValue的时候，第一次执行pre为initialValue，不存在initialValue的时候，第一次执行为数组的第一个元素）===>reduce函数的核心
• initialValue （初始值）

四个常用的使用场景：

1. 数组求和

// 数组求和
const  objArr = [
    {v: 1},
    {v: 2},
    {v: 3}
]

const sum = (arr) => {
    return arr.reduce((previousValue, currentValue) => previousValue + currentValue, 0)
}

3. 统计

// 统计
const count = (arr) => {
    return arr.reduce((previousValue, currentValue) => {
        previousValue[currentValue] = (previousValue[currentValue] || 0) + 1
        return previousValue
    }, {})
}

5. 查重

// 数组去重
const unique = (arr) => {
    return arr.reduce((previousValue, currentValue) => {
        if (previousValue.indexOf(currentValue) === -1) {
            previousValue.push(currentValue)
        }
        return previousValue
    }, [])
}

7. 扁平化（降维）

// 数组扁平化
const flatten = (arr) => {
    return arr.reduce((previousValue, currentValue) => {
        return previousValue.concat(Array.isArray(currentValue) ? flatten(currentValue) : currentValue)
    }, [])
}