看到这样一个问题:为什么直接在控制台运行{} + []和用console.log({} + [])输出,两者结果不一样?

于是乎打开chrome的控制台运行了一下:

为什么结果会这样呢?不得已学习一下JS中的{}吧

复合语句

 if() {
//...
}else {
//...
}
for() {
//...
}
while() {
//...
}
with(obj) {
//...
}

声明对象直接量

 var obj = {
name: 'Marco',
age: 22,
sex: male
};

声明函数或函数直接量

 function fn1() {
//...
}
var fn2 = function() {
//...
}

没有块级作用域

 for( var i = 0; i < 10; i++) {
doSomething(i);
} alert(i); //

javascript只有函数作用域,以下做法会声明全局变量:

  1. 直接为window添加属性或者赋值  //window.a = 1;
  2. 在function内不使用var声明变量而直接使用
  3. 在function外使用声明变量(无论是否适用var声明)
 function(num1 , num2) {
var sum = num1 + num2;
return sum;
} var result = add(10,20); //
alert(sum); //错误 function(num1 , num2) {
sum = num1 + num2;
return sum;
} var result = add(10,20); //
alert(sum); //

建议在初始化变量之前一定要先声明,这样可以避免不声明而直接初始化变量造成的错误。

当在某个环境中使用一个标识符时,必须先通过搜索来确定该标识符代表什么。搜索过程从作用域链的前端开始,向上逐级查询与给定名字匹配的标识符。若在该环境中找到了该标识符,则搜索停止,变量就绪。若在该局部环境没有找到该变量,则继续沿作用域链向上搜索,一直追溯到全局环境的变量对象。若在全局环境中没有找到该标识符,则说明该变量尚未声明。

 var num = 1;

 function getNum() {
var num = 10;
return num;
} alert(getNum()); //

变量查询是有代价的。很明显,访问局部变量要比访问全局变量更快,因为不用向上搜索作用域链。来看看jquery这么做的:

(function(window, undefined) {
var jQuery = function() {}
// ...
window.jQuery = window.$ = jQuery;
})(window);

这样写的优势:

1、window和undefined都是为了减少变量查找所经过的scope作用域。当window通过传递给闭包内部之后,在闭包内部使用它的时候,可以把它当成一个局部变量,显然比原先在window scope下查找的时候要快一些。(原来的window处于作用域链的最顶端,查找速度慢)

2、在jquery压缩版本jquery.min.js中可以将局部变量window替换成单个字母,减小文件大小,提高加载速度

3、undefined也是JavaScript中的全局属性。将undefined作为参数传递给闭包,因为没给它传递值,它的值就是undefined,这样闭包内部在使用它的时候就可以把它当做局部变量使用,从而提高查找速度。undefined并不是JavaScript的保留字或者关键字。

4、undefined在某些低版本的浏览器(例如IE8、IE7)中值是可以被修改的(在ECMAScript3中,undefined是可读/写的变量,可以给它赋任意值,这个错误在ECMAScript5中做了修正),将undefined作为参数并且不给它传值可以防止因undefined的值被修改而产生的错误。

结构化异常处理的语法符号 

 try {
//...
}catch( ex ){
//...
}finally{
//...
}

语句优先

当{}既可以被理解为复合语句块也可以被理解为对象直接量或函数声明的时候,JavaScript将会将其理解成为复合语句块

 {a:10}  //返回1,而不是对象   : 为标签

 var x = { a:10 } // {a:10}作为右值出现,不能是语句块,只能理解为对象直接量

至此,{}的基本知识就说完了。那么最开始的问题也很好解释了:

{}+[] :根据语句优先原则  {}被理解为复合语句块,因此相当于 {}; +[]   。[]为空,结果为0

console.log({}+[]) : js把()中的语句当做一个表达式,因此{}不能被理解为语句块,而被理解为"[object Object]" + "",console.log("[object Object]"+"")打印结果为[object Object]。

其实 console.log({}+[])和[]+{}的结果相同,原理相同,{}作为右值出现被理解为对象直接量

{}+[] 和[]+{}结果不相同,是不是很神奇。

来来来,做几个练习题压压惊:

 {a: 1} + 2     //
2 + {a: 1} // 2[object Object]
+ {a: 1} // NaN
{foo:[1,2,3]}[0]; // [0]

以上

{}+[]与console.log({}+[])结果不同?从JavaScript的大括号谈起的更多相关文章

  1. JavaScript调试技巧之console.log()详解

    JavaScript调试技巧之console.log()详解 对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻 ...

  2. javascript的console.log用法

    f1.html代码 <iframe id="frame2" name="frame1" src="ww.html"></i ...

  3. Javascript的console.log()用法

    Firebug & Chrome Console 控制台的一些其他功能console.log(object[, object, ...])使用频率最高的一条语句:向控制台输出一条消息.支持 C ...

  4. javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...

  5. [Javascript] Advanced Console Log Arguments

    Get more mileage from your console output by going beyond mere string logging - log entire introspec ...

  6. Eclipse中javascript文件 clg 变为console.log();

    Eclipse中javascript文件 clg 变为console.log(); window>preferance>JavaScript>Editor>Templates ...

  7. javascript中的console.log有什么作用?

    javascript中的console.log有什么作用? 主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是:他能看到结构话的东西,如果是alert ...

  8. jquery对象和javascript对象的console.log结果

    array.push($("div").children("label")); console.log(array); 输出: 这个是jquery对象,如果在选 ...

  9. JavaScript调试技巧之console.log()详解--2015-08-07

    对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断 JavaScript程序的执行,从而造成副作用:而cons ...

随机推荐

  1. ROS中的CMakeLists.txt

    在ROS的编程过程中,如果CMakeLists.txt如果写不好,编译就很难成功.如果看不懂CMakeLists.txt那么很多错误你也不知道时什么回事.所以深入了解它是很有必要的.现在我们就来看看它 ...

  2. ROS Kinetic Install on Debian 9

    Not Succesed! 1.  配置源$ sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release - ...

  3. Flex布局和Bootstrap布局两者的比较

    在Bootstrap中采用12栅格的布局,12份随意分配,但是不能解决5等分,7等分的问题.所以flex布局来协助. bootstrap的布局方式 <div class="row&qu ...

  4. Jenkins与网站代码上线解决方案【转】

    转自 Jenkins与网站代码上线解决方案 - 惨绿少年 https://www.nmtui.com/clsn/lx524.html 1.1 前言 Jenkins是一个用Java编写的开源的持续集成工 ...

  5. selenium和pyquery抓取异步加载数据

    安装selenium和pyquery 打开命令行输入: pip install selenium pip install pyquery chromedriver的下载地址如下: http://chr ...

  6. VS2017项目程序打包成.msi或者.exe

    VS2017项目程序打包成.msi或者.exe 1.安装打包插件:Microsoft Visual Studio 2017 Installer Projects 打开vs2017 ,选择 工具 --& ...

  7. linux POSIX 信号量介绍

    信号量一.什么是信号量信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程)使用.多线程可以同时运行多个线程函数完成功能,但是对于共享数据如果不加以锁定,随意改变共享数据的值会发生 ...

  8. python魔法函数(二)之__getitem__、__len__、__iter__

    魔法函数会增强python类的类型,独立存在 __getitem class Company: def __init__(self, employees): self.employees = empl ...

  9. node调试工具--nodemon

  10. (无)webservice执行过程深入理解

    前面我们搞了1,2个DEMO,基本对webservice服务发布,调用 ,执行 有一定的了解. 今天的话,我们再系统的梳理下webservice执行过程. 首先我们在webservice服务器端开发w ...