Декларация деструктуризации Decypher ES6 const

Question

Может кто-нибудь помочь мне дешифровать эту инструкцию ES6?

const { 
    isFetching, 
    lastUpdated, 
    items: posts 
    } = postsByReddit[selectedReddit] || { 
    isFetching: true, 
    items: [] 
    } 

Я вытащил его из примера Redux асинхронном - https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js#L81

Answer 1

код просто объявляя три constants, получая их от одноименных свойств на объекте, если он непустые, в противном случае получить их из литерала объекта, который действует как значения по умолчанию. Я верю, что вы запутались над объектом, как синтаксис, а не ключевое слово const.

var|let|const { ... } = ... - Объявление о деструкции объекта.

var|let|const [ ... ] = ... является массив декларации уничтожения того.

Оба являются короткой рукой для «разделить правую сторону и назначить левой стороне».

Destructuring может быть выполнен по массиву или объекту с использованием разных скобок. Это может быть часть декларации или как отдельное задание.

const { isFetching } = obj; // Same as const isFetching = obj.isFetching 
var [ a, b ] = ary;   // Same as var a = ary[0], b = ary[1] 
[ a ] = [ 1 ];    // Same as a = 1 

Для деструкции объекта вы можете указать имя свойства. Для массива вы можете пропустить элементы, оставив пустые запятые. Деструктурирование также может формировать иерархию и смешиваться.

const { items: posts } = obj;  // Same as const posts = obj.items 
var [ , , c ] = ary;     // Same as var c = ary[2] 
let { foo: [ { bar } ], bas } = obj; // Same as let bar = obj.foo[0].bar, bas = obj.bas 

Когда null или уничтожение того undefined или массив destructure на не итерацию, он будет бросать TypeError. В противном случае, если соответствующая часть не найдена, ее значение равно undefined, если не задано значение по умолчанию.

let { err1 } = null;    // TypeError 
let [ err3 ] = {};     // TypeError 
let [ { err2 } ] = [ undefined ]; // TypeError 

let [ no ] = [];    // undefined 
let { body } = {};    // undefined 
let { here = this } = {};  // here === this 

let { valueOf } = 0;  // Surprise! valueOf === Number.prototype.valueOf 

Массив деструктурирующий работает на любых "Iterable" объекты, такие как Map, Set или NodeList. Конечно, эти истребимые объекты также могут быть разрушены как объекты.

const doc = document; 
let [ a0, a1, a2 ] = doc.querySelectorAll('a'); // Get first three <a> into a0, a1, a2 
let { 0: a, length } = doc.querySelectorAll('a'); // Get first <a> and number of <a> 

Наконец, не стоит забывать, что деструктурирующие могут быть использованы в каких-либо заявлений, а не только в теле функции:

function log ({ method = 'log', message }) { 
    console[ method ](message); 
} 
log({ method: "info", message: "This calls console.info" }); 
log({ message: "This defaults to console.log" }); 

for (let i = 0, list = frames, { length } = frames ; i < length ; i++) { 
    console.log(list[ i ]); // Log each frame 
} 

Обратите внимание, что из-за деструктурирующий зависит от левой стороны, чтобы определить, как destructre right side side, вы не можете использовать destructring для назначения свойствам объекта. Это также исключает использование calculated property name в деструкции.

Как вы видели, деструктурирование - это простая концепция сокращений, которая поможет вам делать больше с меньшим количеством кода. Это well supported в Chrome, Edge, Firefox, Node.js и Safari, , чтобы вы могли начать изучать и использовать его сейчас!

Для ECMAScript5 (IE11) совместимости, Babel и Traceur transpilers может превратить большую часть ES6/ES7 код в ES5, в том числе деструктуризации.

Если все еще неясно, не стесняйтесь обращаться к StackOverflow JavaScript chatroom. Как второй по популярности номер на SO, эксперты доступны 24/7 :)

Answer 2

В основном:

var isFecthing; 
var lastUpdated; 
var posts; 

if (postsByReddit[selectedReddit]) { 
    isFecthing = postsByReddit[selectedReddit].isFecthing; 
    lastUpdated = postsByReddit[selectedReddit].lastUpdated; 
    posts = postsByReddit[selectedReddit].items.posts; 
} else { 
    isFecthing = true; 
    items = []; 
} 

Answer 3

Это дополнительный ответ на уже предоставленный. Destructuring также поддерживает значения по умолчанию, что позволяет нам упростить код:

const { 
    isFetching = true, 
    lastUpdated, 
    items = [] 
} = postsByReddit[selectedReddit] || {};