什么是JavaScript中的结果值?


Posted in Javascript onOctober 08, 2016

你知道JavaScript中的每条语句、甚至表达式都有一个结果值吗?

当你在浏览器中测试代码时,经常会在控制台的输出结果的最后面多出一条,大部分为undefined,这个undefined就是一个结果值。

ES7的do表达式

先从ES7的一个提案说起吧:do表达式do{...}(注意:不是do{...}while();中的do)

var a,b,c = 3;
a = do {
   if (true) {
      b = c*3;
   }
};
a; //9 目前的浏览器暂不支持

表达式do{...}的作用就是返回它后面的语句块的结果值,功能其实和return类似,只不过return需要通过函数来封装后调用。

不过目前来说,我们还无法使用上面的功能,目前的规范是不允许我们获得语句的结果值并将其赋值给一个变量的(除了使用eval(),如var a = eval('if (true) {b = c*3;}'),a的值被赋值为eval()内的语句的结果值,不建议使用eval())。

ES5规范关于结果值的规定

现在你应该大概理解了什么是结果值了,本人翻看了ES5规范,发现JavaScript中,语句块、语句、甚至表达式都会隐式地返回一个结果值,总结如下:
结果值是语句、表达式经过逻辑运算后的值,若无逻辑(按顺序执行)则为最后一条子语句、表达式的结果值(语句可以包含子语句),简单地说它就是一个语句、表达式的“隐式的返回值”,JavaScript会计算每一条语句、表达式并返回一个结果值,而对于语句块的结果值,它是最后一条最外层语句的结果值(非嵌套的子语句)。

部分浏览器会在控制台输出一段代码的最后一条语句或语句块的结果值(本文所有代码均使用Firefox测试,不同浏览器有差别)

结果值可以为任何表达式的值,也可以为空(;、break;、continue;),为空时结果值为undefined。当结果值为空时,浏览器会忽略该语句,而打印出上一条同级的非空的语句,若仅有自身一条同级语句则打印出undefined。

特例:var变量声明语句、函数声明语句的结果值为undefined。

1、变量声明语句算法的返回值实际为表示该变量名称的字符串,但是这个值被变量语句算法屏蔽掉了(for...in循环除外),最后返回结果为undefined
2、而对于函数声明语句,它的结果值本人按规范解读为该函数对象,但浏览器显示为undefined,具体什么原因,本人还不理解(可能是因为函数只是定义,未被实际执行的原因);
3、函数执行语句的结果值为:
3.1 若有throw语句,则为throw语句的结果值
3.1 若有return语句,则为return语句的结果值
3.2 若无throw、return语句则为undefined

例子:

var a,b,c = 3;
if (true) {b = c*3;} //按顺序执行到最后一条语句,输出9
; //undefined 单独的空语句
var d = 5; //undefined 所有的var声明语句的结果值均为undefined

function foo(a){
 a = a+2;
 return a;
}
//undefined 函数声明语句的最终结果值也为undefined
foo(1); //3 函数执行语句的结果值为函数throw、return语句的结果值,若无throw、return语句,则为undefined
if(true){a=1;}else{b=2;} //1 按逻辑计算结果执行a=1;语句

{
 var a = 1,b = 2;
 if(true){a;}else{b;} //输出1,最后一条空语句会被忽略
 ;
}
var a = 5;
switch(a){
 case 1:
  a+1;
  break;
 case 5:
  a+5;
  break;
 case 3:
  a+3;
  break;
}
//10 空的break;语句会被忽略
var a = 5;
switch(a){
 case 1:
  a+1;
  break;
 case 5:
  break; //执行这里,它这里无同级语句
 case 3:
  a+3;
  break;
}
//undefined

下面来具体看看表达式的结果值有什么用:
大部分表达式只有结果值,没有副作用,如:var a = 2; var b = a + 3;,这里的表达式a+3的结果值为5,被赋值给了b。

而有副作用的表达式,如:

function foo(){
  a++;
}
var a=0;
foo(); //结果值为undefined,副作用是改变了a的值

又如:

var a = 0; 
var b = a++;
a; //1
b; //0
var c = a++; //结果值为undefined 副作用是c被赋值了,a变成了2 
var d = a++, a; //结果值为undefined,副作用是d被赋值为2,a变成了3,实际执行的是var d = a++;
var d = (a++,a);//结果值为undefined,副作用是d被赋值为3,a变成了3,实际执行的是var d = ++a;
function foo(){
  var e = f = 1;  //表达式f=1的结果值为1,1又被赋值给e
}
foo();
f; //1 创建了全局变量f
e; //ReferenceError

赋值语句的副作用是将'='右边的表达式的结果值赋值给了左边的变量,最终整个赋值语句的结果值为变量的值,为此我们可以这样:

function foo(a){
  var b;
  if(a&&(b = a*10;)<50){
    ...
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 #Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 #Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 #Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 #Javascript
Javascript中常用的检测方法小结
Oct 08 #Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 #Javascript
AngularJS 2.0入门权威指南
Oct 08 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
YII框架关联查询操作示例
2019/04/29 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python实现批量图片格式转换
2020/06/16 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python字典一键多值实例代码分享
2019/06/14 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
大学毕业生求职自荐信
2014/02/20 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
工程质检员岗位职责
2015/04/08 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
撤诉书怎么写
2015/05/19 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
四年级作文之植物
2019/09/20 职场文书