'{ }'在不同上下文中的作用

Reducto 发布于2019-08-20 11:27 / 1849人阅读

摘要：大括号的作用，在不同的上下文中差别很大以下观点若有错误，请前辈及时指出一被当做对象字面量如，外层的被赋值给了，这里的被当做对象处理。本文参考你不知道的

大括号‘{ }’的作用，在不同的上下文中差别很大！以下观点若有错误，请前辈及时指出！

一、{ }被当做对象字面量

如：var obj = { foo: function(){} };，外层的{...}被赋值给了obj，这里的{...}被当做对象处理。

在{ }的前面有运算符出现时，都会被当做对象处理，如："" + {}，var a = {x:1};

在{ }的外面包裹( )时，也被当对象处理，如( {a:1} )，而( { var a = 1; } )不符合对象定义的语法，会提示语法错误

二、{ }被当做代码块

除了以上被当做对象处理的情况，其它基本会被当做代码块处理

1.独立的代码块{...}

如：
当去掉var obj = { foo: function(){...} };中的声明赋值部分，只留下{ foo: function(){...} };，此时，{...}表示一个代码块，代码块内的foo: function(){...}将被视为标签语句（可以通过使用break foo；跳过被标记的代码块执行之后的语句，而在循环中可以用continue label;跳过被标记的循环体的本次循环，继续下一次循环，用break label；跳出被标记的循环体）

再如：

[] + {}; //"[object Object]"
{} + []; //0

第一句简单，{}被当做空对象处理，实际计算的是"" + [object Object]
第二句中，{}前面没有运算符，也没有其它任何修饰，被当做空的代码块了，实际计算的是+[]

2.函数体

如：function foo() {...}

3.for、while、if、switch等语句的主体

如：for(var i = 0; i < 5; i++){...}

var a = {x:1,y:2};
if(a.x == 1){
    ...
}else if(a.y == 2){
    ...
}else{
    ...
}

其实JavaScript并没有else if语句，如果if、else语句后面只有单个语句时可以省略{ }，所以else if(...){...}else{...}，严格来讲应该是这样else { if(...){...}else{...} }

三、解构赋值

ES6中新增的语法，如：var {a,b} = {a:1,b:2}; 相当于:

var obj = {a:1,b:2};
var a = obj.a;
var b = obj.b;

解构赋值也可以用于函数命名参数中：

function foo({a,b}){
    console.log(a,b);
}
foo( {a:1,b:2} )

四、JSON对象

虽说JSON是JavaScript语言的一个子集，但是JSON本身并不是合法的JavaScript语法，如：
{ "a": 1}不符合对象定义的语法，也不符合标签的语法（不允许有""），在各浏览器控制台输入它，表现各不相同，大部分抛出SyntaxError，Chrome则把它转换为对象了。
此时可以通过JSON-P，JSON-P能通过将JSON数据封装为函数调用，如foo({ "a": 1})，从而将JSON转换为合法的JavaScript语法。

本文参考《你不知道的JavaScript》

云服务器 GPU云服务器 java中的占位符&039 attr&039&039checked&039&039 given&039&039 php游戏代码&039&039

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

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

JS 中为啥 [&#039;1&#039;, &#039;7&#039;, &#039;11

摘要：如果我们把非布尔值作为条件呢打开控制台并运行上述代码，会打印说明条件为真值。在中，真值指的是在布尔值上下文中转换后的值为真的值。两个能够建立元素间一一对应的集合称为互相对等集合。 showImg(https://segmentfault.com/img/bVbtSvt?w=720&h=360); 为了保证可读性，本文采用音译而非直译。 Javascript 一直是神奇的语言。不相信我...

yuanzhanghu 2019-08-23 18:09 评论0 收藏0
ReferenceError: Cannot access &#039;X&#039; before

摘要：中文文档中的变量提升，是指在声明变量的代码执行之前，可以进行初始化和使用而不是指在创建词法环境阶段是否会创建对应的标识符。问题背景今天在 chrome devtools 中运行以下代码: function fn (name){ if (typeof name === undefined){ console.log(name:, name) let name ...

Elle 2019-08-23 17:51 评论0 收藏0
what&#039;s the deference between apply bind call?

摘要：弹出的就是，岁。值得注意的是，和都是改变上下文中的并立即执行这个函数，方法改变了指向之后会返回一个函数，可以随时调用。和作用完全一样，只是传参的方式不一样。以上，有错希望各位大神斧正。 apply bind call这三个方法，作用都是改变当前使用该方法的对象的this指向。但三个方法还是有一些区别，先说说共同点。 window.person = { name: mice...

yintaolaowanzi 2019-08-21 16:51 评论0 收藏0
《You Don&#039;t Know JS》阅读理解——this

摘要：运行规则根据的运作原理，我们可以看到，的值和调用栈通过哪些函数的调用运行到调用当前函数的过程以及如何被调用有关。 1. this的诞生假设我们有一个speak函数，通过this的运行机制，当使用不同的方法调用它时，我们可以灵活的输出不同的name。 var me = {name: me}; function speak() { console.log(this.name); }...

tianren124 2019-08-20 14:50 评论0 收藏0
[译]Understanding javascript&#039;s &#039;undefined

摘要：一个表示编译器检测到一个无效的引用值。在实际情况中，往往是在获取一个未被赋值的引用时被抛出。任何一个函数上下文都有一个被称为活动对象的变量对象。没有找到的话，就会认为引用名没有基础值并抛出的错误。下没有下的属性仅存在于被启动的情况下。和其他语言相比,javascript中的对于undefined的理解还是有点让人困惑的。特别是试着理解ReferenceErrors错误(x is no...

galaxy_robot 2019-08-21 15:03 评论0 收藏0