ES6 解构对象数组答案

【问题标题】：ES6 Deconstructing an array of objectsES6 解构对象数组
【发布时间】：2017-07-24 17:49:08
【问题描述】：

我有这个东西

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

我想得到这个（获取所有来源）：

sources = ['./js/app.js', './js/admin.js']

// or, at least
sources = [{'./js/app.js'}]

我知道如何用循环来做，但是我可以用 ES6 解构来做吗？

类似：

{sources = [{src}]} = config.js;

或

{[{src}] : sources} = config.js;

【问题讨论】：

您是否有特殊原因要在循环中使用解构？甚至，一个简单的map?
只使用一个循环。不要试图强制使用错误的工具来完成这项工作。
var sources = config.js.files.map(e => e.src)
只是想看看我能把解构推到多远。

标签： javascript arrays object ecmascript-6

【解决方案1】：

解构不适用于这种情况。只需使用map() 即可轻松完成工作。

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

console.log(config.js.files.map(x => x.src));

【讨论】：

【解决方案2】：

由于数组的原因，没有循环或映射就不可能解构这样的东西。

您可以在 for-of 循环中使用解构来遍历文件：

let srcs = [];
for (let {src} of config.js.files) {
  srcs.push(src);
}

但更好的方法是使用数组方法：

// using map
let srcs = config.js.files.map(file => file.src);

// or by using reduce
let srcs = config.js.files.reduce((result, file) => result.concat(file.src), []);

【讨论】：

【解决方案3】：

您可以将解构与 Array#entries 和 for ... of statement 等迭代器以及临时变量 index 结合使用。

var config = { js: { files: [{ src: './js/app.js', name: 'script.js', dest: 'public_html/js/' }, { src: './js/admin.js', name: 'script.js', dest: 'public_html/js/' }] } },
    index,
    result = [];

for ({ 0: index, 1: { src: result[index] } } of config.js.files.entries());

console.log(result)

【讨论】：

【解决方案4】：

使用 JavaScript Array.map() 方法。

演示

const config = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

var res = config.js.files.map(function(item) {
  return item.src;
});

console.log(res);

【讨论】：