亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

ispring / 2612人閱讀

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

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

關(guān)于 ES6

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

ES2015 = ES6

ES6 泛指 ES2015、ES2016、ES2017 等等，JavaScript 的下一代標(biāo)準

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

常量變量 let and const

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

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

在之前的 JavaScript 中是不區(qū)分常量和變量的統(tǒng)統(tǒng)使用 var 來定義全局變量，

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

現(xiàn)在 ES6 中使用 let 定義局部變量，const 定義局部常量

const userId = 666;
let userPassword = "wobuzidao";
為什么需要使用局部變量與常量 
//我希望重復(fù)打印 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();//結(jié)果打印只有一次 0 到 9
letI();//順利完成

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

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//順利完成
結(jié)構(gòu)賦值

左右兩邊必須是一樣的數(shù)據(jù)類型，或者轉(zhuǎn)換后是一樣的類型；

等號右邊的值應(yīng)該是數(shù)組或?qū)ο?，不是對象或?shù)組，就先將其轉(zhuǎn)為對象；

定義和賦值必須同步完成

例如聲明變量

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 數(shù)據(jù)
解構(gòu)賦值對提取 JSON 對象中的數(shù)據(jù)，尤其有用。

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

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]
箭頭函數(shù)

在 ES6 之前定義函數(shù)是這樣寫

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

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

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

好像沒有太大區(qū)別？

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

上面的可以這樣寫

let f = i => return  i + 5;

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

假如將 ES6 的箭頭函數(shù)轉(zhuǎn)換為 ES5 的普通函數(shù),可以看到，箭頭函數(shù)的 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 運算后的結(jié)果
ES5 中比較麻煩

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

ES6中相對簡單

$("#dom").append(
  `
你的用戶名是：${userName}
你已經(jīng)注冊了${oNumber}年
`
);
面向?qū)ο?/b>

class 用來定義一個類

extends 用來表示繼承哪個類

constructor 構(gòu)造函數(shù)可以定義私有方法和屬性,此函數(shù)外的為共享的

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 （二）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99951.html

相關(guān)文章

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

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

    hidogs 評論0 收藏0

  • ES6-7

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

    mudiyouyou 評論0 收藏0

  • 前端基礎(chǔ)進階（十四）：es6常用基礎(chǔ)合集

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

    Ryan_Li 評論0 收藏0

  • es6精簡學(xué)習(xí)

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

    RiverLi 評論0 收藏0

  • 30分鐘掌握ES6/ES2015核心內(nèi)容（上）

    摘要：以下簡稱是語言的下一代標(biāo)準。的繼承機制，實質(zhì)是先創(chuàng)造父類的實例對象所以必須先調(diào)用方法，然后再用子類的構(gòu)造函數(shù)修改?？偨Y(jié)以上就是最常用的一些語法，可以說這的語法，在的日常使用中占了追加十分鐘好的嗎分鐘掌握核心內(nèi)容下 ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標(biāo)準。因為當(dāng)前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。 也就是說...

    YPHP 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<