JavaScript 小括号妙用

通过小括号定义变量

在平常的定义变量时，一般不会出现这种情况，比如要定义一个字符串变量，如下：

var str = "123";

通过上述方法就可以了，但是也可以通过小括号的方式定义变量，如下：

var str = ("1", "2", "3");

不妨猜想一下这个变量 str 的实际值是多少？

实际上是 "3"。

这种方法看起来很鸡肋，明明可以直接定义变量 str 的值，为什么还要用这种方式呢？

那我们再来看这种方式到底做了什么，如下：

var num = (console.log(1), console.log(2), 3);
// 1 2
console.log(num); // 3

会发现在定义变量的时候，先执行了括号里面的前两个语句，再将最后一个参数作为值赋给变量 num。

实例

这在某些情况下就极大地简化了代码，比如下面这个例子：

/*
	要求：将下面这个数组转化为对象，且按照每一项的 classId 进行分类，键就为 classId 的值
*/
const arr = [
  { classId: "1", name: "张三", age: 16 },
  { classId: "1", name: "李四", age: 15 },
  { classId: "2", name: "王五", age: 16 },
  { classId: "3", name: "赵六", age: 15 },
  { classId: "2", name: "孔七", age: 16 }
];
/*
Object {
  "1": Array [
  				{ classId: "1", name: "张三", age: 16 },
    			{ classId: "1", name: "李四", age: 15 }
  			],
  "2": Array [
  				{ classId: "2", name: "王五", age: 16 },
    			{ classId: "2", name: "孔七", age: 16 }
  			],
  "3": Array [
				  { classId: "3", name: "赵六", age: 15 },
  			]
}
*/

遇到这个问题你的第一思路是什么？可能很多人都是通过 forEach 等来遍历再判断 classId 的值向对象中分别填充值吧，下面给出这种方式的代码：

function groupArrayByKey(arr = [], key) {
  const obj = {};
  // 通过 forEach 遍历数组的每一项
  arr.forEach(item => {
  	// 判断对象中是否存在 classId 对应的值，如果没有则添加，并将初始值设置为空数组
    if (!obj[item[key]]) obj[item[key]] = [];
    // 向对应的键中添加对象
    obj[item[key]].push(item);
  })；
  return obj;
}；

通过上述方法的确可以实现，但是不觉得代码过于冗余了吗，接下来我们将 forEach 改为 reduce 来实现：

function groupArrayByKey(arr = [], key) {
  return arr.reduce((total, item) => {
    if (!total[item[key]]) total[item[key]] = [];
    total[item[key]].push(item);
    return total;
  }, {});
};

当改用 reduce 之后，是不是觉得代码好像没什么可以进一步精简的了，那如果我说可以将代码精简到只用一行呢，请看下面代码：

function groupArrayByKey(arr = [], key) {
  return arr.reduce((total, item) => {
    return (!total[item[key]] && (total[item[key]] = []), total[item[key]].push(item), total);
  }, {});
};

是不是一下就觉得代码高级了。