Как отобразить свойство с массивом объекта внутри в JavaScript

Question

Я просто пытаюсь полностью вернуть свой массив, используя карту, прежде чем я начну свою следующую функцию.Но я получаю неполный массив при его утешении

Это мой пример массива:

data = [{
        "a": 1,
        "b": 5,
        "c": 9,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": [{
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }, {
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }]
    },
    {
        "a": 2,
        "b": 6,
        "c": 10,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": [{
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }, {
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }]
    },
    {
        "a": 3,
        "b": 7,
        "c": 11,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": [{
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }, {
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }]
    },
    {
        "a": 4,
        "b": 8,
        "c": 12,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": [{
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }, {
            "a": 1,
            "b": 5,
            "c": 9,
            "d": 1
        }]
    }
]

var result = data.map(x=>({...x}));     
console.log(result);

это мой массив выглядит так, как когда я его утешаю:

[{
        "a": 1,
        "b": 5,
        "c": 9,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": []
    },
    {
        "a": 2,
        "b": 6,
        "c": 10,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": []
    },
    {
        "a": 3,
        "b": 7,
        "c": 11,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": []
    },
    {
        "a": 4,
        "b": 8,
        "c": 12,
        "d": 1,
        "e": 4,
        "f": 44,
        "g": 23,
        "h": 12,
        "i": 22,
        "j": 23,
        "k": []
    }
]

Я хочу, чтобы мой массив был полным, когда я использую функцию .map().

Answer 1

Распространение - это только поверхностная копия, поэтому внутренние массивы копироваться не будут.

Для простого глубокого копирования используйте JSON.stringify и JSON.parse.

const data = [{"a":1,"b":5,"c":9,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]},{"a":2,"b":6,"c":10,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]},{"a":3,"b":7,"c":11,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]},{"a":4,"b":8,"c":12,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]}];

const res = data.map(x => JSON.parse(JSON.stringify(x)));
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: auto; }

Существует также менее хорошо поддерживаемый Object.fromEntries - эта функция в настоящее время находится на стадии черновика:

const data = [{"a":1,"b":5,"c":9,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]},{"a":2,"b":6,"c":10,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]},{"a":3,"b":7,"c":11,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]},{"a":4,"b":8,"c":12,"d":1,"e":4,"f":44,"g":23,"h":12,"i":22,"j":23,"k":[{"a":1,"b":5,"c":9,"d":1},{"a":1,"b":5,"c":9,"d":1}]}];

const res = data.map(x => Object.fromEntries(Object.entries(x)));
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: auto; }

Answer 2

Это не из-за функции карты, а из-за консоли. Консоль может обрезать вывод, если он слишком длинный. Если вам нужно увидеть полный результат, вы можете сделать

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

Или другой код модифицирует вложенные массивы (data[0].k = []). Поскольку вы делаете копию высокого уровня, вы увидите пустой массив. В этом случае вам следует сделать глубокую копию оригинала data. Для этого случая вам есть очень полезная библиотека lib lodash

Так что вы можете сделать это:

var result = _.cloneDeep(data);