ES6解構對象

Question

數組我有這樣的對象

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; 

OR

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

Answer 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));

Answer 2

這是不可能的解構這樣的事情沒有環或映射由於陣列。

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), []); 

Answer 3

使用JavaScript Array.map()方法

您可以在換的循環遍歷文件迭代使用解構。

DEMO

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);

Answer 4

你可以使用與像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)