ES6/7有很多的新的特性,下面只介紹了一部分,還有幾個重要的單獨講,很多的地方都寫的不是很詳細,主要做一個大概的方向的瞭解,一篇文章也是寫不完的
let 和 const

兩個新的關鍵字用來宣告變數
let用來宣告一個塊級變數,作用域只在塊級內部,有幾個不同於var的特性:

塊級作用域
不能重複宣告
不存在變數提升
但是存在變數暫時性鎖死

example:

var ex = 1;
(function () {
    console.log(ex); // ex is not defined
    let ex = 2;
})()

(function () {
    let ex = 2
 
;
    console.log(ex); // 2
})()
console.log(ex) // 1

const用來宣告一個不可改變的變數,特性與let相同

example:

var ex = 1;
(function () {
    const ex = 2;
    console.log(ex) // 2
    ex = 1 // error
})()
console.log(ex) // 1

解構賦值

可以很方便的通過陣列(是具有Iterator藉口的資料結構)或者物件賦值給單個的變數
最簡單也是最好用的用法

let list = [1,2]
let [a,b] = list
console.log
 
(a) // 1
console.log(b) // 2

而且支援預設值

let list = [1, 2]
let [a, b, c = 3] = list
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

也可以巢狀

let list = [1, [2, 3]]
let [a, [b, c], d = 4] = list
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 3

簡單的用法,資料交換

let a = 1;
let b = 2
 
;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

物件的結構賦值,語法與陣列大致相同,同樣支援巢狀

let obj = {
    name: 'bulesyk',
    age :'22'
}
let {name:name,age:age} = obj 
console.log(name) // bulesyk
console.log(age) // 22

看一下對應關係

let obj = {
    name: 'bulesyk',
    age: '22'
}
let {name: first, age: second, sex: third = 'mail'} = obj
console.log(first) // bulesyk
console.log(second) // 22
console.log(third) // mail

函式的預設引數物件

function fn({a=1,b=2}) {
    console.log(a)
    console.log(b)
}

// 當需要配置的引數為物件時
fn({
a:3
})
// 3
// 2

字串

新的includes方法,返回true/false

let ex = ‘hello world’
console.log(ex.includes(‘hello’)) // true

新的startsWith和endsWith,返回true/false

console.log(ex.startsWith(‘hello’)) // true
console.log(ex.endsWith(‘world’)) // true

上面的三種方法都支援第二個引數,以為著從第幾位(不包括起始位置)開始計算
endsWith的第二個引數是隻計算前多少位

console.log(ex.includes(‘hello’,1)) //false
console.log(ex.startsWith(‘llo’,2)) // true
console.log(ex.endsWith(‘llo’,5)) // true

函式

函式引數預設值

function fn(a=1,b=2) {
    console.log(a)
    console.log(b)
}

// 和解構的不同之處是之前傳入的是物件引數
fn(3)
// 3
// 2

rest表示法

function fn(a,b,…params) {
console.log(a)
console.log(b)
console.log(params)
}
fn(1,2,3,4,5)
// 1
// 2
// [3,4,5]

還可以用來合併陣列

let a = [1]
let b = [2,3,4]
let c = [5]
console.log([…a,…b,…c])
// 或者 console.log([1,…b,5])
// [1,2,3,4,5]

箭頭函式
用來替代匿名函式,並且this指的就是定義時的物件

let ex = {
    name: 'example',
    fn: function () {
        console.log(this);
        (function () {
            console.log(this);
        })();
        (()=>{
           console.log(this); 
        })();
    }
}
ex.fn();
// Object
// Window
// Object

語法

/

/ () => {}
// function () {}

// para => {} // 或者(para) => {}
// function (para) {}

// (a,b) => {}
// function (a,b) {}

// 形式上,上面兩兩相同

物件

物件的屬性簡寫

var a= 1;
var b= 2;

var ex = {a,b}
// 等於var ex = {a:a,b:b}
console.log(ex)
// object{a:1,b:2}

方法的簡寫

var ex = {
    fn(){
        console.log('fn')
    }
    // 等於
    // fn:function () {
    //     console.log('fn')
    // }
}
ex.fn() // 'fn

陣列

Array.from(params)根據類陣列返回一個新的陣列

var ex = {
    0:'a',
    1:'b',
    length:2
}
var arr = Array.from(ex)
console.log(arr) // ['a','b']
console.log(arr instanceof Array) // true

Class

這相當於建構函式的語法糖

class Fn {
    constructor(a, b) {
        this.a = a
        this.b = b
    }
    fn(){
        console.log('fn')
    }
}
var ex = new Fn(1,2)
console.log(ex.a) // 1
console.log(ex.b) // 2
ex.fn() // fn
console.log(typeof Fn) // function

function Fn1(a,b) {
    this.a = a
    this.b = b
}
Fn1.prototype.fn = function(){
    console.log('fn')
}
var ex1 = new Fn1(1,2)
console.log(ex1.a) // 1
console.log(ex1.b) // 2
ex1.fn() // fn

上面Fn大致與Fn1相同,部分不同之處有:

Fn中的方法是不可列舉的
建立例項時要用new關鍵詞,不可以當做一個普通函式來用,會丟擲錯誤
繼承機制的不同

class Fn {
    constructor(a, b) {
        this.a = a
        this.b = b
    }
    fn(){
        console.log('fn')
    }
}
class FnInner extends Fn{
    constructor(a,b) {
        super(a,b)
        // 必須要super如果沒有super建立例項時會丟擲錯誤
        // super相當於父類的this
    }
    fn(){
        console.log('inner')
    }
}
var ex = new FnInner(1,2)
console.log(ex.a) // 1
console.log(ex.b) // 2
ex.fn() // inner

Set

Set是一個內部不能有重複值的物件,使用new Set()建立

var arr = [1,1,3,4,2,4,4]
var set = new Set(arr)
console.log(set) // Set{1,3,4,2}

這個可以很方便的陣列去重

var arr = [1,1,3,4,2,4,4]
var set = new Set(arr)
console.log(set) // Set{1,3,4,2}
var arr = Array.from(set)
console.log(arr) // [1,3,4,2]