ES6學習摘要（01）（新人學習）

dmlllll 發布于2019-08-21 17:59 / 1705人閱讀

摘要：入門一前言由于最近本人在學習，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于的新人學習摘要吧。的作用域與命令相同只在聲明所在的塊級作用域內有效。塊級作用域新增方式和實際上為新增了塊級作用域。同時，函數聲明還會提升到所在的塊級作用域的頭部。

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;
};

GPU云服務器云服務器摘要文本自動摘要消息摘要算法摘要式認證

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90312.html

ES6學習摘要（03）（新人學習）

摘要：字符的表示法允許采用形式表示一個字符，其中表示字符的碼點。方法，用來將字符的不同表示方法統一為同樣的形式，這稱為正規化。，默認參數，表示標準等價合成，返回多個簡單字符的合成字符。返回布爾值，表示參數字符串是否在原字符串的頭部。 ECMAScript6/ES6 入門 let和const命令變量的解構賦值五、字符串的擴展注：這章沒什么可以理解的，看過一遍就行，所以大體上我把有用的一些東...

番茄西紅柿 2019-08-22 11:21 評論0 收藏0
ES6學習摘要（02）（新人學習）

摘要：默認值同時，對象解構賦值也允許設置默認值，默認值生效的判斷條件同數組，只有在對應值嚴格等于時會生效。報錯如果要將一個已經聲明的變量用于解構賦值，必須非常小心。的規則是，只要有可能導致解構的歧義，就不得使用圓括號。 ECMAScript6/ES6 入門 let和const命令四、變量的解構賦值在ES6之前，數組和對象屬性賦值只能直接指定固定值，ES6 允許按照一定模式，從數組和對象中...

Jonathan Shieber 2019-08-22 13:40 評論0 收藏0
2017前端現狀--答題救不了前端新人

摘要：眾所周知，前端近幾年鬧了一場革命。這些問題反應了什么現象確實前端很火，引來了一批批新人。前端小白們如火如荼的學習著現在前端流行的新技術棧。寫在最后所以啊，在目睹了很多白癡問題后，我終于發出了一聲吶喊，答題救不了前端新人。眾所周知，前端近幾年鬧了一場革命。前端在編程領域也掀起了學習潮。至少在中國，從2013年下半年至今，在搜索指數上，有著爆炸式的增長?？梢钥聪聰祿喊俣戎笖?，Googl...

jone5679 2019-08-20 17:37 評論0 收藏0
2017前端現狀--答題救不了前端新人

摘要：眾所周知，前端近幾年鬧了一場革命。這些問題反應了什么現象確實前端很火，引來了一批批新人。前端小白們如火如荼的學習著現在前端流行的新技術棧。寫在最后所以啊，在目睹了很多白癡問題后，我終于發出了一聲吶喊，答題救不了前端新人。眾所周知，前端近幾年鬧了一場革命。前端在編程領域也掀起了學習潮。至少在中國，從2013年下半年至今，在搜索指數上，有著爆炸式的增長?？梢钥聪聰祿喊俣戎笖担珿oogl...

alogy 2019-08-01 17:04 評論0 收藏0
新人學習，照文檔手擼webpack,bug基本修復完善（有問題請聯系我，并非完全原創，不喜勿噴。。。

摘要：介紹簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發生的。一安裝全局安裝在文件夾里面也需要安裝這個是在你根目錄下進行的全局安裝記得加太慢，推薦用的鏡像安裝方法一樣。二創建項目新建文件夾命令行輸入命令。介紹：webpack簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發生的。這個配置文件主要分為三大塊 entry 入口文件讓webpack用哪個文件作為項目的...

xiangchaobin 2019-08-21 11:33 評論0 收藏0