ES6 基礎實踐

ES6 基礎實踐

let 和 const

let 和 var 的區別

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

// 猜猜是否報錯,以及輸出什麼

const 常量

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

模板字符串

普通字符串

`我是一個好人`

多行字符串

console.log(`我仍是能夠
                換行的字符串`);
let a = `1
2
3
4`;

a.length //猜猜a的長度是多少?

let b = "1\n2\n3\n4";

a === b //猜猜是否相等?

插入變量

let name = "張三";
    let age = 12;
    function say(name){
        return "你好,很高興認識你," + name;
    }
    
    console.log(`我是${name},個人性別是:${ "男" },我今年 ${ age * 2 }歲,我想說: ${ say("李四") }`);

延伸思考

let a = "abc";
let b = new String("abc");
a == b?
a === b?

解構賦值

數組解構

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];this

let [a = 1] = [null];prototype

let [a = 1] = [undefined];code

let [a] = [null];對象

let [a] = [];繼承

對象解構

let {a, b} = {a: 1, b: 2 };字符串

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

let {a = 1} = {};

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

一、先兩句一塊兒執行:
    let a = 1;
    {a} = {a: 2}

二、分開一條一條執行
    let a = 1;
    
    {a} = {a: 2}

三、反過來執行
    {a} = {a: 2}
    let a = 1;
    
    a ?
    window.a ?
    上面的a 和 window.a 各輸出什麼?
let a = 1;
({a} = {a: 2})
若是這樣的兩句一塊兒執行呢?

數組和對象解構?

用途

  • 交換變量的值
let a = 1;
    let b = 2;
    [a, b] = [b, a];
  • 從函數返回多個值
function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();
function example() {
      return {
        a: 1,
        b: 2
      };
    }
    let {a, b} = example();
  • 函數參數的定義
function example([a, b, c]) {
         console.log(a, b, c); 
    }
    
    example([1, 2, 3]);
  • 提取JSON數據
let myDataList = {
      name: "張三",
      sex: "男",
      age: "24"
    };
    
    let { name, sex, age} = myDataList;
  • 函數參數的默認值
let throwMyErr = (errName) => {
        throw new Error(`請傳入參數 ${errName}`);
    }
    
    let example = (name = throwMyErr("name")) => {
        console.log(name);
    }

箭頭函數

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 到底指的哪?原型呢?一樣下面的繼承是否也同樣?
    (確認下節課內容)
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!`);
      }
    }
    //想一想爲何報錯?

模塊化 export import

導出模塊

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;
    
    // 錯誤
    export default var a = 1;

導入模塊

import {myLetA, myLetB, example as name} from './main';
    import SARS from './main';
相關文章
相關標籤/搜索