ES6新特性--var、let、const

更新日期: 2019-05-08阅读: 2.4k标签: 特性

1、 var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。

## var的说明 ##
function a(flag){
    if(flag){
        console.log(value);      //结果为undefined,已声明但未初始化
        var value=1;
        return value;
    }else{
        console.log(value);      //仍旧可以访问到value;值为undefined
    }
}
//上述代码等价于
function a(flag){
    var value;
    if(flag){
        value=1;
        return value;
    }else{
        console.log(value);      //仍旧可以访问到value;值为undefined
    }
}
## let说明 ##
function a(flag){
    if(flag){
        console.log(value);       // 报错,因为value此时位于TDZ(后面讲)内,无法访问
        let value=1;
        return value;
    }else{
        console.log(value);      //value is not defined
    }
}
## const说明 ##
function a(flag){
    if(flag){
        console.log(value);       // 报错,因为value此时位于TDZ(后面讲)内,无法访问
        const value=1;        //const必须在声明的时候初始化,并且其值无法被重新赋值
        return value;
    }else{
        console.log(value);      //value is not defined
    }
}


2、const声明

const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改

const obj={
    name:'Alisa',
    age:25
}
obj=23;        //报错
obj.age=23;    //允许修改


3、TDZ暂存性死区

JavaScript引擎在扫描代码发现变量声明时,如果是使用var声明的变量,则讲变量提升至作用域顶部;如果是采用let和const声明的变量,则将其放到TDZ中。访问TDZ中的变量会触发运行时错误,只有执行过变量声明语句后,变量才会从TDZ中移出,然后才可以正常访问。注意:其针对的是let和const所在的块级作用域。

if(flag){
    console.log(typeof value);     //引用错误
    let value='time';
}

console.log(typeof value);         //undefined
if(flag){
    console.log(typeof value);     //引用错误
    let value='time';
}


4、let、const在循环中的应用

//输出0-9
var funcs=[];
for(let i=0;i<10;i++){
    funcs.push(function(){
        console.log(i);
    })
}
funcs.forEach(function(func){
    func();        //输出0-9
})
//将上面的let变为const则会报错,因为i++操作试图修改const声明的常量
//遍历对象
var person={
    name:"Alisa",
    age:23
};
for(let key in person){
    console.log(key);    //输出name、age
}
//将上面的let换位const不会报错,因为每次key的值并不相同,即每次定义一个新的变量


5、var可能修改全局属性

(如浏览器环境下的window对象的属性),而let和const不会修改只是遮蔽

var RegExp='hello';
console.log(window.RegExp);       //"hello"
var say='hi';
console.log(window.say);          //"hi"

let RegExp='hello';
console.log(RegExp);       //"hello"
console.log(window.RegExp === RegExp);       //false

const say='hi';
console.log(say);          //"hi"
console.log(window.say);          //undefined


6、实际应用时的tips

使用块级绑定时:声明变量默认采用const,只有确实需要改变变量时才使用let。在编程过程中如果需要变量提升则使用var声明变量,否则采用let和const声明变量,以便更好地控制作用域,避免变量的混用、不可控。


链接: https://fly63.com/article/detial/3239

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

Angular 8的新特性介绍

在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

Js的用途和特性

JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

十个超级实用的 JS 特性

你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

为什么我喜欢Js可选链?

很多 JavaScript 的特性极大地改变了你的编码方式。从 ES2015 及更高版本开始,对我的代码影响最大的功能是解构、箭头函数、类和模块系统。可选链(optional chaining)进入了第3阶段,将是一个很好的改进

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!