逗号表达式

逗号表达式的一般形式是：

表达式1，表达式2，表达式3……表达式n
逗号表达式的求解过程是：先计算表达式1的值，再计算表达式2的值，……一直计算到表达式n的值。最后整个逗号表达式的值是表达式n的值。

举个栗子：

x=8*2,x*4 /*整个表达式的值为64，x的值为16*/ 
(x=8*2,x*4),x*2 /*整个表达式的值为128，x的值为16*/ 
x=(z=5,5*2) /*整个表达式为赋值表达式，它的值为10，z的值为5*/ 
x=z=5,5*2 /*整个表达式为逗号表达式，它的值为10，x和z的值都为5*/

逗号运算符的优先级低于一般运算符，所以使用时一般要用小括号将其包起来：

//函数调用运算符将先于逗号运算符运行
alert(2*5, 2*4); // 10
alert((2*5, 2*4)); // 8
const b = (1,2,3);
console.log(b); // 3

遇到过的简洁写法：

const list = [
    { id: 1, name: "部门 A", parentId: 0 },
    { id: 2, name: "部门 B", parentId: 0 },
    { id: 3, name: "部门 C", parentId: 1 },
    { id: 4, name: "部门 D", parentId: 1 },
    { id: 5, name: "部门 E", parentId: 2 },
    { id: 6, name: "部门 F", parentId: 3 },
    { id: 7, name: "部门 G", parentId: 2 },
    { id: 8, name: "部门 H", parentId: 4 },
];
const a = list.reduce((acc, cur) => (acc[cur.id] = cur, acc), {});

现实应用：

babel转译出来的代码中，经常会看到

(0, _xyz.default)(param1, param2)

为什么要这么干？

// 函数调用，函数内部的this为空（严格模式下） 
func(param);
// 方法调用，方法内部的this为obj
obj.method(param);

所以，上述的转译代码，其实是一种相对tricky的方式完成了一个函数调用，相当于：

// 以下代码和(0, _xyz.default)(param1, param2)等价 
const func = _xyz.default;
func(param1, param2)

没明白什么意思？看下面代码：

"use strict";
function f1() {
    console.log(this);
}
const obj1 = {
    f2: function () {
            console.log(this);
    },
};
f1(); // undefined
obj1.f2(); // {f2: ƒ()}
function f3() {
    console.log(this);
}
const obj2 = {
    f4: function () {
            console.log(this);
    },
};
(0, f3)(); // undefined
(0, obj2.f4)(); // undefined

Javascript中的 “,” 『逗号表达式』

逗号表达式