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中关于冒号的作用，常用的有：

？：三元运算
switch语句
对象字面量

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

作为一个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)

巴特西

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

总结

参考

最新文章

热门文章