JavaScript ES6转换复杂对象的更好方法

时间:2019-04-24 16:50:39

标签: javascript ecmascript-6 javascript-objects

我正在尝试转换复杂的JavaScript对象。下面是我的代码。如您所见,其中有很多代码。我正在寻找一种更好/常见的方法来达到相同的结果。也许ES6 map / Reduce? (我不允许导入/要求)

function test() {
    var input = {
        number: 555,
        obj1: {
            fld1: "11",
            persons: [
                {
                    name: "smith",
                    phone: "222-222-2222"
                }
            ],
        },
        obj2: {
            obj3: {
                day: "2019-02-04"
            }

        },
        myArr: [
            {
                number: 444,
                qty: 20,
                unit: "ton",
                item: {
                    item_id: 1,
                    description: "item 1"
                }
            },
            {
                number: 111,
                qty: 15,
                unit: "pieces",
                item: {
                    item_id: 2,
                    description: "item 2"
                }
            }

        ]

    }

    var result = {
        id: input.number,
        object1: {
            id: input.obj1.number,
            contacts: getArr2(input)
        },
        object2: {
            date: input.obj2.obj3.day,
        },
        list: getArr1(input),
    }
    return result; // echo back the input received
}

console.log(JSON.stringify(test()));

function getArr1(input) {
    var arr = [];
    input.myArr.forEach(function (prod) {
        let p = {
            id: prod.number,
            itemId: prod.item.item_id,
            description: prod.item.description,
            quantity: {
                value: prod.qty,
                uom: prod.unit
            }
        }
        arr.push(p);
    });
    return arr;
}

function getArr2(input) {
    var arr = [];
    input.obj1.persons.forEach(function (person) {
        let p = {
            name: person.name,
            cell: person.phone
        }
        arr.push(p);
    });
    return arr;
}

结果是

{
    "id": 555,
    "object1": {
        "contacts": [{
            "name": "smith",
            "cell": "222-222-2222"
        }]
    },
    "object2": {
        "date": "2019-02-04"
    },
    "list": [{
        "id": 444,
        "itemId": 1,
        "description": "item 1",
        "quantity": {
            "value": 20,
            "uom": "ton"
        }
    }, {
        "id": 111,
        "itemId": 2,
        "description": "item 2",
        "quantity": {
            "value": 15,
            "uom": "pieces"
        }
    }]
}

2 个答案:

答案 0 :(得分:3)

您可以使用解构和重命名的功能。

function getProds(products) {
    return products.map(({ number: id, qty: value, unit: uom, item: { item_id: itemId, description } }) =>
        ({ id, itemId, description, quantity: { value, uom } }));
}

function getPersons(persons) {
    return persons.map(({ name, phone: cell }) => ({ name, cell }));
}

function convert({ number: id, obj1, obj2: { obj3: { day: date } }, myArr }) {
    return {
        id,
        object1: {
            id: obj1.number,
            contacts: getPersons(obj1.persons)
        },
        object2: { date },
        list: getProds(myArr)
    };
}

var data = { number: 555, obj1: { fld1: "11", persons: [{ name: "smith", phone: "222-222-2222" }], }, obj2: { obj3: { day: "2019-02-04" } }, myArr: [{ number: 444, qty: 20, unit: "ton", item: { item_id: 1, description: "item 1" } }, { number: 111, qty: 15, unit: "pieces", item: { item_id: 2, description: "item 2" } }] };

console.log(convert(data));
.as-console-wrapper { max-height: 100% !important; top: 0; }

答案 1 :(得分:1)

通过地图/缩小功能,您处在正确的轨道上。

以下是一个示例(getArr1会与此类似):

function getArr2(input) {
  // Don't need map if new object is identical
  // Could also do the mapping within the reduce callback
  return input.obj1.persons
    .map(person => ({ name: person.name, cell: person.phone }))
    .reduce((accumulator, currentValue) => {
      accumulator.push(currentValue);
      return accumulator;
    }, []);
}

文档中还有另一个示例:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#Remove_duplicate_items_in_array