ES6 数组解构时不加分号引发的问题

这篇具有很好参考价值的文章主要介绍了ES6 数组解构时不加分号引发的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题代码

let value1 = 0
let value2 = 0
let value1_1 = '', value1_2 = '', value1_3 = '', value2_1, value2_2, value2_3

function myhandle(cur, pre) {
    let s = '', c = '', r = ''
    if (parseInt(cur) - parseInt(pre) < 0) {
        s = '-'
        c = 'decrease'
        r = Math.abs(parseInt(cur) - parseInt(pre))
    } else if (parseInt(cur) - parseInt(pre) === 0) {
        s = ''
        c = ''
        r = "不增不减"
    } else {
        s = '+'
        c = 'increase'
        r = parseInt(cur) - parseInt(pre)
    }

    return [c, s, r]
}

[value1_1, value1_2, value1_3] = myhandle(1, 2)
[value2_1, value2_2, value2_3] = myhandle(3, 2)

console.log(value1_1, value1_2, value1_3, value2_1, value2_2, value2_3);

预期正确输出

decrease - 1 increase + 1

实际输出结果

increase + 1 undefined undefined undefined

原因探究

由于没有在适当的行尾加上分号,导致下面的代码被误读:

[value1_1, value1_2, value1_3] = myhandle(1, 2)
[value2_1, value2_2, value2_3] = myhandle(3, 2)

被语法解释器解释成

[value1_1, value1_2, value1_3] = myhandle(1, 2)[1, 2, 3] = [4, 5, 6]

上面这行代码并不会报错,并且会将末尾的 [4, 5, 6] 赋值给 [value1_1, value1_2, value1_3]
这样就引发了直接打印 [value1_1, value1_2, value1_3] 的结果不等于 myhandle(1, 2) 的返回值。

可以通过尝试下面的代码:

let hello = [2131, 234]
console.log(hello
[0]
)

// 输出 2131

发现是因为 js 的语法解释器支持比较强的跨行数组索引语法,使得不加分号情况下可能会出现出人意料的情况。
一般开发的项目中,会通过插件配置自动添加在行尾添加分号来规避上面的问题。但是如果单纯写 js 代码
到 node 中运行就可能需要注意分号的问题。

有时项目配置的是保存时自动移除分号,又需要写出上面的赋值语句怎么办?

我和朋友讨论是要看你的项目有没有配置了 js 代码压缩,如果配置了压缩代码,那么说明你的项目代码最终
也是会在行尾帮你加上分号后再压缩(没分号怎么压缩代码)。

结论

写 js 代码一定要注意行尾分号问题,如果用的语句组合比较复杂,那么最好在行尾加上分号增强代码可读性。文章来源地址https://www.toymoban.com/news/detail-723047.html

到了这里,关于ES6 数组解构时不加分号引发的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ES6-解构

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 🍿🍿🍿es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,称之为解构。 解构是es6的新特性,比ES5代码简介、清晰、减少代码量 ES5中的为变量赋值,只能直接指定值。 es6匹配模式写法

    2024年02月10日
    浏览(36)
  • ES6: 解构赋值

    解构赋值是一种快速为变量赋值的简洁语法,本质上仍然是为变量赋值,分为数组解构、对象解构两大类型。 数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法,如下代码所示: 数组解构赋值: eg1: eg2: eg3: eg4: eg5: 交换2个变量的值 总结: 赋值运算符 = 左侧的

    2024年02月09日
    浏览(56)
  • 【ES6】—解构赋值

    解构赋值:解构赋值就是一种模式的匹配,只要等号两边的模式完全相同的,那么左边的变量就会被赋值对应右边的值 PS:数组解构赋值时,是通过索引的唯一性赋值的 (1). ES5 的写法 (2). ES6 的写法 ES6的写法 当左右两边的结构模式不匹配时,按照左边变量对应索引的位置赋值

    2024年02月12日
    浏览(38)
  • [ES6]解构与赋值

    解构赋值是对赋值运算符的扩展。 通过解构,可以更加简单的获取复杂对象的属性 解构的源,解构赋值表达式的右边部分 解构的目标,解构赋值表达式的左边部分 当变量名称与对象中的属性名称一致时,可简写 {attr} 使用解构方式获取对象参数中的对应属性,这样在函数内部

    2023年04月22日
    浏览(41)
  • 【ES6】解构语句中的冒号(:)

    在解构赋值语法中,冒号(:)的作用是为提取的字段指定一个新的变量名。 让我们以示例 const { billCode: code, version } = route.query 来说明: { billCode: code, version } 表示从 route.query 对象中提取 billCode 和 version 字段。 冒号(:)后面的 code 是新的变量名,表示将 billCode 字段的值赋给

    2024年01月21日
    浏览(38)
  • 深入理解 ES6 的解构表达式

    还是大剑师兰特 :曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。 No. 内容链接 1 Openlayers 【入门教

    2024年04月13日
    浏览(39)
  • ES6之 变量的解构赋值 ➕ 扩展运算符(…)

    一看就懂,代码如下: 效果如下: 如下: 如下: 什么是扩展运算符(…运算符)? 就是展开语法 (Spread syntax), 可以在函数调用/数组构造时,将数组表达式或者 string 在语法层面展开;还可以在构造字面量对象时,将对象表达式按 key-value 的方式展开。(译者注: 字面量一般指

    2024年02月09日
    浏览(45)
  • 【React系列】ES6学习笔记(一)let与const、解构赋值、函数参数默认值\rest参数\箭头函数、数组和对象的扩展、Set和Map等

    本文参考自电子书《ECMAScript 6 入门》:https://es6.ruanyifeng.com/ 尽量使用 let 声明变量,而不是 var 。 let 声明的变量是 块级作用域 , var 声明的变量是 全局作用域 。 使用 let 变量 必须先声明再使用,否则报错,不存在变量提升 。相对的 var 声明的变量如果提前使用,不会报错

    2024年02月03日
    浏览(52)
  • 【web前端学习】7个ES6解构技巧让代码更简洁

    各位前端er,代码打久了,是否厌倦了编写臃肿且难以阅读的代码?想要提升编码技能并使代码更具可读性和简洁性? 今天这篇文章,与小千一起深入学习 ES6 解构的世界,向您展示如何使用它来编写更干净、更高效的代码 本文将从 解构对象和数组到使用默认值和展开运算符

    2024年02月05日
    浏览(31)
  • JavaScript全解析——ES6函数中参数的默认值和解构赋值

    本文为千锋资深前端教学老师带来的【JavaScript全解析】系列,文章内含丰富的代码案例及配图,从0到1讲解JavaScript相关知识点,致力于教会每一个人学会JS! 文末有本文重点总结,可以收藏慢慢看~ 更多技术类内容,主页关注一波! 给函数的形参设置一个默认值, 当你没有传

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包