ES6学习摘要(01)(新人学习)

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞