十分鐘帶你欣賞ES6語法糖

賜我白日夢發表於2019-08-07

let , const關鍵字

var

看習慣了java, 看js真的是忍不住想笑,比如說這個var,它太自由了,自由到{}根本限制不住它的生命週期

js的var關鍵字,無論在何處宣告,都會被視為宣告在函式的最頂部,不在函式裡面的就被視為在全域性的最頂部,這就是所謂的變數提升

function aa(bool) {
    if (bool) {
        var test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

比如上面的程式碼, 他就不會報錯,而是說undifined, 因為var的變數提升, 相當於下面那樣:

function aa(bool) {
    var test;
    if (bool) {
        test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

let

換成let關鍵字,就會普通變數, 它的生命週期被限制在 { }

function aa(bool) {

    if (bool) {
        let test = "hello";
    } else {
        console.log(test);
    }
}

const

const 宣告常量, 值不允許被修改,而且必須初始化

function aa() {
    let a = 'abc';
    const test = a;
    a = "world";
    alert('a=='+a);
    alert('test=='+test);
}
aa();

結果就是 abc world

如果嘗試直接對test賦值, 編譯器會報錯的

模板字串的拼接

這樣取值完全沒問題, 但是js的設計者認為他 + 太多了,low爆了

console.log(name1 + "喜歡" + name2);

於是: ${} , 注意啊, 是esc下面的鍵位

console.log(`${name1}喜歡${name2}`);

方法入參的預設值

如果我們不給入參傳值, 預設就是空, 一用就報錯, 所以引數需要預設值是很有必要的

這時候, 使用者傳遞進來值了,使用的就是使用者傳遞進來的值, 在java中想幹這個事,得在引數位置加老長的註解

function sayName(name = "張三") {
    alert(name);
}

箭頭函式

es6的箭頭函式和java8的lambda表示式如出一轍, 因為學了java8, 所以es6的箭頭函式也是秒上手了, 包括流式的操作也如出一轍

物件的簡寫和解構

原來,如果方法想返回一個物件,需要這樣寫

function people(name, age) {
return {
    name: name,
    age: age
}
}

在es6中,如果屬性和值相同 ,就變成了這樣

function people(name, age) {
    return {
        name,
        age
    }
}

動態的新增屬性, 在java想都別想,

let p = {name: '張三', age: 680};
alert(p.name);
alert(p.age);
  • 新增屬性
p.address = '山東';
  • 新增函式
p.add = () => {};

其實js這麼自由也不一定是好事, 起碼不能亂點了, 它也不給報錯, 一不留神就多了個屬性

組裝物件或陣列SpreadOperator ...

const color = ['red', 'blue'];
const colorful = [...color, 'green']
// 現在 colorful陣列就是 三個顏色的陣列 , 同樣換成{}  也一樣

Import 和 export

這個特性vue用的最多, 模組化的感覺很強烈

let fun = function () {
    console.log("fun")
}
export {fun}


// 在第二個檔案 匯入
import fun from "./fun";
// 然後使用
fun()

物件導向的程式設計模式-類

class person {
    // 建構函式
    constructor(name) {
        this.name = name; // 不提前定義變數? 不存在的,直接點就行了老鐵
    }

    // 方法
    sayHello() {
        console.log("hello");
    }
}

// 類的繼承
class Student extends person {
    constructor(name) {
        super(name);
    }

    sayHaha() {
        console.log("haha");
    }
}

使用:

它並不能寫 父類引用指向子類物件

//person stu = new Student('zhangsan');  
var stu = new Student('zhangsan');
stu.sayHaha();

相關文章