JavaScript ES6特性

Posted 言文

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);

未完待续

 




以上是关于JavaScript ES6特性的主要内容,如果未能解决你的问题,请参考以下文章

ES6:JavaScript 新特性

总结常见的ES6新语法特性。

ES6的新特性

ES6 常用特性总结

JavaScript ES6特性

ES6新特性:Javascript中Generator(生成器)