这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
前文学习了几个 JavaScript 并不完美但是不影响其运行的神奇"bug", 本文继续来学习 JavaScript 其他的一些迷之神奇 bug - 自动加分号(";")问题
JavaScript 不完美亦可运行之 自动加分号(;)问题
在现实开发中遇到的一些 "小" bug, 往往不太容易找到, 不可思议.
来继续学习探究 JavaScript 中的一些迷之神奇 bug. 先上代码, 来看一下:
// 这是一个再普通不过的函数,
function why1(one, two, three) {
return {
one,
two,
three,
}
}
why1('why1', 'why1', 'why1')
// 可以输出 { one: "why1", two: "why1", three: "why1" },
// 可以输出 { one: "why1", two: "why1", three: "why1" }, 没问题 对吧,继续往下看
// 但这是一个有问题的普通的函数,
// littleTip: 换行问题导致
function why2(one, two, three) {
return
{
one, two, three
}
}
why2('why2', 'why2', 'why2')
// undefined
// why??? 这是为什么?
分析:
问题知识点-对象简写
难道是对象简写的问题吗?
上面的写法这里用到了对象简写, 在解构赋值时:
// 在处理请求到的数据后, 往往需要我们处理, 拿到需要的数据
{ name:a, age:b } = res.data
// 如果变量a的名字是 name，变量b 的名字是age，就可以简写
{name, age} = res.data
即 对象中如果冒号前后的变量名一样，就可以简写: 如 {name: name, age: age} 就可以简写成 { name, age }
答案: 不是简写的问题,
可能第一眼 会觉得这是简写的问题, 但是往往简单的问题并不是我们想的那样.
第一个普通的正常的 why1 函数根据我们传递的参数返回了一个对象, 得到了正确结果.
但是第二个也是普通函数 why2 只因为了省下不换行, 却输出了 undefined, 这是个问题, 无法理解的神奇 bug.
那就是 return 后换行了, return 所在这一行 后面什么都没有, 会自动添加上 分号(;). 接下来的下一行{ one, two, three }的大括号被认为是一个作用块的开始, 而这个作用块里面却是没有意义的, 有没有返回什么结果.. 而 { one, two, three } 里面的逗号(","), 也被认为是运算符, 而不是分隔符. 所以没哟报错, 进而 return ; 返回了个 undefined. 而这也是不太容易发现的神奇bug啦!
