技术分享


问题1

{ a: 1 } + 1
// ? ({ a: 1 }) + 1
// ? 1 + { a: 1 }
// ?

答案

{ a: 1 } + 1
// 1 ({ a: 1 }) + 1
// "[object Object]1" 1 + { a: 1 }
// "1[object Object]"

问题2

{ 1 + 1 } + '2'
// ? ({ 1 + 1 }) + '2'
// ? '2' + { 1 + 1 }
// ?

答案

{ 1 + 1 } + '2'
// 2 (number) ({ 1 + 1 }) + '2'
// Uncaught SyntaxError: ... '2' + { 1 + 1 }
// Uncaught SyntaxError: ...

问题3

function foo () {
console.log('foo expression run! index: 1')
} var fooAlias = function foo(again) {
console.log('named function run! index: 2')
if (again) {
foo()
}
}; console.log(fooAlias.name); // ?
foo(true); // ?
fooAlias(true); // ?

答案

function foo () {
console.log('foo expression run! index: 1')
} var fooAlias = function foo(again) {
console.log('named function run! index: 2')
if (again) {
foo()
}
}; console.log(fooAlias.name); // chrome: foo , ie: undefined
foo(true); // foo expression run! index: 1
fooAlias(true); // named function run! index: 2
// named function run! index: 2

表达式和语句

expression & statement

var a = 1 + 1; // 怎么区分表达式和语句?

1 + 1          // 算术表达式,返回一个值,(非表达式语句的表达式没有副作用)

var a;         // 声明语句,引起变化,产生副作用,使某件事发生

a = 1          // 赋值表达式,表达式语句

表达式

1.原始表达式

3
false
this

2.初始化表达式

{a: 1} // 容易和block混淆
[2,3]

表达式

3.函数定义表达式

var f = function f() {} // 注意这里有个等号,同时函数不是匿名的。

4.对象创建表达式

new Object()

表达式

5.属性访问表达式

obj.a

6.调用表达式

f()

7.表达式计算

eval() // 用来把参数字符串当源代码执行,并计算出一个值

表达式

8.使用运算符的表达式

(算术/比较/逻辑/赋值…表达式)

1 + 1
1 < 3
true && false
a = 1
typeof a
delete obj.a
...

语句

使某件事发生?
1.计算带有副作用的表达式(表达式语句)
2.声明新变量/函数(声明语句)
3.改变语句的默认执行顺序(条件控制,循环,跳转语句,复合/块语句)
a++                   // 计算带有副作用的表达式
var a; // 声明新函数
function b() {} // 声明新函数, 重点,与函数定义表达式混淆
if () else () // 改变语句的默认执行顺序
while () // 改变语句的默认执行顺序
{...} // 复合/块语句 重点!与对象字面量易混淆


回顾问题1

{ a: 1 } + 1 // 1

({ a: 1 }) + 1 // "[object Object]1"

1 + { a: 1 } // "1[object Object]"

回顾问题2

{ 1 + 1 } + '2' // 2 (number)

({ 1 + 1 }) + 1 // Uncaught SyntaxError: ...

'2' + { 1 + 1 } // Uncaught SyntaxError: ...

回顾问题3

function foo () {
console.log('foo expression run! index: 1')
} var fooAlias = function foo(again) {
console.log('named function run! index: 2')
if (again) {
foo()
}
}; console.log(fooAlias.name); // chrome: foo , ie: undefined
foo(true); // foo expression run! index: 1
fooAlias(true); // named function run! index: 2
// named function run! index: 2

https://www.cnblogs.com/TomXu/archive/2011/12/29/2290308.html


更多:

[1,2].map(function a (item) {
return item + 1
})
// a 未定义
// ------------------------------------- console.log(foo);
if (true) {
function foo() { console.log('foo run') }
}
// ie function foo... 其他 undefined
// ie会当作函数定义语句,其他浏览器会提升foo变量,并将函数声明放到if语句顶部执行。
// 函数声明只能出现在所嵌套函数或全局作用域的顶部,不应该出现在其他语句中。
// 否则出现兼容性问题。

立即执行函数表达式(IIFE – Immediately-invoked function expression)

// 先用表达式和语句的知识来理解一下立即执行函数
function a () {} // 函数声明语句 (function a () {}) // 括号用于改变运算顺序,这是一个返回函数的表达式 (function a () {})() // 返回的函数立即执行,并返回执行结果 (function a () {}()) // 返回函数执行后结果
// 除了第一句,其他几句运行后,a都是undefined,ie8以下会给a定义并提升

括号开头要小心

let f = (function () {}())
(function () {}())
// Uncaught TypeError: (intermediate value)(...) is not a function let f = (function () {}());
(function () {}())

https://segmentfault.com/a/1190000004548664


思考

eval("{foo: 123}");     // 123

eval("({foo: 123})");   // { foo: 123 }

'use strict' // 语句还是表达式


问题4

var a
(function a() {
return function (p) {
console.log(eval('if (true) { { 1 + 1 } + "5" + p }'))
}
}(3))
(function a() {
console.log('4')
return 4
}())
console.log(a)

A 4 9 undefined B 4 9 function a() {...} C 8 4 function a() {...} D 8 4 undefined

答案

var a
(function a() {
return function (p) {
console.log(eval('if (true) { { 1 + 1 } + "5" + p }'))
}
}(3))
(function a() {
console.log('4')
return 4
}())
console.log(a) // 执行结果
// 现代bro A 4 9 undefined
// ie8以下 B 4 9 function a() { console.log('4'); return 4; }

思考

  • 为什么要分为表达式和语句?

  • 函数式编程倡导的无副作用与表达式之间的关系在哪?


谢谢!

js表达式和语句趣味题讲解与技术分享的更多相关文章

  1. js 表达式与语句

    引子:表达式和语句很基础,但是有时会犯错,比如: function(){}//报错 (function(){})//不报错 function f(x){ return x + 1 }()//报错 fu ...

  2. js表达式和语句

    表达式 一个表达式可以产生一个值,有可能是运算.函数调用.有可能是字面量.表达式可以放在任何需要值的地方. 语句 语句可以理解为一个行为,循环语句和判断语句就是典型的语句.一个程序有很多个语句组成,一 ...

  3. js表达式与语句的区别

    http://www.2ality.com/2012/09/expressions-vs-statements.html http://www.jb51.net/article/31298.htm 表 ...

  4. 【.net 深呼吸】细说CodeDom(2):表达式、语句

    在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说,Emit并不是针对代 ...

  5. C Primer Plus_第5章_运算符、表达式和语句_编程练习

    Practice 1. 输入分钟输出对应的小时和分钟. #include #define MIN_PER_H 60 int main(void) { int mins, hours, minutes; ...

  6. 算法训练 Hankson的趣味题

    算法训练 Hankson的趣味题   时间限制:1.0s   内存限制:64.0MB        问题描述 Hanks 博士是BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫Han ...

  7. js中退出语句break,continue和return 比较

    js中退出语句break,continue和return 比较 在 break,continue和return 三个关键字中, break,continue是一起的,return 是函数返回语句,但是 ...

  8. 1172 Hankson 的趣味题[数论]

    1172 Hankson 的趣味题 2009年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Descrip ...

  9. 1172 Hankson 的趣味题

    1172 Hankson 的趣味题 2009年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Descrip ...

随机推荐

  1. 使用float设置经典的网站前端结构

    float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...

  2. IDEA 使用lombok

    一.配置maven <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback ...

  3. Java虚拟机之垃圾回收

    简述 Java与那些较传统的语言比如C++有个很大不同就是垃圾回收策略了.前者通常是虚拟机自动帮我们做了,而后者就需要我们手动来完成. Java虚拟机帮我们完成了垃圾回收,是不是意味着我们就不用完全去 ...

  4. [考试反思]1019csp-s模拟测试80(a):天遣

    A组题,所以把榜粘全了. 第6名,被卡在刚好正中间. 我最近干什么伤天害理的事了?(例如说没有在skyh去上厕所的时候捶他) 上来看T1,非常贴心出题人直接把递推式子给你了,然后就和斐波数的递推一样了 ...

  5. Python3.x安装教程及环境变量配置

    python3.x安装 1.直接到官网https://www.python.org/下载,安装就可以了. 2.安装比较简单,点exe文件一直下一步就可以了(注意:安装的时候有个选择是否添加环境变量,这 ...

  6. Python的看门狗实现自动化实时对服务器、Windows或Linux文件夹的实时监控

    众所周知,在运维过程中,实时获取目标文件夹至关重要,Python的watchdog是用程序来监视文件系统事件Python库,所以用该库可以实现对文件夹的实时监控,filenotify.py代码如下: ...

  7. canvas线条实践之运动的正方形

    原理说明: 1.通过rect实现正方形的绘制: 2.save保存canvas面板的保存,restore回复保存的canvas面板到初始状态: 3.translate用于改变canvas坐标的起始位置: ...

  8. IP网段的判断

    一.    OSI七层模型 表示 说明 作用 应用层 HTTP.ftp 协议 表示层 UTF-8 将应用层协议翻译成计算机可识别的语言 会话层 管理传输层 传输层 TCP/UDP 建立以及断开连接 网 ...

  9. show语句大全

    基于本人对MySQL的使用,现将常用的MySQL show 语句列举如下: 1.show databases ; // 显示mysql中所有数据库的名称 2.show tables [from dat ...

  10. 创建基于OData的Web API - Knowledge Builder API, Part IV: Write Controller

    基于上一篇<创建基于OData的Web API - Knowledge Builder API, Part III:Write Model and Controller>,新创建的ODat ...