es6基础0x002：var、let、const、块级作用域、暂存死区

scola666 发布于2019-08-23 12:53 / 1020人阅读

摘要：但是如果使用，作用域块级作用域内，在还没使用声明一个变量的时候，访问该变量，将会获得，从作用域开始到语句之间，就是暂存死区。

0x001 var

语法

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

使用

var a, b=2 // 声明多个变量，可以赋值，也可以不赋值
a=1 // 先声明，再赋值

var变量提升
使用var声明的变量将会被提升到函数的顶部

console.log(a) // undefined
var a =2  
console.log(a) // 2
console.log(b) //Uncaught ReferenceError: b is not defined...

以上代码相当于

var a
console.log(a) // undefined
a=2
console.log(a) // 2
console.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=1
let a=2 // Uncaught SyntaxError: Identifier "a" has already been declared

0x003 const

语言

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

使用

const a=1, b=2 // 不能省略的值

不能省略的值

const c // Uncaught SyntaxError: Missing initializer in const declaration

不能重复赋值

const d=4
d=5 // Uncaught TypeError: Assignment to constant variable.

可以修改的引用

const e=[]
e[0]=0
console.log(e) //[0]

0x004 块级作用域

块级作用域是随着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);
}

0x005 作用域规则很简单

{}块内形成一个作用域，包括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

0x006 暂存死区-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转义之后可能不存在暂存死区

0x007 总结

尽量使用let和const，如果希望改变该变量的值，则使用let，如果希望不再改变该变量的值或者引用，则使用const，让var成为历史。

云服务器 GPU云服务器作用域中作用域作用域规则作用域实例

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

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

javascript基础var、 let、const

摘要：全局作用域在最顶层声明的变量成为全局变量，全局变量拥有全局作用域，它们在程序的任何地方都是能够被访问到。作用域的主要作用是能够控制变量是使用范围。程序将会被中断，这个特性被称为暂存死区。 1. 变量声明、初始化 Javascript中使用一个变量之前需要先声明，我们可以使用var、let、const来声明一个变量。如果在给声明的变量指定初始值，就是初始化。如: var a = 1; ...

lindroid 2019-08-22 14:59 评论0 收藏0
ES6简单了解

摘要：报错块级作用域明确允许在块级作用域中声明函数。但其值是固定的，不可更改，只读。一旦声明变量，就必须立即初始化，不能留到以后赋值。调用函数会返回一个内部指针，执行它不会返回结果返回的是指针对象。 ES6初步学习 let和const let 用来声明变量，但是所声明的变量只在let命令所在的代码块内有效 let不像var那样会发生变量提升，所以一定要先声明后使用。 console.log...

K_B_Z 2019-08-20 15:08 评论0 收藏0
ES6语法详解(一)

摘要：冻结对象可以使用方法。对象的解构赋值必须要属性名相同，顺序毫无影响。数组解构赋值默认值，当等号右边的值时，默认值生效。 let变量 let声明的变量在let命令所在的代码块中有效。不存在变量提升，只能先声明后使用。暂存死区如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量。 var a = 1; { ...

wendux 2019-08-26 11:53 评论0 收藏0
ES6新特性--var、let、const

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

qingshanli1988 2019-08-23 17:20 评论0 收藏0
ES6系列文章块级作用域

摘要：声明之函数作用域和全局作用域。块级作用域不能重复声明临时性死区等特性用来解决变量存在的种种问题。块级作用域终于在外面访问不到了。一些常量声明使用声明的变量名全部大写。 ES5之前javascript语言只有函数作用域和全局作用域，使用var来声明变量，var声明的变量还存在变量提升使人困惑不已。我们先来复习一下ES5的var声明，再对比学习let和const 。 var var声明之函...

赵连江 2019-08-21 16:53 评论0 收藏0