看到这样一个问题:为什么直接在控制台运行{} + []和用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. SSH开发环境搭建

    断断续续学习hibernate也有一段时间了,在这里研究一下SSH开发环境的搭建过程,自己简单的搭建一个SSH的开发环境.采用maven搭建. 0.项目结构: 1.导包:(maven项目) pom.x ...

  2. K中心点算法之PAM

    一.PAM聚类算法:         选用簇中位置最中心的对象,试图对n个对象给出k个划分:代表对象也被称为是中心点,其他对象则被称为非代表对象:最初随机选择k个对象作为中心点,该算法反复地用非代表对 ...

  3. Git入门——远程仓库及分支管理

    关于本地版本库的操作,请见:Git入门--本地版本库操作 本篇提到的所有命令: 小结 前面提到,Git相对于传统的SVN有着很大的优势,其中之一就在于集中式系统中,版本库只能存在于中央服务器上:而在G ...

  4. 【转载】Hadoop mapreduce 实现原理

    1.  如何用通俗的方法解释MapReduce MapReduce是Google开源的三大技术之一,是对海量数据进行“分而治之”计算框架.为了简单的理解并讲述给客户理解.我们举下面的例子来说明. 首先 ...

  5. 关于C++中的指针、数组

    C++中指针和数组基本等价的原因在于指针算术和C++内部处理数组的方式:将整数变量加一后,其值将增加1:将指针变量加一后,增加的量等于其指向的数据类型的字节数: 指针中存储的是地址,地址在形式上和整数 ...

  6. BootStrap学习从现在开始

    前言 原文链接 http://aehyok.com/Blog/Detail/6.html 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Boo ...

  7. mysql安装与卸载(非绿色版)

    一.安装和卸载 Mysql安装路径: C:\Program Files\MySQL\MySQL Server 5.5\ Mysql数据文件存放的路径: C:\Documents and Setting ...

  8. @Html.Action()

    背景 在这里主要想谈下mvc,最初几年都是用的webform,作为一个资深傻瓜程序员多年,后来到处听说mvc,终于在某天下定决心实验下mvc,其实关键还是在于easyui,因为它的请求数据方式和mvc ...

  9. zabbix3.0.4报错Get value from agent failed: cannot connect to [[1.1.1.1]:10050]: [4] Interrupted syste

    一.问题描述 部署完Zabbix agent之后,Server无法获取到数据.报错.报错信息如下: Get value from agent failed: cannot connect to [[1 ...

  10. Ex 6_19 至多用k枚硬币兑换价格_第七次作业

    子问题定义: 定义一个二维数组b,其中b[i][j]表示用i个硬币是否能兑换价格j,表示第i个币种的面值, 递归关系: 初值设定: 求解顺序: 按下标从小到大依次求解数组b每一列的值,最后二维数组b的 ...