JavaScript ES6特性

ES6 核心特性

塊級做用域

let : 聲明的變量存在塊級做用域  不會聲明提早

ES5

// ES5 
//  聲明提早
var x = 'outer';
function test(inner) {
    if (inner) {
        var x = 'inner';
        console.log(x); 
    }
    console.log(x);
}
test(false) //undefined 
test(true)  // inner inner

ES6

// ES6 
// 聲明不提早
let x = 'outer';
function test(inner) {
    if (inner) {
        let x = 'inner';
        console.log(x); 
    }
    console.log(x);
}
test(false) // outer
test(true)  // inner outer

優勢

// ES5
{
    var a = 1;
}
console.log(a)
// ES6
{
    let b = 2;
}
console.log(b)

const : 常量  不能夠修改

---

 

模板字符串

使用 ` ` 包裹  變量使用${}

// ES5
var str1 = 'lpt';
var str2 = 'want to eat everything!';
console.log('我想說的是：' + str1 + ' ' + str2)
// ES6
const str3 = 'lpt';
const str4 = 'want to eat everything!';
console.log(`我想說的是：${str3} ${str4}`)

---

解構複製

解構賦值容許你使用相似數組或對象字面量的語法將數組和對象的屬性賦給各類變量

 

若是默認值是一個函數，那麼函數只會在有須要纔會去求值

function fn(num){
  console.log(num);
  return num;
}
let [a = fn(1)] = [10];  // 不執行函數
let [b = fn(2)] = [];  // 執行函數
a  // 10
b  // 2

解構賦值容許指定默認值

// ES5
var arr = [1, 2, 3, 4];
var first = arr[0];
var third = arr[2];
console.log(first, third); // 1 3
// ES6
const arr1 = [1, 2, 3, 4];
const [a, ,c=9] = arr1;
console.log(a,c)

交換value

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

解構爲多個返回值

// ES6
function margin() {
    const left=1, right=2, top=3, bottom=4;
    return { left, right, top, bottom };
}
const { left, bottom } = margin();
console.log(left, bottom); // 1 4

 

---

 

類和對象

 

// ES5
var Animal = (function () {
    function MyConstructor(name) {
        this.name = name;
    }
    MyConstructor.prototype.speak = function speak() {
        console.log(this.name + ' makes a noise.');
    };
    return MyConstructor;
})();
var animal = new Animal('lpt');
animal.speak(); // lpt makes a noise.


// ES6
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
const animal = new Animal('lpt');
animal.speak(); // lpt makes a noise.

 

 

---

繼承

// ES5
var Animal = (function () {
    function MyConstructor(name) {
        this.name = name;
    }
    MyConstructor.prototype.speak = function speak() {
        console.log(this.name + ' makes a noise.');
    };
    return MyConstructor;
})();
var Monkey = (function () {
    function MyConstructor(name){
        Animal.call(this, name);
    }
    // prototypal inheritance
    MyConstructor.prototype = Object.create(Animal.prototype);
    MyConstructor.prototype.constructor = Animal;
    MyConstructor.prototype.speak = function speak() {
        Animal.prototype.speak.call(this);
        console.log(this.name + ' roars');
    };
    return MyConstructor;
})();
var monkey = new Monkey('Simba');
monkey.speak(); 
// Simba makes a noise.
// Simba roars.

// ES6
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' makes a noise.');
    }
}
class Lion extends Animal {
    speak() {
        super.speak();
        console.log(this.name + ' roars');
    }
}
const lion = new Lion('Simba');
lion.speak(); 
// Simba makes a noise.
// Simba roars.

---

箭頭函數

箭頭函數徹底修復了this的指向，this老是指向詞法做用域，也就是外層調用者obj

// ES6
var obj = {
    birth: 1992,
    getAge: function () {
        var b = this.birth; // 1992
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象
        console.log( fn() );
    }
};
obj.getAge(); // 24

---

For…of

// for
var array = ['a', 'b', 'c', 'd'];
for (var i = 0; i < array.length; i++) {
    var element = array[i];
    console.log(element);
}
// forEach
array.forEach(function (element) {
    console.log(element);
});
// for …of
for (const element of array) {
    console.log(element);
}

---

默認參數

// ES5
function point(x, y, isFlag){
    x = x || 0;
    y = y || -1;
    isFlag = isFlag || true;
    console.log(x,y, isFlag);
}
point(0, 0) // 0 -1 true
point(0, 0, false) // 0 -1 true
point(1) // 1 -1 true
point() // 0 -1 true
// ES6
function point(x = 0, y = -1, isFlag = true){
    console.log(x,y, isFlag);
}
point(0, 0) // 0 0 true
point(0, 0, false) // 0 0 false
point(1) // 1 -1 true
point() // 0 -1 true

求數組最大值

Math.max(...[2,100,1,6,43]) // 100

使用擴展運算符（...）拷貝數組

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

使用Array.from方法，將相似數組的對象轉爲數組

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

未完待續