资讯专栏INFORMATION COLUMN

你知道JavaScript中的结果值是什么吗?

YanceyOfficial / 2727人阅读

摘要:你知道中的每条语句甚至表达式都有一个结果值吗当你在浏览器中测试代码时,经常会在控制台的输出结果的最后面多出一条,大部分为,这个就是一个结果值。特例变量声明语句函数声明语句的结果值为。

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

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

ES7的do表达式

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

</>复制代码

  1. var a,b,c = 3;
  2. a = do {
  3. if (true) {
  4. b = c*3;
  5. }
  6. };
  7. 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。

变量声明语句算法的返回值实际为表示该变量名称的字符串,但是这个值被变量语句算法屏蔽掉了(for...in循环除外),最后返回结果为undefined

而对于函数声明语句,它的结果值本人按规范解读为该函数对象,但浏览器显示为undefined,具体什么原因,本人还不理解(可能是因为函数只是定义,未被实际执行的原因);

函数执行语句的结果值为:

</>复制代码

  1. 3.1 若有throw语句,则为throw语句的结果值
  2. 3.1 若有return语句,则为return语句的结果值
  3. 3.2 若无throwreturn语句则为undefined

例子:

</>复制代码

  1. var a,b,c = 3;
  2. if (true) {b = c*3;} //按顺序执行到最后一条语句,输出9

; //undefined 多带带的空语句
var d = 5; //undefined 所有的var声明语句的结果值均为undefined

</>复制代码

  1. function foo(a){
  2. a = a+2;
  3. return a;
  4. }
  5. //undefined 函数声明语句的最终结果值也为undefined

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

</>复制代码

  1. {
  2. var a = 1,b = 2;
  3. if(true){a;}else{b;} //输出1,最后一条空语句会被忽略
  4. ;
  5. }

</>复制代码

  1. var a = 5;
  2. switch(a){
  3. case 1:
  4. a+1;
  5. break;
  6. case 5:
  7. a+5;
  8. break;
  9. case 3:
  10. a+3;
  11. break;
  12. }
  13. //10 空的break;语句会被忽略

</>复制代码

  1. var a = 5;
  2. switch(a){
  3. case 1:
  4. a+1;
  5. break;
  6. case 5:
  7. break; //执行这里,它这里无同级语句
  8. case 3:
  9. a+3;
  10. break;
  11. }
  12. //undefined

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

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

</>复制代码

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

又如:

</>复制代码

  1. var a = 0;
  2. var b = a++;
  3. a; //1
  4. b; //0
  5. var c = a++; //结果值为undefined 副作用是c被赋值了,a变成了2
  6. var d = a++, a; //结果值为undefined,副作用是d被赋值为2,a变成了3,实际执行的是var d = a++;
  7. var d = (a++,a);//结果值为undefined,副作用是d被赋值为3,a变成了3,实际执行的是var d = ++a;

</>复制代码

  1. function foo(){
  2. var e = f = 1; //表达式f=1的结果值为1,1又被赋值给e
  3. }
  4. foo();
  5. f; //1 创建了全局变量f
  6. e; //ReferenceError

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

</>复制代码

  1. function foo(a){
  2. var b;
  3. if(a&&(b = a*10;)<50){
  4. ...
  5. }
  6. }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80608.html

相关文章

  • Front-end-Developer-Interview-Questions

    摘要:前端工作面试问题备注本包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题那需要好几个小时。列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。选择器字符串,字符串,回调函数,元素,对象,数组,元素数组,对象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...

    array_huang 评论0 收藏0
  • Front-end-Developer-Interview-Questions

    摘要:前端工作面试问题备注本包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题那需要好几个小时。列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。选择器字符串,字符串,回调函数,元素,对象,数组,元素数组,对象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...

    shadajin 评论0 收藏0
  • Front-end-Developer-Interview-Questions

    摘要:前端工作面试问题备注本包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题那需要好几个小时。列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。选择器字符串,字符串,回调函数,元素,对象,数组,元素数组,对象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...

    13651657101 评论0 收藏0
  • 嗨,真的懂this

    摘要:任何一个函数都可以使用来调用,因此其实并不存在构造函数,而只有对于函数的构造调用。不可以当作构造函数,也就是说,不可以使用命令,否则会抛出一个错误。 this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JsvaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗? 请先回答第一个问题:如何准...

    morgan 评论0 收藏0
  • 真的知道JS

    摘要:你真的知道吗是一门奇怪的语言,要真正掌握并不容易。废话不多说,来一个快速测试,道题目,看看你对是否真正掌握。操作符用来判断某个属性属于某个对象,可以是对象的直接属性,也可以是通过继承的属性。很多人会认为打印的是。 你真的知道JavaScript吗     JavaScript是一门奇怪的语言,要真正掌握并不容易。废话不多说,来一个快速测试,5道题目,看看你对JavaScript是否真正...

    Half 评论0 收藏0

发表评论

0条评论

YanceyOfficial

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<