zoukankan      html  css  js  c++  java
  • es6新特性

    1.let && const

    let命令也用于声明对象,但是作用域为局部。

    {
        let a = 10;
        var b = 1;
    }

    在函数外部可以获取到b,获取不到a,因此例如for循环计数器就适合使用let。

    const用于声明一个常量,设定后值不会再改变。

    const PI = 3.1415;
    PI // 3.1415
    PI = 3;

    强行对其进行重新赋值会报错。

    2.iterable类型

    为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型,具有iterable类型的集合可以通过新的for … of循环来遍历。

    var a = ['A', 'B', 'C'];
    var s = new Set(['A', 'B', 'C']);
    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    for (var x of a) { // 遍历Array
        alert(x);
    }
    for (var x of s) { // 遍历Set
        alert(x);
    }
    for (var x of m) { // 遍历Map
        alert(x[0] + '=' + x[1]);
    }

    Map相关操作方法如下,Set同理:

    var m = new Map(); // 空Map
    m.set('Adam', 67); // 添加新的key-value
    m.set('Bob', 59);
    m.has('Adam'); // 是否存在key 'Adam': true
    m.get('Adam'); // 67
    m.delete('Adam'); // 删除key 'Adam'
    m.get('Adam'); // undefined

    3.解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 
    例如数组:

    let [a, b, c] = [1, 2, 3];
    //等同于
    let a = 1;
    let b = 2;
    let c = 3;

    对象的解构赋值:获取对象的多个属性并且使用一条语句将它们赋给多个变量。

    >var {
      StyleSheet,
      Text,
      View
    } = React;

    等同于

    var StyleSheet = React.StyleSheet
    ...

    4.箭头函数

    ES6中新增箭头操作符用于简化函数的写法,操作符左边为参数,右边为具体操作和返回值。

    var sum = (num1, num2) => { return num1 + num2; }
    //等同于
    var sum = function(num1, num2) {
        return num1 + num2;
     };

    箭头函数还修复了this的指向,使其永远指向词法作用域:

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 25

    5.延展操作符

    通过它可以将数组作为参数直接传入函数:

    var people=['Wayou','John','Sherlock'];
    function sayHello(people1,people2,people3){
        console.log(`Hello ${people1},${people2},${people3}`);
    }
    //改写为
    sayHello(...people);//输出:Hello Wayou,John,Sherlock 

    在函数定义时可以通过…rest获取定义参数外的所有参数:

    function foo(a, b, ...rest) {
        console.log('a = ' + a);
        console.log('b = ' + b);
        console.log(rest);
    }
    
    foo(1, 2, 3, 4, 5);
    // 结果:
    // a = 1
    // b = 2
    // Array [ 3, 4, 5 ]

    6.类

    ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类,与多数传统语言类似。

    //定义类
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }

    Promise

     在我看来Promise就相当于一个承诺容器,将所要执行的事件存贮在promise容器中。 

    Promise在ES6中被统一规范,由浏览器直接支持。ES6语法中说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。

    首先测试一下浏览器是否支持Promise:

    new Promise (function(){});
    //测试
    alert('support Promise!')

    Promise的特点:

     对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态: 

    • - Pending(进行中) 
      - Fulfilled(已成功) 
      - Rejected(已失败)

    • 一旦状态改变,就不会在变,任何时刻都会得到这个结果。 
      - 状态改变只有两种

               Pending——Fulfilled
               Pending——Rejected

    ES6规定,Promise对象是一个构造函数,用来生成Promise实例:

     let promise = new Promise(function (resolve, reject) {
                //...
                if (/*success*/) {
                    resolve(value);
                } else {
                    reject(value);
                }
            });

    Promise接受一个函数作为参数,函数的参数分别为resolve和reject.

    • resolve函数作用:将Promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
    • reject函数作用:将Promise对象的状态从“未完成”变为“失败”,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

    Promise实例生成以后,可以用then方法分别制定Resolved状态和Rejected状态的回调函数。

    example:

    new Promise(function (resolve, reject) {
        log('start new Promise...');
        var timeOut = Math.random() * 2;
        log('set timeout to: ' + timeOut + ' seconds.');
        setTimeout(function () {
            if (timeOut < 1) {
                log('call resolve()...');
                resolve('200 OK');
            }
            else {
                log('call reject()...');
                reject('timeout in ' + timeOut + ' seconds.');
            }
        }, timeOut * 1000);
    }).then(function (r) {
        log('Done: ' + r);
    }).catch(function (reason) {
        log('Failed: ' + reason);
    });

    timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果,过了指定时间(f参数)以后,Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。

    可见:Promsie最大的好处就是在异步执行的流程中,把执行代码和处理结果的代码清晰的分离出来。

    这里写图片描述

    Promise功能很多,如果有若干个异步任务,需要先做任务1,如果成功,在做任务2,如果中间任何一个任务失败,才不继续进行执行处理函数 
    要串行执行这样的异步任务,就可以写成

    obj1.**then**(obj2).**then**(obj3).**catch**(handleError)
    
    其中obj1、obj2和obj3都是Promise对象。

    example

    // 0.5秒后返回input*input的计算结果:
    function multiply(input) {
        return new Promise(function (resolve, reject) {
            log('calculating ' + input + ' x ' + input + '...');
            setTimeout(resolve, 500, input * input);
        });
    }
    
    // 0.5秒后返回input+input的计算结果:
    function add(input) {
        return new Promise(function (resolve, reject) {
            log('calculating ' + input + ' + ' + input + '...');
            setTimeout(resolve, 500, input + input);
        });
    }
    
    var p = new Promise(function (resolve, reject) {
        log('start new Promise...');
        resolve(123);
    });
    
    p.then(multiply)
     .then(add)
     .then(multiply)
     .then(add)
     .then(function (result) {
        log('Got value: ' + result);
    });
     
  • 相关阅读:
    reason: ‘Could not instantiate class named NSLayoutConstraint’
    wzplayer 成功支持IOS
    【搜索】P1219 八皇后
    原生JS的移入溢出控制div的显示与隐藏
    es3设置属性不能修改
    插槽在父组件和子组件间的使用(vue3.0推荐)
    es5设置属性不能修改
    jquery操作css样式的方法
    基于jQuery的AJAX和JSON的实例 模版
    C#实现根据IP 查找真实地址
  • 原文地址:https://www.cnblogs.com/mengshi-web/p/9676565.html
Copyright © 2011-2022 走看看