ES6新特性--var、let、const

qingshanli1988 发布于2019-08-23 17:20 / 722人阅读

摘要：不存在块级作用域，具有变量提升机制。在同一作用域内只能声明一次。注意其针对的是和所在的块级作用域。在编程过程中如果需要变量提升则使用声明变量，否则采用和声明变量，以便更好地控制作用域，避免变量的混用不可控。

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 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://www.ucloud.cn/yun/104200.html

你需要了解的ES6的新特性（前沿技术）

摘要：年月，的创造者公司，决定将提交给国际标准化组织，希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多，想更加了解新特性的可以自寻查看一下阮一峰的一本入门 ES6新特性最近在项目中遇到了很多ES6的语法，遇到了不少坑坑洼洼，因此，在这里就简单介绍一下ES6中的一些新特性如果想真正的了解ES6和ES5有什么不同，这里推荐看一下...

Nino 2019-08-20 18:19 评论0 收藏0
ES6新特性总结一

摘要：一旦声明，常量的值不能被改变。顶层对象的属性顶层对象，浏览器中指的是对象，在中指的是对象。中新增了两个命令和，命令用于暴露出模块对外的接口，而则用于输入某一模块。 1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 const关键字 const声明一个只读的常量。一旦声明...

MarvinZhang 2019-08-26 11:48 评论0 收藏0
ES6常用新特性——读《Understanding ECMAScript 6》总结

摘要：对象解构对象解构语法在赋值语句的左侧使用了对象字面量，例如代码中，的值被存储到本地变量中，的值则存储到变量中。当使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为。现在ES6在很多项目中大量使用。最近我也花时间看了一下《Understanding ECMAScript6》的中文电子书。在这里总结了一些在实际开发中常用的新特性。块级作用域在ES6...

jsliang 2019-08-21 11:50 评论0 收藏0
ES6、7、8常用新特性总结(超实用)

摘要：定义类常用新特性在一个数组或者列表中检查是否存在一个值还能在字符串中使用除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于变量声明，但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适...

atinosun 2019-08-23 15:10 评论0 收藏0
ES6、7、8常用新特性总结(超实用)

摘要：定义类常用新特性在一个数组或者列表中检查是否存在一个值还能在字符串中使用除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。 ES6常用新特性 1. let && const let 命令也用于变量声明，但是作用域为局部 { let a = 10; var b = 1; } 在函数外部可以获取到b，获取不到a，因此例如for循环计数器就适...

Xufc 2019-08-02 14:13 评论0 收藏0