javascript的 {} 语句块详解


Posted in Javascript onFebruary 27, 2016

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

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

表示语句块

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

{
//some code...
}

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

对象字面量

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
  })

  //正确的写法

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

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

Javascript 相关文章推荐
JavaScript效率调优经验
Jun 04 Javascript
Document 对象的常用方法
Jul 31 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
vue实现简单学生信息管理
May 30 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
javascript中eval解析JSON字符串
Feb 27 #Javascript
javascript先序遍历DOM树的方法
Feb 27 #Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 #Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 #Javascript
JS原型、原型链深入理解
Feb 27 #Javascript
Javascript中Date类型和Math类型详解
Feb 27 #Javascript
原生javascript实现匀速运动动画效果
Feb 26 #Javascript
You might like
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
Express.JS使用详解
2014/07/17 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python中subprocess的简单使用示例
2015/07/28 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
python测试mysql写入性能完整实例
2018/01/18 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python 项目目录结构设置
2020/02/14 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
四川成都导游欢迎词
2014/01/18 职场文书
心理健康活动总结
2014/04/30 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
整脏治乱工作简报
2015/07/21 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js