成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

ES6 基礎(chǔ)實(shí)踐

go4it / 2248人閱讀

摘要:基礎(chǔ)實(shí)踐和和的區(qū)別輸出輸出猜猜是否報(bào)錯(cuò),以及輸出什么常量模板字符串普通字符串我是一個(gè)好人多行字符串我還是可以換行的字符串猜猜的長(zhǎng)度是多少猜猜是否相等插入變量張三你好,很高興認(rèn)識(shí)你,我是,我的性別是男,我今年歲,我想說(shuō)李四延伸思考解構(gòu)賦值數(shù)組

ES6 基礎(chǔ)實(shí)踐 let 和 const let 和 var 的區(qū)別
var a = 1;
window.a;    // 輸出:1
let b = 2;
window.b;    // 輸出:undefined
{
    let a = 1;
    // let a = 2;
    var b = 2;
}

console.log(a);
console.log(b);
let a = 1;
{
    console.log(a);
    let a = 2;
}
let i = "a";

for(let i = 0; i < 10; i++){
    // let i = "b";
    console.log(i);
}

// 猜猜是否報(bào)錯(cuò),以及輸出什么
const 常量
    const a = [1,2,3];
    const b = a;
    const c = [1,2,3];
模板字符串 普通字符串
    `我是一個(gè)好人`
多行字符串
    console.log(`我還是可以
                換行的字符串`);
let a = `1
2
3
4`;

a.length //猜猜a的長(zhǎng)度是多少?

let b = "1
2
3
4";

a === b //猜猜是否相等?
插入變量
    let name = "張三";
    let age = 12;
    function say(name){
        return "你好,很高興認(rèn)識(shí)你," + name;
    }
    
    console.log(`我是${name},我的性別是:${ "男" },我今年 ${ age * 2 }歲,我想說(shuō): ${ say("李四") }`);
延伸思考
let a = "abc";
let b = new String("abc");
a == b?
a === b?
解構(gòu)賦值 數(shù)組解構(gòu)

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

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

let [a, ...b] = [1, 2, 3, 4];

let [a = 1] = [2];

let [a = 1] = [null];

let [a = 1] = [undefined];

let [a] = [null];

let [a] = [];

對(duì)象解構(gòu)

let {a, b} = {a: 1, b: 2 };

let {a : newA, b: newB} = {a: 1, b: 2 };

let {a = 1} = {};

let {a = 1} = {a:2};

1、先兩句一起執(zhí)行:
    let a = 1;
    {a} = {a: 2}

2、分開(kāi)一條一條執(zhí)行
    let a = 1;
    
    {a} = {a: 2}

3、反過(guò)來(lái)執(zhí)行
    {a} = {a: 2}
    let a = 1;
    
    a ?
    window.a ?
    上面的a 和 window.a 各輸出什么?
let a = 1;
({a} = {a: 2})
如果這樣的兩句一起執(zhí)行呢?
數(shù)組和對(duì)象解構(gòu)?

用途

交換變量的值

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

從函數(shù)返回多個(gè)值

    function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();
    function example() {
      return {
        a: 1,
        b: 2
      };
    }
    let {a, b} = example();

函數(shù)參數(shù)的定義

    function example([a, b, c]) {
         console.log(a, b, c); 
    }
    
    example([1, 2, 3]);

提取JSON數(shù)據(jù)

    let myDataList = {
      name: "張三",
      sex: "男",
      age: "24"
    };
    
    let { name, sex, age} = myDataList;

函數(shù)參數(shù)的默認(rèn)值

    let throwMyErr = (errName) => {
        throw new Error(`請(qǐng)傳入?yún)?shù) ${errName}`);
    }
    
    let example = (name = throwMyErr("name")) => {
        console.log(name);
    }
箭頭函數(shù)
    let example = x => x * 2;
    let myObj = {
        funA : function(){
            setTimeout(function(){
                console.log(this);
            }, 500);
        }
    }
    
    let myObj = {
        funA : function(){
            setTimeout(() => {
                console.log(this);
            }, 500);
        }
    }
class和extends
    function SayHellowES5 (){
        this.name = "SARS";
    }
    
    SayHellowES5.prototype.say = function () {
        console.log(this.name);
    };
    class SayHellow {
      constructor() {
        this.name = "SARS";
      }
      say(){
        console.log(this.name);
      }
    }
    
    typeof SayHellow
    SayHellow === SayHellow.prototype.constructor
    var a = new SayHellow();
    a === SayHellow ?
    a.constructor === SayHellow ?
    var b = new SayHellow();
    a.__proto__ === b.__proto__ ?
    原型是否相等?
    b.__proto__.say2 = function(){
        alert("say2");
    }
    
    a.say2() ?
    
    思考 this 到底指的哪?原型呢?同樣下面的繼承是否也一樣?
    (確認(rèn)下節(jié)課內(nèi)容)
    class SayBey extends SayHellow{
      sayBey(){
        console.log("beybey!");
      }
    }
    class toBey extends SayHellow{
      sayBey(){
        console.log(`${this.name} beybey!`);
      }
    }
    class toBey2 extends SayHellow{
      constructor() {
        this.sex = "女";
      }
      sayBey(){
        console.log(`${this.sex} beybey!`);
      }
    }
    //想想為什么報(bào)錯(cuò)?
模塊化 export import 導(dǎo)出模塊
    export let myLetA = 1;
    export let myLetB = 2;
    export let example = () => {
        alert("SARS");
    }
    let myLetA = 1;
    let myLetB = 2;
    let example = () => {
        alert("SARS");
    }
    export {myLetA, myLetB, example as name};
    // 正確
    var a = 1;
    export default a;
    
    // 錯(cuò)誤
    export default var a = 1;
導(dǎo)入模塊
    import {myLetA, myLetB, example as name} from "./main";
    import SARS from "./main";
    

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/82140.html

相關(guān)文章

  • 【譯】前端練級(jí)攻略

    摘要:由于系統(tǒng)變得越來(lái)越復(fù)雜,人們提出了稱(chēng)為預(yù)處理器和后處理器的工具來(lái)管理復(fù)雜性。后處理器在由預(yù)處理器手寫(xiě)或編譯后對(duì)應(yīng)用更改。我之前建議的文章,,也涵蓋了預(yù)處理器相關(guān)的知識(shí)。 譯者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開(kāi)始學(xué)習(xí)前端開(kāi)發(fā)的時(shí)候。我看到了很多文章及...

    wuyumin 評(píng)論0 收藏0
  • 前端練級(jí)攻略(第二部分)

    摘要:是文檔的一種表示結(jié)構(gòu)。這些任務(wù)大部分都是基于它。這個(gè)實(shí)踐的重點(diǎn)是把你在前端練級(jí)攻略第部分中學(xué)到的一些東西和結(jié)合起來(lái)。一旦你進(jìn)入框架部分,你將更好地理解并使用它們。到目前為止,你一直在使用進(jìn)行操作。它是在前端系統(tǒng)像今天這樣復(fù)雜之前編寫(xiě)的。 本文是 前端練級(jí)攻略 第二部分,第一部分請(qǐng)看下面: 前端練級(jí)攻略(第一部分) 在第二部分,我們將重點(diǎn)學(xué)習(xí) JavaScript 作為一種獨(dú)立的語(yǔ)言,如...

    BWrong 評(píng)論0 收藏0
  • 學(xué)習(xí)ES6

    摘要:學(xué)習(xí)定稿有兩年多的時(shí)間了,斷斷續(xù)續(xù)通過(guò)一些博客,書(shū)籍也學(xué)到了很多知識(shí)。將各個(gè)部分的知識(shí)整理成一篇篇博文,以便于自己系統(tǒng)掌握和復(fù)習(xí)。整個(gè)系列主要參考了的深入理解,可以看作是對(duì)這本書(shū)的一個(gè)學(xué)習(xí)總結(jié),也向大家強(qiáng)烈推薦這本書(shū)作為的學(xué)習(xí)書(shū)籍。 學(xué)習(xí)es6 es6定稿有兩年多的時(shí)間了,斷斷續(xù)續(xù)通過(guò)一些博客,書(shū)籍也學(xué)到了很多es6知識(shí)??梢哉f(shuō),es6給js語(yǔ)言帶來(lái)了非常大的改進(jìn),引進(jìn)了很多好用的特性...

    wpw 評(píng)論0 收藏0
  • 專(zhuān)治前端焦慮的學(xué)習(xí)方案

    摘要:不過(guò)今天我希望能夠更進(jìn)一步,不僅僅再抱怨現(xiàn)狀,而是從我個(gè)人的角度來(lái)給出一個(gè)逐步深入學(xué)習(xí)生態(tài)圈的方案。最后,我還是想提到下對(duì)于的好的學(xué)習(xí)方法就是回顧參照各種各樣的代碼庫(kù),學(xué)習(xí)人家的用法與實(shí)踐。 本文翻譯自A-Study-Plan-To-Cure-JavaScript-Fatigue。筆者看到里面的幾張配圖著實(shí)漂亮,順手翻譯了一波。本文從屬于筆者的Web Frontend Introduc...

    codeGoogle 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<