「...」とはJavascript（ES6）の意味ですか？

Question

私はRedux、React、ES6を学んでいます。私はすでにJSで開発しましたが、この新しいES6の世界は、矢印関数などを宣言するために、 "=>"のような新しいことがたくさんあります。しかし、この新しいRedux研究では、コードの途中で...に直面しています。

ベロー私は例があります。

import { combineReducers, createStore } from 'redux' 

const userReducer = (state={}, action) => { 
    switch(action.type) { 
     case 'CHANGE_NAME': 
      state = {...state, name: action.payload}; 
      break; 
     case 'CHANGE_AGE': 
      state = {...state, age: action.payload}; 
      break; 
    } 
    return state; 
}; 

const tweetsReducer = (state=[], action) => { 
    return state; 
}; 

const reducers = combineReducers ({ 
    user: userReducer, 
    tweetsReducer: tweetsReducer, 
}); 


const store = createStore(reducers); 

store.subscribe(() => 
    console.log('The chage was: ', store.getState()) 
); 

store.dispatch({type: 'CHANGE_NAME', payload: 'Will'}) 
store.dispatch({type: 'CHANGE_AGE', payload: 21}); 

私は
state.name = action.payload; と
state.age = action.payload;
で
state = {...state, name: action.payload}; と
state = {...state, age: action.payload};
を交換した場合、それは動作しますが、年齢が挿入されましたオブジェクト名と最初に名前が挿入され、年齢が挿入された後。

どうしてですか？今後のコードで...を使用するにはどうすればよいですか？それはまさに州に関係していますか？

Answer 1

スプレッドオペレータと呼ばれています。

オブジェクトまたは配列の値を別のオブジェクトまたは配列にアンパックします。たとえば、アレイを用いた：

a1 = [1, 2, 3] 
a2 = [4, 5, 6] 
a12 = [...a1, ...a2] // [1, 2, 3, 4, 5, 6] 

同じセマンティクスをオブジェクトに適用されます。

o1 = { foo: 'bar' } 
o2 = { bar: 'baz' } 
o12 = { ...o1, ...o2 } // { foo: 'bar', bar: 'baz' } 

あなたは浅いコピーオブジェクトと配列にそれを使用することができます。

a = [1, 2, 3] 
aCopy = [...a] // [1, 2, 3], on a new array 

o = { foo: 'bar' } 
oCopy = { ...o } // { foo: 'bar' }, on a new object 

はMozilla docsをチェック、すべてのものjavascriptのための優れた情報源です。