ES6ES2015核心内容

    xiaoxiao2021-03-25  140

    1. let 、const 、var 的特性

     

    ① let 声明的变量,只在 let 命令所在的代码块内有效。

    //ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景 // 而let则实际上为JavaScript新增了块级作用域。 // 用它所声明的变量,只在let命令所在的代码块内有效。 var A = "aa"; let B = "aa"; while(true){ var A = "bb"; let B = "bb"; alert(A + B);//bbbb break; } alert(A + B);//bbaa   var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 var b = []; for (let i = 0; i < 10; i++) { b[i] = function () { console.log(i); }; } b[6](); // 6

    ② const 声明的是常量,不能更改。

    const PI = Math.PI PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only const有一个很好的应用场景,当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:

    2. class, extends, super

    引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。 class Animal { constructor(){ this.type = 'animal' } says(say){ console.log(this.type + ' says ' + say) } } let animal = new Animal() animal.says('hello') //animal says hello class Cat extends Animal { constructor(){ super() this.type = 'cat' } } let cat = new Cat() cat.says('hello') //cat says hello

    上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实力对象可以共享的。

    Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

    super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

    3. function

    ① 箭头操作符 function(i){ return i + 1; } //ES5 (i) => i + 1 //ES6 //如果方程比较复杂,则需要用{}把代码包起来 function(x, y) { x++; y--; return x + y; } (x, y) => {x++; y--; return x+y} ② 参数默认值 function sayHello(name){ //传统的指定默认参数的方式 var name=name||'dude'; console.log('Hello '+name); } //运用ES6的默认参数 function sayHello2(name='dude'){ console.log(`Hello ${name}`); } sayHello();//输出:Hello dude sayHello('Wayou');//输出:Hello Wayou sayHello2();//输出:Hello dude sayHello2('Wayou');//输出:Hello Wayou ③ 不定参数 //将所有参数相加的函数 function add(...x){ return x.reduce((m,n)=>m+n); } //传递任意个数的参数 console.log(add(1,2,3));//输出:6 console.log(add(1,2,3,4,5));//输出:15 ④ 拓展参数 var people=['Wayou','John','Sherlock']; //sayHello函数本来接收三个单独的参数人妖,人二和人三 function sayHello(people1,people2,people3){ console.log(`Hello ${people1},${people2},${people3}`); } //但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数 sayHello(...people);//输出:Hello Wayou,John,Sherlock //而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法 sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock

    4. for of 遍历

    for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。 var someArray = [ "a", "b", "c" ]; for (v of someArray) { console.log(v);//输出 a,b,c }

    5. Map , Set 和 WeakMap,WeakSet

    // Sets var s = new Set(); s.add("hello").add("goodbye").add("hello"); s.size === 2; s.has("hello") === true; // Maps var m = new Map(); m.set("hello", 42); m.set(s, 34); m.get(s) == 34; 有时候我们会把对象作为一个对象的键用来存放属性值,普通集合类型比如简单对象会阻止垃圾回收器对这些作为属性键存在的对象的回收,有造成内存泄漏的危险。而 WeakMap , WeakSet 则更加安全些,这些作为属性键的对象如果没有别的变量在引用它们,则会被回收释放掉。 // Weak Maps var wm = new WeakMap(); wm.set(s, { extra: 42 }); wm.size === undefined // Weak Sets var ws = new WeakSet(); ws.add({ data: 42 });//因为添加到ws的这个临时对象没有其他变量引用它,所以ws不会保存它的值,也就是说这次添加其实没有意思 更多知识参考:  ES6中文API
    转载请注明原文地址: https://ju.6miu.com/read-8991.html

    最新回复(0)