美文网首页ES6
es6、7、8、9主要新特效到底有哪些?

es6、7、8、9主要新特效到底有哪些?

作者: 沐雨芝录 | 来源:发表于2019-03-29 10:30 被阅读162次

    前言

    这里不做新特性的解释,我们只是搬运,你需要学习的新特性。部分复杂的,我们会出文章进行阐述。

    es6

    必学篇:

    1、Default Parameters(默认参数):可以在函数内参数默认值,如

    var f = function(width = 1, height = 2) {
      ...
    }
    

    2、Template Literals (模板文本):通过``和${}实现

    var name = '小雨';
    var getName = `Your name is ${name} . `;
    console.log(getName) // Your name is 小雨 .
    

    3、Multi-line Strings (多行字符串):同上方法。

    4、Destructuring Assignment (解构赋值)

    const {a, b} = {a:1,b:2} 
    const [c, d] = [3, 4] 
    console.log(a, b, c, d) // 1, 2, 3, 4
    

    5、Enhanced Object Literals (增强的对象文本)

    6、Arrow Functions (箭头函数)

    • =>不改变this指向,父函数this指向哪就是哪。
    • =>指向单行代码可以当return使用。
    $('.btn').click((event) => {
      this.fn();
    });
    

    7、Promises :需要专门研究一下,对比gennerator函数和async函数。

    8、块作用域构造(Let and Const):const命名后不可变,let命名后数据可以变,但是没有变量提升。

    const a = 1;
    let b = 2;
    

    9、Class(类):就是面向对象编程(OOP),用过react的都知道。
    10、Modules(模块):export声明,import引入。

    深入篇

    1、全新的Math, Number, String, Array 和 Object 方法

    大家去搜一下:比如,es6 string新增方法。

    2、二进制和八进制数据类型:分别用前缀 0b(0B)和 0o(0O)表示

    0b111110111 === 503 
    0o767 === 503 
    

    3、默认参数不定参数扩展运算符:

    • 默认参数(就是必须篇第一个)
    • rest参数:三点运算符...,用于获取剩余的对象或者数组多余参数。
    • 扩展运算符:三点运算符...,用于获取对象或者数组参数,相当于apply(null,data)

    4、Symbols符号:对象属性名都是字符串容易造成属性名冲突。为了避免这种情况的发生,ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。

    • 总结:个人觉得最大的用处就是symbol.iterator(遍历器),它的存在,让我们for-of成为强大的遍历方式。

    5、tail调用

    6、Generator (生成器):需要专门研究一下,对比promise函数和async函数。我写了Generators文章,强推。

    7、新的数据构造对象map和set:还有weakmapweakset,之后会有专门文章阐述。简单来说,之前有arrayobject,es6加了这两种数据结构,通过symbol.iterator(遍历器)去管理,可以理解为for-of去实现循环。


    es7

    1、数组includes()方法:用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。可以在很多情况下取代indexOf;

    2、求幂运算:a ** b指数运算符,它与 Math.pow(a, b)相同。


    es8

    1、async await:更清新的promise语法。需要专门研究一下,对比promise函数和generator函数。我写了async await文章。

    2、Object的新方法:

    • Object.keys:将键值对的key值变成一个数组,例如Object.keys({a:1})
    • Object.values:将键值对的value值变成一个数组,例如Object.keys({a:1})
    • Object.entries:将键值对,key,value同时变数组,例如Object.keys({a:1})
    • Object.getOwnPropertyDescriptors:返回一个对象的所有自身属性的描述符(.value,.writable,.get,.set,.configurable,enumerable),例如Object.getOwnPropertyDescriptors({a:1})

    3、字符串填充:****padStart()padEnd(),填充字符串达到当前长度。

    var a  = 'x'.padStart(5, 'ab') 
    console.log(a) // ababx
    
    var b  = 'x'.padEnd(5, 'ab') 
    console.log(b) // xabab
    

    4、函数参数列表和调用中的尾逗号(Trailing commas)

    5、ShareArrayBuffer和Atomics用于从共享内存位置读取和写入


    相关文章

      网友评论

        本文标题:es6、7、8、9主要新特效到底有哪些?

        本文链接:https://www.haomeiwen.com/subject/lwvnvqtx.html