将JSON数组[{key:‘name‘,values:[‘value1‘]}]转换成[{name:value1}]

要求：

将JSON数组
[
{key:‘颜色’,values:[‘红’,‘白’]},
{key:‘运存’,values:[‘8g’,‘16g’]},
{key:‘内存’,values:[‘32g’,‘64g’]}
]
转换为
[
{颜色:‘红’,运存:‘8g’,内存:‘32g’},
{颜色:‘红’,运存:‘16g’,内存:‘32g’},
{颜色:‘红’,运存:‘8g’,内存:‘64g’},
{颜色:‘红’,运存:‘16g’,内存:‘64g’},
{颜色:‘白’,运存:‘8g’,内存:‘32g’},
{颜色:‘白’,运存:‘16g’,内存:‘32g’},
{颜色:‘白’,运存:‘8g’,内存:‘64g’},
{颜色:‘白’,运存:‘16g’,内存:‘64g’}
]

思路：

第一次 ====>
[
{颜色:‘红’},
{颜色:‘白’}
]
第二次 ====>
转换为
[
{颜色:‘红’,运存:‘8g’},
{颜色:‘红’,运存:‘16g’},
{颜色:‘白’,运存:‘8g’},
{颜色:‘白’,运存:‘16g’},
]
第3次 ====>
[
{颜色:‘红’,运存:‘8g’,内存:‘32g’},
{颜色:‘红’,运存:‘16g’,内存:‘32g’},
{颜色:‘红’,运存:‘8g’,内存:‘64g’},
{颜色:‘红’,运存:‘16g’,内存:‘64g’},
{颜色:‘白’,运存:‘8g’,内存:‘32g’},
{颜色:‘白’,运存:‘16g’,内存:‘32g’},
{颜色:‘白’,运存:‘8g’,内存:‘64g’},
{颜色:‘白’,运存:‘16g’,内存:‘64g’}

这里我们用到JavaScript中的reduce函数：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法：

array.reduce(function(total, currentValue, currentIndex, arr),initialValue)

详细代码：

<script>
        var array = [
            {key:'颜色',values:['红','白']},
            {key:'运存',values:['8g','16g']},
            {key:'内存',values:['32g','64g']}
        ];
        //reduce可以对数组进行遍历，previousValue 上次遍历的值，
        // currentValue 当前遍历的值，currentIndex是当前索引，初始值[{}]
        let arr = array.reduce((previousValue, currentValue, currentIndex) => {
                //定义零时数组
                let result = [];
                //遍历之前值previousValue的所有对象,以及当前的值，把上次的值和当前的值合并
                previousValue.forEach(o => {
                    currentValue['values'].forEach(c => {
                        let obj = {};
                        Object.assign(obj,o); //将上次值中的o对象合并到obj中 o {b：1} --> obj{a:1,b:1}
                        obj[currentValue['key']] = c; //给对象添加 属性 = 值
                        result.push(obj);
                    });
                });
                // return 值 作为下次遍历的previousValue
                return result;
            },[{}]);
        console.log(JSON.stringify(arr));
    </script>

运行结果：