资讯专栏INFORMATION COLUMN

ES6部分特性小结

pinecone / 2507人阅读

摘要:但是或者,会将声明关进一个小黑屋也是暂时性死区,只有执行到变量声明这句语句时,变量才会从小黑屋被放出来,才能安全使用这个变量。

前言

踩着前人的肩膀,努力前行。参考了很多前人的文章。

1.变量声明const和let

es6之前声明变量只能用var,var的特点是无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)

function test(){
    if(false){
        var name = "zhangsan";
    }else{
        console.log(name);  //此处访问值为undefined    
    }
    console.log(name);  //此处访问值为undefined
}

可以看到虽然打印结果是undefined,但是并没有报错。那是因为被js编译过结果就变成了

function test(){
    var name;   //这就是js的变量提升
    if(false){
        name = "zhangsan";
    }else{
        console.log(name);  //此处访问值为undefined    
    }
    console.log(name);  //此处访问值为undefined
}

再来看ES6新增的let,const。它们的作用域只在一个函数内部或者一个代码块内部。

  function test() {
    if(flag) {
       let name = "zhangsan"
    } else {
        //此处访问会直接报错。访问不到。
        console.log(test)
    }
  }

const作用域和let一样。但是他通常被用于定义常量。就是它的值被设置完成后就不能再修改了。

    const name = "lux"
    name = "joe" // 再次赋值此时会报错

但是,如果 const 的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而变量成员是可以修改的。

    const student = { name: "cc" }
    // 可以成功
    student.name = "yy";
    // 如果这样子就会报错了
    student  = { name: "yy" };

还有TDZ(暂时性死区)

{
    console.log(value) // 报错
    let value = "lala"
}

我们都知道,JS引擎扫描代码时,如果发现变量声明,用 var 声明变量时会将声明提升到函数或全局作用域的顶部。但是 let 或者 const,会将声明关进一个小黑屋也是TDZ(暂时性死区),只有执行到变量声明这句语句时,变量才会从小黑屋被放出来,才能安全使用这个变量。

2.未完待续

本文基本是参考https://www.jianshu.com/p/287...。原文说的更仔细,有更多的内容。

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

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

相关文章

  • ES6小结

    摘要:表示变量表示常量,和都是块级作用域。发起异步请求面试题生成器是能返回一个迭代器的函数。方法不仅返回值,它返回的对象具有两个属性和。你不必到处使用回调函数,而是可以建立貌似同步的代码,但实际上却使用来等待异步操作结束。 原文链接 es6中有很多特性,使javascript语法更加丰满,总结一波常用的es6知识点。 1.变量声明const和let 在ES6之前,我们都是用var关键字声明变...

    EscapedDog 评论0 收藏0
  • React类、ES7属性初始化(第二部分

    摘要:组建属性初始化默认值类型在中将下面的代码替换成下面的代码最后一步将初始状态从构造函数中转变成属性初始化。在构造函数的后天添加正确的代码你需要把状态初始化代码从构造函数中删除。 这是React和ECMAScript6结合使用系列文章的第二篇。 下面是所有系列文章章节的链接: React 、 ES6 - 介绍(第一部分) React类、ES7属性初始化(第二部分) React类,方法绑定...

    VioletJack 评论0 收藏0
  • 你该知道的ES6那些事儿

    摘要:最近重构了一个项目,引入了部分用法,最大的感受是让这门语言变得更加严谨,更加方便。通过该方法获得位置后还得比较一次才能判断是否存在。再来看看的写法使用数组来初始化一个,构造器能确保不重复地使用这些值。下面提供链接,供有兴趣的朋友参考。 最近重构了一个SPA项目,引入了部分ES6用法,最大的感受是ES6让javascript这门语言变得更加严谨,更加方便。本篇将结合实战经验,对最常用的部...

    CoffeX 评论0 收藏0
  • 【Web全栈课程三】ES6特性介绍(下)

    摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。 ES6特性介绍(下) ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍(上)》见:https://segmentfault.com/a...

    wangshijun 评论0 收藏0
  • ES6系列文章 对象字面量

    摘要:使得声明对象字面量更加简单,提供了属性简写和方法简写功能,属性名计算的新特性。属性简写在及以前的版本中,对象字面量只支持键值对集合。实际业务中,对象字面量的初始化会有一定的代码重复。 showImg(https://segmentfault.com/img/bVWd8N?w=320&h=235); ECMAScript6使得声明对象字面量更加简单,提供了属性简写和方法简写功能,属性名计...

    snifes 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<