Что означает «...» в 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 = {...state, name: action.payload}; и
state = {...state, age: action.payload};
с
state.name = action.payload; и
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.