JavaScript数组解构分配产生奇怪的错误

时间:2019-07-12 11:57:31

标签: javascript ecmascript-6 destructuring

在使用Javascript解构分配时,我刚刚注意到一个奇怪的错误,这使我不得不做出一些猜测。我在这里发布,以便我可以展示我学到的东西。 (我接受What are the rules for JavaScript's automatic semicolon insertion (ASI)?回答了有关Javascript分号的问题,但是我的问题是,当ASI的工作方式与我期望的不同时,如何诊断一个奇怪的错误;这是我希望在何时找到的答案搜索“数组解构错误”或类似内容。)

以下代码:

let next_col_time_step = head_steps.reduce(
    choose_next_step, [-1, -1, null]
    )
[next_step_col, next_step_time, next_step] = next_col_time_step

运行时会产生一个非常混乱的错误:

ReferenceError: can't access lexical declaration 'next_col_time_step' before initialization

尽管(显然)只是在错误行之前被初始化。

或者,如果我尝试查看已分配的值,则:

let next_col_time_step = head_steps.reduce(
    choose_next_step, [-1, -1, null]
    )
console.log("next_col_time_step %s", next_col_time_step)
[next_step_col, next_step_time, next_step] = next_col_time_step

我看到显示的期望值和另一个错误:

next_col_time_step 2,52,[object Object] 
TypeError: console.log(...) is undefined

console.log(...)显然按预期工作,然后报告为未定义。这是怎么回事?

1 个答案:

答案 0 :(得分:0)

这里的问题是Javascript语法中令人困惑的歧义。

是否注意到我没有使用;语句终止符?

似乎数组解构分配被解析为应用于上一条语句的数组索引操作。

快速解决方案:在前面的语句之后添加;(但是,如果通常省略这些样式,不幸的是这会强制产生不一致的样式):

let next_col_time_step = head_steps.reduce(
    choose_next_step, [-1, -1, null]
    );
[next_step_col, next_step_time, next_step] = next_col_time_step

然后,瞧!,一切都很好:)