JS实现SharePoint JSON数组分类字段展开（兼容IE11）

嘿，作为JS新手碰到这种数据结构转换确实容易懵，不过别担心，用Underscore的链式方法完全能搞定，而且还能兼容IE11！我给你写个贴合需求的实现，全程用Underscore的_.chain、_.map这些方法，绝对不用箭头函数：

实现代码 #

// 你的原始SharePoint数据
var rawData = [
    {'ID':'1', 'Title': 'First record', 'blue':'3', 'red':'6', 'yellow':'2'},
    {'ID':'2', 'Title': 'Second record', 'blue':'1', 'red':'3', 'yellow':'6'}
];

// 定义需要拆分的分类字段
var categories = ['blue', 'red', 'yellow'];

// 用Underscore链式处理数据
var transformedData = _.chain(rawData)
    // 遍历每条原始数据，将其拆分为多个分类条目
    .flatMap(function(item) {
        // 对每个分类生成新的对象
        return _.map(categories, function(category) {
            return {
                ID: item.ID,
                Title: item.Title,
                category: category,
                count: item[category]
            };
        });
    })
    // 提取最终结果数组
    .value();

// 输出测试结果
console.log(transformedData);

代码解释 #

咱一步步拆解下这段代码的逻辑：

1. _.chain(rawData)：把原始数组包装成Underscore的链式对象，这样就能连续调用多个Underscore方法，不用写嵌套代码。
2. _.flatMap(...)：这个方法相当于先_.map再_.flatten，能把每个原始条目生成的数组直接平铺到最终结果里，避免得到嵌套数组。如果你的Underscore版本低于1.7（没有_.flatMap），可以换成_.map(...)之后再调用_.flatten()，效果一样：

   var transformedData = _.chain(rawData)
       .map(function(item) {
           return _.map(categories, function(category) {
               return {
                   ID: item.ID,
                   Title: item.Title,
                   category: category,
                   count: item[category]
               };
           });
       })
       .flatten()
       .value();
   

3. 内部的_.map(categories, ...)：遍历我们定义的颜色分类数组，给每个分类生成一个新对象，复制原始条目的ID和Title，再把当前分类名和对应数值分别放到category和count字段里。
4. _.value()：结束链式调用，把Underscore对象转换成普通的JS数组，就是你要的目标格式啦！

兼容性说明 #

这段代码完全兼容IE11：

• 没有用箭头函数、let/const这些ES6特性（用的var）
• 所有Underscore方法都是IE11支持的版本（只要你引入的Underscore版本不低于1.5，基本都没问题）

运行这段代码后，得到的结果就是你需要的拆分后的数据，直接拿去给Dimple/D3做图表就行啦！

内容的提问来源于stack exchange，提问作者user9865777