美文网首页
Es6 let和const

Es6 let和const

作者: CodeGod007 | 来源:发表于2018-06-25 19:40 被阅读0次

ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

1.let命令

  1. 不存在变量提升
console.log(a); // undefined
var a = 0;
console.log(b) //Error 
let b = 10;

2.暂时性死区

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp; 
}

其实在用let关键字声明变量之前使用就是暂时性死区

咱们都知道js中的typeof方法是不会报错的,但是到啦Es6就有可能会报错啦,看下边的例子

typeof(a) // Errow 报错其实大家因该都知道啦,这里的a在声明之前就使用 啦 就是咱们上边说的暂时性死区的;
let a = 10;

  1. 不允许重复声明

不允许在同一作用域内声明同样的变量

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

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

2. 块级作用域

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

虽然这个判断执行啦,但是因为块级作用域不允许外边的块级作用域使用里边的块级作用域的东西,跟闭包的原理差不多

  1. 块级作用域与函数声明
    ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
// 情况一
if (true) {
  function f() {}
}

浏览器为了兼容以前的旧代码,没有遵守这个规定,所以上边的代码是生效的,但是不建议大家使用.

function f() { console.log('我在外面!'); }

(function () {
  if (false) {
    function f() { console.log('我在里面'); }
  }
  f();
}());

上边的代码在Es5中运行会得到"我在里面"的结果,应为在判断里边的函数被提升到函数的头部,实际运行代码如下

function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

但是到啦Es6就不一样啦,理论上在Es6的环境下运行结果会是"我在外面",但是真的运行的时候会报错,为什么呢?

原来是应为Es6修改啦在块级作用域下声明函数的规则

允许在块级作用域内声明函数。
函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
同时,函数声明还会提升到所在的块级作用域的头部。

实际上在遵守Es6规定下的浏览器上实际的运行过程为:

function f() { console.log('我在外面!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('我在里面!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

3.const

1.const一旦声明并初始化,这个常亮的值就不得被改变

const a = 10;
a = 20;
// Error
  1. const一旦声明必须初始化否则报错
  const a;
  //Errow

3.const的作用域与let命令相同:只在声明所在的块级作用域内有效。

if (true) {
  const MAX = 5;
}

console.log(MAX) // Uncaught ReferenceError: MAX is not defined

4.const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

if (true) {
  console.log(MAX); // ReferenceError
  const MAX = 5;
}

5.const声明的常量,也和let一样不可重复声明

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

实际上const并不是值不可以改变,而是这个常量的内存指向的那个地址

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

相关文章

  • (JS)

    ES6 let、const和var的区别 let和const声明变量不存在变量提升 let和const不能重复声明...

  • ES6(let 与 const)

    ES6中引入了let 和 const来声明变量,我们来看下let 和 const 的使用 一、let let定义的...

  • es6总结一

    es6基础 let和const命令 let和const用于声明变量let跟var的区别 1、let定义过的变量不能...

  • 总结一下前端常见javascript基础面试题:

    1.var ,let 和const的区别: let和const是es6新增的语法, let和var都可以定义变量,...

  • ES6之 let 和 const 命令

    ES6 之 let 和 const 命令 1、let 命令 1.1、基本用法 ES6 新增了let命令,用来声明变...

  • TS中 var 和 let 的区别

    let 和 const 是 ES6 中新增的声明对象的类型。与 var 相比,let 和 const 不存在...

  • es6常用语法

    const 和 let 在es6语法规范中,尽量使用let替代var,如果在const 和let中选,优先使用co...

  • es6解读1: let, const 和 smybol

    let const 作用域 作用域概念 如何使用let和const 使用let 形成块级作用域 es6下强制开启...

  • es6解读1: let,const和symbol

    let 和 const 作用域的概念 如何使用let和const 使用let1、形成块级作用域2、es6下强制开启...

  • es6

    [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...

网友评论

      本文标题:Es6 let和const

      本文链接:https://www.haomeiwen.com/subject/jgxuyftx.html