您好,欢迎访问一九零五行业门户网

ES6中var、let、const、块级作用域以及暂存死区的介绍

本篇文章给大家带来的内容是关于es6中var、let、const、块级作用域以及暂存死区的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
var语法
var varname1 [= value1 [, varname2 [, varname3 ... [, varnamen]]]];
使用
var a, b=2 // 声明多个变量,可以赋值,也可以不赋值a=1 // 先声明,再赋值
var变量提升
使用var声明的变量将会被提升到函数的顶部
console.log(a) // undefinedvar a =2  console.log(a) // 2console.log(b) //uncaught referenceerror: b is not defined...
以上代码相当于
var aconsole.log(a) // undefineda=2console.log(a) // 2console.log(b) //uncaught referenceerror: b is not defined...
0x002 let语法
let var1 [= value1] [, var2 [= value2]] [, ..., varn [= valuen]];
使用
let a, b = 2 // 声明多个变量,赋值不赋值无所谓a = 2 // 声明之后再赋值
不再提升
console.log(a) // uncaught referenceerror: a is not defined...let a=1
注意:猜测, 使用babel翻译一下代码发现,只是let变成了var,所以使用babel转义之后的代码依旧会提升
不能重复声明
let a=1let a=2 // uncaught syntaxerror: identifier 'a' has already been declared
const语言
const name1 = value1 [, name2 = value2 [, ... [, namen = valuen]]];
使用
const a=1, b=2 // 不能省略的值
不能省略的值
const c // uncaught syntaxerror: missing initializer in const declaration
不能重复赋值
const d=4d=5 // uncaught typeerror: assignment to constant variable.
可以修改的引用
const e=[]e[0]=0console.log(e) //[0]
块级作用域块级作用域是随着let、const而来最有用的特性了,在之前的js中,js的作用域是函数级的,由此带来的几个臭名昭著的问题:
意外被修改的值
function vartest() {  var x = 1;  if (true) {    var x = 2;  // 同样的变量!    console.log(x);  // 2  }  console.log(x);  // 2}
可以使用let避免了
function lettest() {  let x = 1;  if (true) {    let x = 2;  // 不同的变量    console.log(x);  // 2  }  console.log(x);  // 1}
万恶的for循环和点击事件
var list = document.getelementbyid(list);for (var i = 0; i < 5; i++) {  var item = document.createelement(li);  item.appendchild(document.createtextnode(item  + i));  item.onclick = function (ev) {    console.log(item  +i +  is clicked.);  };  list.appendchild(item);}console.log(i) // 5
如果点击上面,不管点击哪个,显示出来的都是item 5 is clicked.,虽然可以使用闭包解决,但是现在有了更好的方案
let list = document.getelementbyid(list);for (let i = 0; i < 5; i++) {  let item = document.createelement(li);  item.appendchild(document.createtextnode(item  + i));  item.onclick = function (ev) {    console.log(item  +i +  is clicked.);  };  list.appendchild(item);}
作用域规则很简单{}块内形成一个作用域,包括if、else、while、class、do...while、{}、function
{    const f=6}console.log(f) // uncaught referenceerror: f is not defined
for循环中用let声明一个初始因子,该因子在每个循环内都是一个新的作用域
for (let i = 0; i < 10; i++) {  console.log(i);}console.log(i) // uncaught referenceerror: i is not defined
switch只有一个作用域
switch (x) {  case 0:    let foo;    break;      case 1:    let foo;     break;}// uncaught syntaxerror: identifier 'foo' has already been declared
暂存死区-temporal dead zone-tdz随着let和const的引入,也引入了暂存死区的概念。使用var的时候,作用域内(函数作用域),在还没使用var声明一个变量的时候,访问该变量,将会获得undefined。但是如果使用let,作用域(块级作用域)内,在还没使用let声明一个变量的时候,访问该变量,将会获得referenceerror,从作用域开始到let语句之间,就是暂存死区。
{ console.log(a) // uncaught referenceerror: a is not defined console.log(b) // uncaught referenceerror: b is not defined console.log(c) // undefined // 暂存死区 let a =1 const b=2 var c=3}
注意:猜测, 使用babel翻译一下代码发现,只是let变成了var,所以使用babel转义之后可能不存在暂存死区
以上就是es6中var、let、const、块级作用域以及暂存死区的介绍的详细内容。
其它类似信息

推荐信息