ES6 let和const详解

栏目: JavaScript · 发布时间: 6年前

内容简介:本人这是第一次写文章,记录一下平常在学习中的一些收获和感言,这些笔记如果存在错误的地方发情告知改正,不胜感激,本人文采不行,ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,

本人这是第一次写文章,记录一下平常在学习中的一些收获和感言,这些笔记如果存在错误的地方发情告知改正,不胜感激,本人文采不行, 轻喷 ,谢谢。

1. let命令

作用域

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

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// undefind
复制代码

let 声明的变量 i 只能在 for 循环语句中才能被访问到,在 for 循环外面访问不到,所以输出结果为 undefind 如果将 let 换成 var 则输出结果为 10

另外,for循环还有一个特别之处,就是 设置循环变量的那部分是一个父作用域 ,而循环体内部是一个单独的子作用域。可以通过下面的例子进行理解:

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc
复制代码

上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。

不存在变量提升

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。而let命令则不存在这种现象。

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
复制代码

上面代码中,变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

上面的例子会报错是因为造成了 暂时性死区

暂时性死区

ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

typeof x; // ReferenceError
let x;
复制代码

当出现暂时性死区后,使用typeof都会报错

ES6 规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

不允许重复声明

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

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

2. 块级作用域

ES5 只有 全局作用域函数作用域 ,没有块级作用域,这带来很多不合理的场景。 第一种场景,内层变量可能会覆盖外层变量。

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f();  // undefind
复制代码

因为在函数中声明了tmp,虽然没有执行,但是它触发了变量声明提升,所以在函数内的最前面好像是加上了 var tmp; 这段代码,所以最终结果是undefined。如果将上面的代码修改为如下:

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    let tmp = 'hello world';
  }
}

f();  // 输出当前时间
复制代码

块级作用域与函数声明

ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

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

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
复制代码

上面的代码在ES5浏览器和ES6浏览器的运行结果是不一样的,在 ES5 中运行,会得到“I am inside!”,因为在if内声明的函数f会被提升到函数头部,实际运行的代码如下。

// ES5 环境
function f() { console.log('I am outside!'); }

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

ES6 就完全不一样了,理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let,对作用域之外没有影响。但是,如果你真的在 ES6 浏览器中运行一下上面的代码,是会报错的,这是为什么呢?

原来,如果改变了块级作用域内声明的函数的处理规则,显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6 在附录 B里面规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式。

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

注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。 根据这三条规则,在浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于var声明的变量。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function
复制代码

上面的代码在符合 ES6 的浏览器中,都会报错,因为实际运行的是下面的代码。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function
复制代码

考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}
复制代码

const命令

const
const
const
const

本质

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

const foo = {};

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

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

上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

如果真的想将对象冻结,应该使用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 入门(http://es6.ruanyifeng.com/#docs/let) 本文章如果有不清楚的地方烦请参考阮一峰大神的大作,本文章只是本人的一个笔记而已。如果您觉得本文对你有帮助,烦请点个赞,给我一点点鼓励,我以后也会多多更新文章,记录自己的成长历程。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网络共和国

网络共和国

[美] 凯斯·桑斯坦 / 黄维明 / 上海人民出版社 / 2003-6-1 / 15.00元

本书主要讨论网络中的民主问题。网络技术已经深刻地影响了我们的生活,我们随时可以获得我们需要的信息,我们也随时可以与别人联系,那么网络技术是不是就是民主的福音呢?作者回答说不,他认为通过网络人们更容易获得的是自己喜欢的信息,而拒绝接受自己不喜欢的信息,事实上人们得到的是窄化的信息,很多的网站也不和与自己立场相反的网站链接。而在一个真正的民主的环境中,信息应是多元的并且不是我们事先选择的,在其中我们还......一起来看看 《网络共和国》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具