js表达式和语句趣味题讲解与技术分享
技术分享
问题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表达式和语句趣味题讲解与技术分享的更多相关文章
- js 表达式与语句
引子:表达式和语句很基础,但是有时会犯错,比如: function(){}//报错 (function(){})//不报错 function f(x){ return x + 1 }()//报错 fu ...
- js表达式和语句
表达式 一个表达式可以产生一个值,有可能是运算.函数调用.有可能是字面量.表达式可以放在任何需要值的地方. 语句 语句可以理解为一个行为,循环语句和判断语句就是典型的语句.一个程序有很多个语句组成,一 ...
- js表达式与语句的区别
http://www.2ality.com/2012/09/expressions-vs-statements.html http://www.jb51.net/article/31298.htm 表 ...
- 【.net 深呼吸】细说CodeDom(2):表达式、语句
在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说,Emit并不是针对代 ...
- C Primer Plus_第5章_运算符、表达式和语句_编程练习
Practice 1. 输入分钟输出对应的小时和分钟. #include #define MIN_PER_H 60 int main(void) { int mins, hours, minutes; ...
- 算法训练 Hankson的趣味题
算法训练 Hankson的趣味题 时间限制:1.0s 内存限制:64.0MB 问题描述 Hanks 博士是BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫Han ...
- js中退出语句break,continue和return 比较
js中退出语句break,continue和return 比较 在 break,continue和return 三个关键字中, break,continue是一起的,return 是函数返回语句,但是 ...
- 1172 Hankson 的趣味题[数论]
1172 Hankson 的趣味题 2009年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Descrip ...
- 1172 Hankson 的趣味题
1172 Hankson 的趣味题 2009年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Descrip ...
随机推荐
- 使用float设置经典的网站前端结构
float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...
- IDEA 使用lombok
一.配置maven <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback ...
- Java虚拟机之垃圾回收
简述 Java与那些较传统的语言比如C++有个很大不同就是垃圾回收策略了.前者通常是虚拟机自动帮我们做了,而后者就需要我们手动来完成. Java虚拟机帮我们完成了垃圾回收,是不是意味着我们就不用完全去 ...
- [考试反思]1019csp-s模拟测试80(a):天遣
A组题,所以把榜粘全了. 第6名,被卡在刚好正中间. 我最近干什么伤天害理的事了?(例如说没有在skyh去上厕所的时候捶他) 上来看T1,非常贴心出题人直接把递推式子给你了,然后就和斐波数的递推一样了 ...
- Python3.x安装教程及环境变量配置
python3.x安装 1.直接到官网https://www.python.org/下载,安装就可以了. 2.安装比较简单,点exe文件一直下一步就可以了(注意:安装的时候有个选择是否添加环境变量,这 ...
- Python的看门狗实现自动化实时对服务器、Windows或Linux文件夹的实时监控
众所周知,在运维过程中,实时获取目标文件夹至关重要,Python的watchdog是用程序来监视文件系统事件Python库,所以用该库可以实现对文件夹的实时监控,filenotify.py代码如下: ...
- canvas线条实践之运动的正方形
原理说明: 1.通过rect实现正方形的绘制: 2.save保存canvas面板的保存,restore回复保存的canvas面板到初始状态: 3.translate用于改变canvas坐标的起始位置: ...
- IP网段的判断
一. OSI七层模型 表示 说明 作用 应用层 HTTP.ftp 协议 表示层 UTF-8 将应用层协议翻译成计算机可识别的语言 会话层 管理传输层 传输层 TCP/UDP 建立以及断开连接 网 ...
- show语句大全
基于本人对MySQL的使用,现将常用的MySQL show 语句列举如下: 1.show databases ; // 显示mysql中所有数据库的名称 2.show tables [from dat ...
- 创建基于OData的Web API - Knowledge Builder API, Part IV: Write Controller
基于上一篇<创建基于OData的Web API - Knowledge Builder API, Part III:Write Model and Controller>,新创建的ODat ...