ES6学习（一）之var、let、const

hlcc 发布于2019-08-23 16:14 / 1017人阅读

摘要：更多前端文章变量提升概述变量可在声明之前使用。正常运行，控制台输出报错，报错，命令经常会发生变量提升现象，按照一般逻辑，变量应该在声明之后使用才对。主要是为了减少运行时错误，防止变量声明前就使用这个变量，从而导致意料之外的行为。

更多前端文章

1、变量提升

概述：变量可在声明之前使用。

console.log(a);//正常运行，控制台输出 undefined
var a = 1;
console.log(b);//报错，Uncaught ReferenceError: b is not defined
let b = 1;
console.log(c);//报错，Uncaught ReferenceError: c is not defined
const c = 1;

var 命令经常会发生变量提升现象，按照一般逻辑，变量应该在声明之后使用才对。为了纠正这个现象，ES6 规定 let 和 const 命令不发生变量提升，使用 let 和 const 命令声明变量之前，该变量是不可用的。主要是为了减少运行时错误，防止变量声明前就使用这个变量，从而导致意料之外的行为。

2、暂时性死区

概述：如果在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

var tmp = 123;
if (true) {
    tmp = "abc";//报错，Uncaught ReferenceError: tmp is not defined
    let tmp;
}

剖析暂时性死区的原理，其实let/const同样也有提升的作用，但是和var的区别在于

var在创建时就被初始化，并且赋值为undefined

let/const在进入块级作用域后，会因为提升的原因先创建，但不会被初始化，直到声明语句执行的时候才被初始化，初始化的时候如果使用let声明的变量没有赋值，则会默认赋值为undefined，而const必须在初始化的时候赋值。而创建到初始化之间的代码片段就形成了暂时性死区

3、不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。

// 报错
function func() {
  let a = 10;
  var a = 1;
}

// 报错
function func() {
  let a = 10;
  let a = 1;
}
function func(arg) {
  let arg;
}
func() // 报错

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错

4、块级作用域

在es5中我们会遇到下面这写情况
第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = "hello world";//没有块级作用域tmp变量提升到函数作用域里导致tmp为undefined
  }
}
f(); // undefined

第二种场景，用来计数的循环变量泄露为全局变量。

var s = "hello";
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

let实际上为 JavaScript 新增了块级作用域。

5、const注意点

1、const声明变量的时候必须赋值，否则会报错，同样使用const声明的变量被修改了也会报错
2、const声明变量不能改变，如果声明的是一个引用类型，则不能改变它的内存地址

const c ; //Uncaught SyntaxError: Missing initializer in const declaration
const a= {a:1};
a.a=2;
a={d:2};// Uncaught TypeError: Assignment to constant variable.

本质：const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了

那么我们想得到不可修改的const要怎么做呢？应该使用Object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;
// 除了将对象本身冻结，对象的属性也应该冻结。
var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === "object" ) {
      constantize( obj[key] );
    }
  });
};

参考文章
ECMAScript 6 入门

服务器托管海外云主机机器学习入门之深度学习入门之pytorch Lets Let

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

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

ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0
【ES6系列】变量与块级作用域

摘要：不允许在相同作用域内，重复声明同一个变量。如但是在中则不再必要了，我们可以通过块级作用域就能够实现本次主要针对中的变量和块级作用域进行了梳理学习，并且通过与的实现方式进行了对比，从而看出其变化以及快捷与便利。 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可...

PascalXie 2019-08-26 11:50 评论0 收藏0
ES6系列文章块级作用域

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

赵连江 2019-08-21 16:53 评论0 收藏0
ES6学习总结（1）

摘要：返回一个对象，遍历对象自身和继承的所有可枚举属性不含，与相同和在红宝书中就已经提到过属性，表示的是引用类型实例的一个内部指针，指向该实例的构造函数的原型对象。半个月前就决定要将ES6的学习总结一遍，结果拖延症一犯，半个月就过去了，现在补起来，惭愧惭愧。阮一峰的《ES6标准入门》这本书有300页左右，除了几个新的API和js语法的扩展,真正有价值的内容并不多。所谓存在即合理，每部分的...

happyfish 2019-08-20 15:38 评论0 收藏0
ES6 系列之 let 和 const

摘要：块级作用域存在于函数内部块中字符和之间的区域和块级声明用于声明在指定块的作用域之外无法访问的变量。和都是块级声明的一种。值得一提的是声明不允许修改绑定，但允许修改值。这意味着当用声明对象时没有问题报错临时死区临时死区，简写为。块级作用域的出现通过 var 声明的变量存在变量提升的特性： if (condition) { var value = 1; } console.lo...

PascalXie 2019-08-22 17:25 评论0 收藏0