[ ES6 ] 快速掌握常用 ES6 （一）

ispring 發布于2019-08-23 14:01 / 2494人閱讀

摘要：常量變量先說說常量和變量的概念吧，常量是說那種進行一次賦值后不會更改的值，比如說游戲賬戶的，變量是說賦值后有更改的需求的，比如游戲名，游戲密碼。常用實例交換變量的值提取數據解構賦值對提取對象中的數據，尤其有用。

本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》
學習 20% 的知識完成 80% 的工作

關于 ES6

稍微介紹下 ES6 吧，詳細介紹請自行 baidu 或 Google

ES2015 = ES6

ES6 泛指 ES2015、ES2016、ES2017 等等，JavaScript 的下一代標準

現代瀏覽器支持大部分（90%+）的原生 ES6 ，但是為了兼容老版本的瀏覽器，通常使用 Babel 將 ES6 代碼轉為 ES5 代碼。

常量變量 let and const

先說說常量和變量的概念吧，

常量是說那種進行一次賦值后不會更改的值，比如說游戲賬戶的 ID，
變量是說賦值后有更改的需求的，比如游戲名，游戲密碼。

在之前的 JavaScript 中是不區分常量和變量的統統使用 var 來定義全局變量，

var userId = 666;
var userPassword = "mimabunengshuo";

現在 ES6 中使用 let 定義局部變量，const 定義局部常量

const userId = 666;
let userPassword = "wobuzidao";

為什么需要使用局部變量與常量

//我希望重復打印 0 到 9 ，打印10次
//使用 var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//使用 let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//結果打印只有一次 0 到 9
letI();//順利完成

如果非要使用 var 完成這個需求的話可以使用閉包
關于閉包本次不多做討論

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//順利完成

結構賦值

左右兩邊必須是一樣的數據類型，或者轉換后是一樣的類型；

等號右邊的值應該是數組或對象，不是對象或數組，就先將其轉為對象；

定義和賦值必須同步完成

例如聲明變量

let a = 1;
let b = 2;
let c = 3;

ES6 允許寫成下面這樣。

let [a, b, c] = [1, 2, 3];

常用實例
1.交換變量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

2.提取 JSON 數據
解構賦值對提取 JSON 對象中的數據，尤其有用。

let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

箭頭函數

在 ES6 之前定義函數是這樣寫

var f = function (i){
    return  i + 5;
}

有了箭頭函數可以這樣寫（去掉 function 關鍵詞，在"()"后面加"=>"）

let f = (i) => {
    return  i + 5;
}

好像沒有太大區別？

箭頭函數只有一個參數時,可以省略"()",只寫參數；當只有一條返回語句時，可以省略"{}",以及 return 語句

上面的可以這樣寫

let f = i => return  i + 5;

箭頭函數的 this 是固定不變的，就是指向定義時所在的對象，而不是使用時所在的對象

假如將 ES6 的箭頭函數轉換為 ES5 的普通函數,可以看到，箭頭函數的 this 是在引用外層的 this

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

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log("id:", _this.id);
  }, 100);
}

字符串模板

字符串模板主要用來處理變量和字符串混合的情況

字符串使用反引號(`字符串`)來包裹字符串，用$符加大括號 ( ${JavaScript}) 來包裹任意的 JavaScript 表達式

字符串模板中可以使用回車

比如用 JavaScript 來生成 HTML 元素，元素的文本想使用自己 JavaScript 運算后的結果
ES5 中比較麻煩

$("#dom").append(
  "你的用戶名是：" + userName + "
 " +
  "你已經注冊了 " + oNumber +"年"
);

ES6中相對簡單

$("#dom").append(
  `你的用戶名是：${userName}
你已經注冊了${oNumber}年`
);

面向對象

class 用來定義一個類

extends 用來表示繼承哪個類

constructor 構造函數可以定義私有方法和屬性,此函數外的為共享的

super() 在 constructor 使用該方法繼承父類的 this 對象

代碼示例

class user {
    constructor() {
        this.name = "用戶1";
    }
    sayHello(say) {
        console.log(`${this.name}，有人對你說：${say}`);
    }
}

let user1 = new user();
user1.sayHello("你好"); //用戶1，有人對你說：你好

class xiaoming extends user {
    constructor() {
        super();
        this.name = "小明";
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello("你好"); //小明，有人對你說：你好
let user2 = new user();
user2.sayHello("你好")//用戶1，有人對你說：你好

[ES6] 快速掌握常用 ES6 （一）
[ES6] 快速掌握常用 ES6 （二）

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

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

[ ES6 ] 快速掌握常用 ES6 （二）

摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數參數默認值在傳統語法中如果想設置函數默認值一般我們采用判斷的形式在新的語法中我們可以在參數聲明的同時賦予默認值參數本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》本篇文章是對之前文章...

hidogs 2019-08-23 14:07 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
前端基礎進階（十四）：es6常用基礎合集

摘要：在繼承的構造函數中，我們必須如上面的例子那么調用一次方法，它表示構造函數的繼承，與中利用繼承構造函數是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實際開發中，ES6已經非常普及了。掌握ES6的知識變成了一種必須。盡管我們在使用時仍然需要經過babel編譯。 ES6徹底改變了前端的編碼風格，...

Ryan_Li 2019-08-21 18:31 評論0 收藏0
es6精簡學習

摘要：需要更多地去學習應用。當你調用一個時，它將返回一個迭代器對象。這個迭代器對象擁有一個叫做的方法來幫助你重啟函數并得到下一個值。那么問題來了，咱們也不能手動一直調用方法，你需要一個能夠調用生成器并啟動迭代器的方法。開始用vue或者react，很多時候我們都會把ES6這個大兄弟加入我們的技術棧中。但是ES6那么多那么多特性，我們需要全部都掌握嗎？秉著二八原則，掌握好常用的，有用的這個可以...

RiverLi 2019-08-20 18:11 評論0 收藏0
30分鐘掌握ES6/ES2015核心內容（上）

摘要：以下簡稱是語言的下一代標準。的繼承機制，實質是先創造父類的實例對象所以必須先調用方法，然后再用子類的構造函數修改。總結以上就是最常用的一些語法，可以說這的語法，在的日常使用中占了追加十分鐘好的嗎分鐘掌握核心內容下 ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。也就是說...

YPHP 2019-08-19 17:30 評論0 收藏0