JavaScript ES6特性

Posted 2020-08-22 言文

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

未完待续