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 的绝佳来源。