zoukankan      html  css  js  c++  java
  • ES7及ES8的新特性

    其实最近用的比较多的还是ES6,但是了解新的技术又是必不可少的,大部分都是通过博客和掘金去学习,偶尔会看一些视频并去验证这样的结果;

      • ES7新特性:
        在Es6的基础上增加了三项:求幂运算符(**),Array.prototype.includes()方法、函数作用域中严格模式的变更。

        (1)Array.prototype.include(). 查找一个值在不在数组里;接收两个参数:要搜索的值和搜索的开始索引。当第二个参数被传入时,该方法会从索引处开始往后搜索(默认索引值为0)。若搜索值在数组中存在则返回true,否则返回false。
        与indexOf相比较:
        更加简便(从返回值来说一个是下标一个是值)
        精确性:两个NaN被认为是相等的,即使在NaN === NaN结果是false的情况下。这一点和indexOf()的行为不同,indexOf()严格使用===判断。
        let demo = [1, NaN, 2, 3]

        demo.indexOf(NaN) //-1
        demo.includes(NaN) //true
        includes()只能判断简单类型的数据,对于复杂类型的数据,比如对象类型的数组,二维数组,这些,是无法判断的

        (2)求幂运算符(**)
        3 ** 2 //9。 等同于 Math.pow(3,2); let a = 3; a **= 2 //9


        Es8新特性:
        (1)异步函数(Async functions)
        由于javascript语言的执行环境是单线程的,一般使用回调函数实现异步编程,假如有多个嵌套的话,代码显得很乱;
        Promise,将函数的嵌套改成链式调用;.then(()=>回调方法);
        promise的缺点是:请求任务过多时.then也会相对增加;
        Generator:异步编程机制,在dva中effects中就是使用的这种;函数执行时,返回的是一个指向内部状态的指针对象,必须调用遍历器对象的next方法,使得指针移向下一个状态。也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield表达式(或return语句)为止。换言之,Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。
        function* helloWorldGenerator() {
        yield 'hello';
        yield 'world';
        return 'ending';
        }

        var hw = helloWorldGenerator();
        hw.next()
        // { value: 'hello', done: false }

        hw.next()
        // { value: 'world', done: false }

        hw.next()
        // { value: 'ending', done: true }

        hw.next()
        // { value: undefined, done: true }
        缺点:流程管理不方便;
        async function asyncFunc(params) {
        const result1 = await this.login()
        const result2 = await this.getInfo()
        }
        变体
        异步函数存在以下四种使用形式:
        * 函数声明: async function foo() {}
        * 函数表达式: const foo = async function() {}
        * 对象的方式: let obj = { async foo() {} }
        * 箭头函数: const foo = async () => {}
        并行处理多个异步结果:
        async function asyncFunc() {
        const [result1, result2] = await Promise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2()
        ]);
        console.log(result1, result2);
        }
        async function asyncFunc() {
        try {
        await otherAsyncFunc();
        } catch (err) {
        console.error(err);
        }
        }
        (2)Object.entries()和Object.values()
        将一个具有键值对的数据结构或是数组,返回一个二维数组;
        Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
        Object.entries([1, 2]) //[['0', 1], ['1', 2]]注意:键值对中,如果键的值是Symbol,编译时将会被忽略。例如:
        Object.entries({ [Symbol()]: 1, two: 2 }) //[['two', 2]]

        进行对象属性的遍历:
        let obj = { a: 1, b: 2 };
        for (let [k,v] of Object.entries(obj)) {
        console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
        }

        //输出结果如下:
        'a': 1
        'b': 2

        Object.values():工作原理和上面很像,只返回键值对中属性值;返回数组顺序也和上面很像;
        Object.values({ one: 1, two: 2 }) //[1, 2]
        Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']
        (3)字符串填充:padStart和padEnd
        padStart函数通过填充字符串的首部来保证字符串达到固定的长度,反之,padEnd是填充字符串的尾部来保证字符串的长度的。该方法提供了两个参数:字符串目标长度和填充字段,其中第二个参数可以不填,默认情况下使用空格填充。
        'Vue'.padStart(10) //' Vue'
        React'.padStart(10, 'Hello') //'HelloReact'
        填充函数只有在字符长度小于目标长度时才有效,若字符长度已经等于或小于目标长度时,填充字符不会起作用,而且目标长度如果小于字符串本身长度时,字符串也不会做截断处理,只会原样输出。
        (4)Object.getOwnProentyDescriptors()指定属性描述符;
        该方法会返回目标对象中所有属性的属性描述符,该属性必须是对象自己定义的,不能是从原型链继承来的;第二个参数可以是
        该方法返回的描述符,会有两种类型:数据描述符、存取器描述符。返回结果中包含的键可能的值有:configurable、enumerable、value、writable、get、set;
        使用过Object.assign()的同学都知道,assign方法只能拷贝一个属性的值,而不会拷贝它背后的复制方法和取值方法。Object.getOwnPropertyDescriptors()主要是为了解决Object.assign()无法正确拷贝get属性和set属性的问题。
        http://www.cnblogs.com/zhuanzhuanfe/p/7493433.html。原文地址;

        ES7与ES6相比较而言,两者更加贴近,在ES6基础上做修改。而ES8添加更多的新特性,通过他人的博客了解还不够透彻,只是把精华部分摘取出来,自己理解的比较少;
         

  • 相关阅读:
    iOS开发学习之NSFetchedResultsController
    iOS开发学习之Core Data
    iOS开发学习之MapKit
    iOS学习之CoreLocation相关知识
    制作LaunchImage的简单方法
    iOS学习之table view controller、table view cell
    iOS学习之NSKeyedArchiver、NSKeyedUnarchiver归档
    【MM 】委外加工退货
    【SAP Workflow】相关英语专业术语
    【MM】Purchasing Account Management---待完善
  • 原文地址:https://www.cnblogs.com/naniandongzhi/p/10127966.html
Copyright © 2011-2022 走看看