react和redux基础的一个问题

Question

为什么

这行代码会等于

怎么等于，return{}是一个对象吧，然后逗号隔开两个？？没懂书的意思

Answer 1

该代码于react redux无关，实际上属于ES6? 7 ?8 我根据你的代码
去 babel 项目中 生成了一下代码 你可以作为参考

let status = {
    counterCaption: 1,
    id :1
}
function aa() {

    return {...status, [counterCaption]: status[counterCaption]++}
 }

"use strict";

var _extends = Object.assign || 
function (target) { 
    for (var i = 1; i < arguments.length; i++) { 
        var source = arguments[i]; for (var key in source) { 
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
            target[key] = source[key]; 
           } 
        }
    } 
    return target;
};

function _defineProperty(obj, key, value) { 
    if (key in obj) { 
        Object.defineProperty(obj, key, { 
            value: value, 
            enumerable: true, 
            configurable: true, 
            writable: true 
        }); 
    } else { 
        obj[key] = value; 
    } 
    return obj; 
}

var status = {
    counterCaption: 1,
    id: 1
};
function aa() {
    return _extends({}, 
    status, 
    _defineProperty({}, counterCaption, status[counterCaption]++));
}

转为es5你可以看到 里面的 参数counterCaption被 _defineProperty函数 定义到一个空对象中，status也是一个对象
最终被 _extends函数 给扩展到一个新的对象去
你需要参考一下 阮一峰的 ES6入门 扩展运算符 和 解构赋值

Answer 2

...是对象扩展符
第二种写法应该这样更直观一些

return Object.assign({}, state, { counterCaption: ++state.counterCaption })

Answer 3

这实际上是es6语法的问题 还是向楼上推荐你好好看看阮一峰老师的es6入门教程 http://es6.ruanyifeng.com/
同时解释下这两个语法
... 是结构赋值的意思
例如
var a = {a:'123',b:'223'}
如果想讲a中的属性传给另一个变量那么我们传统的写法是
var b = {a:a.a,b:b.b}
如果用结构赋值 就直接 var b = {...a}就ok了

obj[content]是通过变量找到对象属性
因为你如果直接使用.+变量名 他肯定直接找这个变量名的属性
如果你用中括号找的就是这个变量对应的值得属性
举个例子
var c = {d:1,e:2}
var e = 'd'
c.e //2
c[e] //1