ES6学习摘要（01）（新人学习）

2024年3月7日 188次阅读 来源: LishiJ

ECMAScript6/ES6 入门

一、前言

由于最近本人在学习ES6，做一些笔记能够更好的熟悉，就趁此机会来写一篇关于ES6的新人学习摘要吧。希望大佬可以给出一些意见，也希望和我一样的新人能更好更快的了解和熟悉ES6。
首先在这边我要感谢阮大大~有这么好的入门教程（搬运工，部分内容不讲述）。
其次注明本文只用于本人和其他新手了解熟悉ES6，非其他用途。
下面就开始我们简单的学习吧~

二、浏览器兼容性

不多赘述，ES6兼容性

三、let和const命令

在学习let和const之前，我们先来了解一下块级作用域，块级作用域主要适用两种场景，一种是内层变量覆盖外层变量；第二种场景是用来计数的循环变量泄露为全局变量。

// 第一种场景
var tmp = new Date();

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

f(); // undefined

// 第二种场景
var s = 'hello';

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

console.log(i); // 5

块级作用域能很好的解决这两方面的问题，如何增加块级作用域呢？等我们学习完let和const再来详述。
1、let和var一样，用来声明变量，差别在于let申明的变量的作用域只针对于let命令所在的代码块内。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

在代码块中我们分别以let和var申明了a，b两个变量，在打印a，b两个变量的时候发现用var声明的变量b的值是能正确打印的，但是用let申明的a变量报错，这表面两者申明的作用域不同。

用let申明的变量无变量提升

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

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

上面的代码中同样在声明变量前打印出该变量，var申明的变量输出undefined，而let报错，即变量bar不存在，所以使用let一定要在申明后进行使用。

暂时性死区

暂时性死区是什么意思呢，简单来说就是从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

var tmp = 123;

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

不允许重复声明

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

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

2、const声明一个只读的常量。一旦声明，常量的值就不能改变。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

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

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

const foo;
// SyntaxError: Missing initializer in const declaration
const PI = 3.1415;
PI // 3.1415

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

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

3、块级作用域
新增方式：

  • let和const实际上为 JavaScript 新增了块级作用域。
  • 使用{}创建块级作用域（可以任意嵌套）
{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

优点：使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

注意：只有在ES6中，允许以下三条规则（ES5不可）

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

4、do表达式（提案）
不赘述，使得块级作用域可以变为表达式，也就是说可以返回值

let x = do {
  let t = f();
  t * t + 1;
};
    原文作者：LishiJ
    原文地址: https://segmentfault.com/a/1190000012345992
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞