您的位置：首页 > 其它

ES6新特性：let和const的使用

2016-05-04 01:16 525 查看

　　（声明，本文的所有代码均在node的最新稳定版本v4.4.3中执行的，如果在浏览器中执行请把JS的运行环境提升为ES6）

　　以前一直用var定义变量，现在有了两种新的定义变量的方式， 1： let， 2： const；本文大概概括下使用let和const定义变量有哪些好处；

　　let：

　　　　1：声明提前

　　使用var声明变量，存在声明提前的问题，输出的tmp为"undefined"：

{
var tmp = new Date();

let f = function (){
console.log(tmp); //undefined
if (false){
//使用var声明变量的声明提前;
var tmp = "hello world";
}
}

f();
}

　　如果我们把定义tmp的方式改为let呢？那么tmp输出的结果为当前的日期。

{
var tmp = new Date();

let f = () => {
console.log(tmp); //输出的结果为当前的日期
if (false){
//使用let的方式声明， tmp的作用域只有在离他最近的一个{}括号中；
let tmp = "hello world";
}
}

f();
}

　　　　2：块状作用域

　　let和const不但拥有块状作用域，还也不存在声明提前这个玩意儿，以下代码会报ReferenceError错

{
let tmp = 123;
{
tmp = 234;
let tmp = 456;
}
}

　　使用let声明的元素作用域更加明确，不会出现作用域混乱的情况, 可以减少bug的产生；

{
let foo = 0;
{
let foo = 1;
foo = 2;
}
console.log(foo);
}

　　以上这段代码相当于是IIFE（立即执行函数表达式），效果和以下的相同；

{
var foo = 0;
(function(){
var foo = 1;
foo = 2;
}());
console.log(foo);
}

　　再来猜猜这个的结果是什么,( var 形式声明的变量会提升到{}外面去哦， {}形式的块状作用域相当于是if(true){//code}的写法)：

{
var foo = 0;
{
var foo = 1;
foo = 2;
}
console.log(foo);
}

View Code

　　　　3:重复声明

　　使用let声明的变量不能重复声明，否则会出现一下错误：

SyntaxError: Identifier 'a' has already been declared

　　注意：在全局下用let声明变量和用var声明变量还是有区别的：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<script>
"use strict";
let foo = 1;
console.log(window.foo); //输出 undefined
var bar = 1;
console.log(window.bar); //输出1
</script>
</body>
</html>

　　const：

　　使用const定义的常量，而且定义一次以后不能再进行更改，否者会报错；

　　使用const定义的常量，拥有let一样的特性（无声明提前， 有块状作用域，重复声明）；

　　但是要注意，如果给常量定义的是对象，只要该对象指向在内存中的地址不发生改变，数据可以随便改的（这涉及到计算机的传值和传址）；

　　对象：

{
const foo = {};
foo.bar = 1111;
console.log(foo.bar);
}

　　数组：

{
const foo = [];
foo.push(1);
foo.push(2);
console.log(JSON.stringify(foo));
}

　　这些新语法让JS更加规范，也更加适合大项目，我仿佛猜到以后要用private和public声明变量了....( ╯□╰ )

　　参考：

　　阮一峰：http://es6.ruanyifeng.com/#docs/let

　　https://github.com/DrkSephy/es6-cheatsheet#var-versus-let--const

作者： NONO

出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

微信：18101055830

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航