你需要了解的ES6的新特性（前沿技術）

Nino 發布于2019-08-20 18:19 / 2250人閱讀

摘要：年月，的創造者公司，決定將提交給國際標準化組織，希望這種語言能夠成為國際標準。這表示外層代碼塊不受內層代碼塊的影響。也可以運用于函數及其他文中就簡單介紹這么多，想更加了解新特性的可以自尋查看一下阮一峰的一本入門

ES6新特性

最近在項目中遇到了很多ES6的語法，遇到了不少坑坑洼洼，因此，在這里就簡單介紹一下ES6中的一些新特性

如果想真正的了解ES6和ES5有什么不同，這里推薦看一下阮一峰的一本《ECMAScript 6 入門》

在我下面，主要介紹一下ES6標準下的let, const, "=>", "..."的介紹和用法

ES6背景介紹

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

那么，ECMAScript 和 JavaScript 到底是什么關系？

要講清楚這個問題，需要回顧歷史。1996年11月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給國際標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA 發布262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，這個版本就是1.0版

let命令 基本用法

ES6 新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內有效。

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

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

上面代碼在代碼塊之中，分別用let和var聲明了兩個變量。然后在代碼塊之外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這表明，let聲明的變量只在它所在的代碼塊有效。看到這里，是不是覺得let和C語言還有其他語言的語言很像了呢，確實，其實原理基本都差不多。

使用注意

不存在變量提升：var命令會發生”變量提升“現象，即變量可以在聲明之前使用，值為undefined。這種現象多多少少是有些奇怪的，按照一般的邏輯，變量應該在聲明語句之后才可以使用。為了糾正這種現象，let命令改變了語法行為，它所聲明的變量一定要在聲明后使用，否則報錯。

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

暫時性死區：只要塊級作用域內存在let命令，它所聲明的變量就“綁定”（binding）這個區域，不再受外部的影響。

var tmp = 123;

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

不允許重復聲明：let不允許在相同作用域內，重復聲明同一個變量。

// 報錯
function () {
  let a = 10;
  var a = 1;
}

// 報錯
function () {
  let a = 10;
  let a = 1;
}

快級作用域：這個特性是我覺得最奇怪的，原本javascript是作用域鏈的形式，為什么無緣無故要突然改變了自己之前的主意呢。不過這個也很容易理解，有過C語言和C++等語言基礎的就會很了解快級作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函數有兩個代碼塊，都聲明了變量n，運行后輸出5。這表示外層代碼塊不受內層代碼塊的影響。如果兩次都使用var定義變量n，最后輸出的值才是10。

const命令 基本用法

const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。const聲明的變量不得改變值，這意味著，const一旦聲明變量，就必須立即初始化，不能留到以后賦值。

const PI = 3.1415;
PI // 3.1415

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

使用注意

僅僅保證地址不變const實際上保證的，并不是變量的值不得改動，而是變量指向的那個內存地址不得改動。對于簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，因此等同于常量。

const a = [];
a.push("Hello"); // 可執行
a.length = 0;    // 可執行
a = ["Dave"];    // 報錯

箭頭函數"=>" 基本用法

ES6 允許使用“箭頭”（=>）定義函數

var f = v => v;

//等同于
var f = function(v) {
  return v;
};

使用注意

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。

不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。

這里說一下最重要的第一點吧

function foo() {
  setTimeout(() => {
    console.log("id:", this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到100毫秒后。如果是普通函數，執行時this應該指向全局對象window，這時應該輸出21。但是，箭頭函數導致this總是指向函數定義生效時所在的對象（本例是{id: 42}），所以輸出的是42。

數組拓展運算符"..." rest 參數 基本用法

擴展運算符（spread）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll("div")]
// [, , ]

也可以運用于函數及其他

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

文中就簡單介紹這么多，想更加了解ES6新特性的可以自尋查看一下阮一峰的一本《ECMAScript 6 入門》

云服務器 GPU云服務器 es6的新特性說說你所了解的人工智能 html的新特性 es6新特性

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

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

前端周刊第40期

摘要：注意本文為前端周刊早期整理的舊文重發，不過大部分內容并沒有過時，已經看過的同學可以直接去文末訂閱前端周刊微信公眾號。想和我面對面交流掃下方二維碼添加我為好友。注意：本文為前端周刊早期整理的舊文重發，不過大部分內容并沒有過時，已經看過的同學可以直接去文末訂閱前端周刊微信公眾號。文章教程號外：ES6 模塊語法已定稿 www.2ality.com ES6 模塊語法已定稿，和之前所看到的...

Carbs 2019-08-20 14:20 評論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發布在上。發布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網絡應用，而非簡單的頁面。本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流，現免費分享到這里，不足之處歡迎指教...

happen 2019-08-02 16:00 評論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發布在上。發布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網絡應用，而非簡單的頁面。本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流，現免費分享到這里，不足之處歡迎指教...

余學文 2019-08-22 11:14 評論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發布在上。發布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網絡應用，而非簡單的頁面。本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流，現免費分享到這里，不足之處歡迎指教...

Jochen 2019-08-29 14:01 評論0 收藏0