JS中的与冒号的作用、箭头函数相关的一道题

相关知识来自于一道题：

使用ES6的箭头函数语法可以直接省略 function 和 return 关键字，比如 function (){return 1;} 就可以简化成 () => 1 ， 但是如果需要返回对象时需要加一个括号，比如 () => ({a:1}), 因为JS解释器会误把大括号当作函数的起始符号，需要加上一个括号。那如果没有这个括号会怎么样呢？

() => {a:1} 会输出什么？还是说会报错？

不管怎么样，直接打开F12先试一下

const f = () => {a:1};
f(); // undefined

返回了undefined，说明代码是能跑的，那又为什么是undefined呢，a和1跑哪去了？

回头查了一下JS中关于冒号的作用，常用的有：

1. ？：三元运算
2. switch语句
3. 对象字面量

另外还有一个不常用容易忘记的：

作为一个label标签，用于与 break 和 continue 配合，让语句跳转到指定的位置，类似 goto 的作用。直接放两个示例，很容易看出它的用途，虽然也不常这么用。

continue

a: for(let i = 0; i < 5; i++){
    for(let j = 0; j < 5; j++){
        if(j===2) continue a;
        console.log(i,j);
    }
}
/*
输出结果:
0 0，
0 1，
1 0，
1 1，
...
4 0，
4 1
*/

break

b: for(let i = 0; i < 5; i++){
    for(let j = 0; j < 5; j++){
        if(j===2) break b;
        console.log(i,j);
    }
}
/*
输出结果:
0 0，
0 1
*/

到这里就知道为什么返回undefined了，因为 {a:1} 中的 a:被当成了一个标签，就剩下一个1没有return语句。

除此之外，标签还可以换行写，所以 {a:1}就等于

{
	a:
		1
}

因此， () => {a:1,b:2} 是会报错的，因为等价于

{
	a:
		2,
	b:
		1
}

再由此可以推断出另一个东西 () => {a:b:c:d:1}不会报错而是返回undefined

总结

本文全来源于一道与JS语法相关的题目，虽然在开发过程中并没有什么卵用，但是说不定哪天面试就用上了呢？

最后祝大家五一快乐。

参考

js中冒号的作用

JavaScript权威指南(6th)