分分鍾帶你欣賞ES6語法糖

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