ES6-指令

最新推荐文章于 2023-07-10 20:17:45 发布

宋极北

最新推荐文章于 2023-07-10 20:17:45 发布

阅读量245

点赞数

分类专栏： ES6 文章标签： ES6

ES6 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

1.let 指令

1) 用来声明变量，用法类似于var，但是所声明的变量，只在let指令所在的代码块内有效。

{
  var a = 10;
  let b = 10;
}
console.log(a);//10
console.log(b);//undefined

上述代码中，分别声明 var 和 let 这2个变量。在代码之外调用者2个变量，结果var声明的变量返回来正确的值，let声明的变量报错，这表明，let声明的变量只在它坐在的代码块有效。因此let常用于for循环中。

2)不存在变量的提升

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined 。但是let的命令改变了这种语法行为，它所声明的变量一定要在声明后使用，否则报错。

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

3)暂时性死区

只要块级作用域内存在let指令，他说声明的变量就“绑定”这个区域，不再受外部影响。

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

上述代码中存在全局变量tmp,但是在块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明之前调用tmp会报错。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}

在上述代码中，在let声明tmp之前，都属于tmp的“死区”。

let x = x;//ReferenceError: x is not defined

4)不允许重复声明

不允许在相同作用域内声明同意变量

// 报错
function func() {
  let a = 10;
  var a = 1;//Identifier 'a' has already been declared
}
// 报错
function func() {
  let a = 10;
  let a = 1;//Identifier 'a' has already been declared
}

也不能在函数内部重新声明参数

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

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

2.const命令
1）const 声明只是一个只读常量，一旦声明，常量的值就不能改变。

const PI = 3.1415;// 3.1415
PI = 3;// TypeError: Assignment to constant variable.

2）只声明不赋值会报错。

const foo;
// SyntaxError: Missing initializer in const declaration

3）const 作用域与 let 相同,只在声明所在的块级作用域内有效。

4）const 指令声明的常量也是不提升

5）const 指令也存在暂时性死区，只能在声明的位置后使用。

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

const foo = {};

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

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

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

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

上面代码中，常量 a 是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给 a，就会报错。
如果真的想冻结所有对象，应该使用object.freeze方法。

const foo = Object.freeze({});

// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;

上面代码中，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

除了将对象本身冻结，对象的属性也应该冻结。上面是一个将对象彻底冻结的函数。

注：顶层对象属性，在浏览器环境中指window对象，在Node中国值的是global对象，在ES5中顶层对象属于与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

上述代码中，顶层对象的属性赋值与全局变量的赋值是同一件事，顶层对象属性是到处可读写的，不利于模块化编程。

var a = 1;
// 如果在Node的REPL环境，可以写成global.a
// 或者采用通用方法，写成this.a
console.log(window.a)// 1

let b = 1;
console.log(window.b); // undefined

上面代码中，全局变量a有var命令声明，所以他是顶层对象的属性；全局变量b有let声明，所以她不是顶层对象属性，所以返回undefined。
小结：ES6证明变量6种方法：var,function,let,const,import,class.var和function命令声明的全局变量，是顶层对象属性。let、const、class命令声明的全局变量，不属于顶层对象属性。