深入探究javascript的 {} 语句块

简介: 深入探究javascript的 {} 语句块 今日学习解析json字符串,用到了一个eval()方法,解析字符串的时候为什么需要加上括号呢?摸不着头脑。原来javascript中{}语句块具有二义性,不加括号会出错,理解这种二义性对我们理解javascript代码有极大帮助。

深入探究javascript的 {} 语句块

 

今日学习解析json字符串,用到了一个eval()方法,解析字符串的时候为什么需要加上括号呢?摸不着头脑。原来javascript中{}语句块具有二义性,不加括号会出错,理解这种二义性对我们理解javascript代码有极大帮助。

 


 

一、{}语句块的两个含义

  1. 表示语句块

    a. 在javascript中可以使用{}来括起代码,在编辑器中方便管理代码。因为javascript并没有块级作用域,所以这种写法是无害的。

    {
    //some code...
    }

    b. 在javascript中 ,条件判断语句,循环语句,函数都需要{}语句块来整合代码

  2. 对象字面量

var box = {
    name:'kuoaho',
    age:21  
}
//此时{code}作为表达式,可以赋值给一个变量
//其实对象字面量就是可以生成对象值的表达式

 


 

二、那如果对象字面量不作为一个赋值表达式,会发生什么情况呢?

example:
    {name:'kuoao'}        //没有报错,但是也没有创建对象
    {name:'kuohao',age} //报错

由上面可以看出对象字面量只能够作为表达式赋值,第一种写法没有错,只是javascript将它作为一个label语句解析了。

analysis:
    {name:'kuoao'}

       //{}一个语句块
      // name:'kuohao',一个label语句,用于标记for循环

 


 

三、但是问题又来了……

{
name:'kuohao',
age:21
}
//这样为什么会报错?这不是对象字面量的写法吗?

因为javascript中{}的二义性,{}不仅仅被认为是对象字面量而且还会被认为是代码块。

analysis:
    {
    name:'kuohao',
    age:21
    }
        

一个代码块,两条label语句,如果没有逗号,是完全没有问题的,所以关键在于逗号,两条语句的分隔应该使用分号,所以javascript会判定这是语法错误

 


 

四、正确的写法

({
    name:'kuohao',
    age:21
    })

    //正确的写法

()会把语句转换成表达式,称为语句表达式,对象字面量不是表达式吗?为什么还需要()来转换?

加上括号以后,就可以消除这种二义性,因为括号里的代码都会被转换为表达式求值并且返回,因此语句块也就变成了对象字面量,也可以得出,对象字面量必须作为表达式而存在

目录
相关文章
|
JSON 前端开发 JavaScript
探究JavaScript前端热点面试题(三):让你在面试中游刃有余!
探究JavaScript前端热点面试题(三):让你在面试中游刃有余!
|
JavaScript 前端开发
JavaScript实现div块跟随鼠标移动效果
JavaScript实现div块跟随鼠标移动效果 前面讲了这么多DOM事件有关的属性等,现在我们进行一些相关的练习,实现div块跟随鼠标移动效果,如图: 在这里插入图片描述 HTML代码: <div id="box"></div> 1 CSS代码: *{ margin: 0; padding: 0; } body{ width: 2000px; height: 2000px; } #box{ width: 200px; heigh
JavaScript实现div块跟随鼠标移动效果
|
6月前
|
前端开发 JavaScript API
JavaScript中的异步编程技术探究
JavaScript作为一种前端开发语言,具有强大的异步编程能力,本文将深入探讨JavaScript中的异步编程技术,包括回调函数、Promise、async/await以及最新的ES2022中的并行执行模型,帮助开发者更好地理解和应用JavaScript异步编程。
|
7月前
|
JavaScript 前端开发
JavaScript原型链:工作原理与深入探究
【4月更文挑战第22天】JavaScript原型链是对象属性查找的关键,它通过对象间的链接形成链式结构。当访问属性时,JS从对象自身开始查找,若未找到则沿原型链向上搜索,直至`null`。原型链用于继承、扩展内置对象和实现多态,但要注意避免修改内置对象原型、控制链长度及使用`Object.create()`创建对象。理解并合理运用原型链能深化JS面向对象编程的理解。
|
7月前
|
前端开发 JavaScript Java
【Java】Java与JavaScript:探究它们的区别与联系
【Java】Java与JavaScript:探究它们的区别与联系
187 0
|
7月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
7月前
|
JavaScript 前端开发 UED
探究: 为什么JavaScript要在body标签尾部引入?
探究: 为什么JavaScript要在body标签尾部引入?
80 0
|
7月前
|
前端开发 JavaScript 算法
深入探究 JavaScript 中的 String:常用方法和属性全解析(下)
深入探究 JavaScript 中的 String:常用方法和属性全解析(下)
|
7月前
|
前端开发 JavaScript 索引
深入探究 JavaScript 中的 String:常用方法和属性全解析(中)
深入探究 JavaScript 中的 String:常用方法和属性全解析(中)
|
7月前
|
存储 前端开发 JavaScript
深入探究 JavaScript 中的 String:常用方法和属性全解析(上)
深入探究 JavaScript 中的 String:常用方法和属性全解析(上)