zoukankan      html  css  js  c++  java
  • 对ES6的一次小梳理

    今天闲的没事回顾了ES6的一些知识,下面写的不是特别详细,只是类似于一个大纲,今天我竟然敢睡到八点起床了,md,我膨胀了,赶紧写篇博客压压惊

    下面来看看ES6给我们提供了哪些新东西

    (1)新的变量声明方式let/const(不具备变量提升,不可重复声明)
        let:声明的变量仅在块级作用域内有效
        const:常量,值一旦定义不可更改;声明时要赋初值
     
    (2)解构赋值:对象/数组赋值
        对象赋值:对象根据属性名一一对应,无序对应
            首先有这么一个对象const props = {
                className: 'tiger-button',
                loading: false,
                clicked: true,
                disabled: 'disabled'
                }
            // es5
            var loading = props.loading;
            var clicked = props.clicked;
            // es6
            const { loading, clicked } = props;
        数组赋值:数组以序列号一一对应,有序对应;允许指定默认值;内部使用严格相等运算符(===// es6
            const arr = [1, 2, 3];
            const [a, b, c] = arr;
    
            // es5
            var arr = [1, 2, 3];
            var a = arr[0];
            var b = arr[1];
            var c = arr[2];
    (3)字符串的遍历:for...of循环遍历
            for(let codePointAt of 'hicai'){
            console.log(codePointAt);
            }  // h i c a i
            遍历对象用for...in
     
     
    (4)箭头函数:
            // es5 写法
            var fn = function(a, b) {
              return a + b;
            }
            // es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号{}
            const fn = (a, b) => { a + b };  // {}可以省略

      注意:

              箭头函数可以替换函数表达式,但是不能替换函数声明;
              箭头函数本身没有this,其中的this指的是外层的this;
              箭头函数不可以使用arguments对象,该对象在函数体内不存在;
              不可以使用yield命令,因此箭头函数不能用作Generator函数。
     
     
    (5)字符串模板:为了解决+号拼接字符串的不便利。用 ` `包裹字符串,在其中用${}包裹变量或表达式。
    // es5写法
            var a = 20;
         var b = 30;
         var string = a + "+" + b + "=" + (a + b);
    // es6写法
            const a = 20;const b = 30;const string = `${a}+${b}=${a+b}`;
                         
    (6)展开运算符:(提高代码效率)
            ES6中用...来表示展开运算符,可以将数组方法或者对象方法进行展开;
            数组:
                const arr1 = [1, 2, 3];
                const arr2 = [...arr1, 10, 20, 30];
                // 这样,arr2 就变成了[1, 2, 3, 10, 20, 30];
            对象:
                const obj1 = {a:1,b:2,c:3}
                const obj2 = {
                ...obj1,  d: 4,  e: 5,  f: 6
            }
            // 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})
     
    (7)class(类)
            在js中,每个对象都有原型对象,所有js对象都从原型上继承方法和属性;
            ES5中,属性放在构造函数constructor里,方法放在原型prototype上;
            ES6中引入类class来代替构造函数constructor;还提供了extends划分super关键字;
    (8)promise对象:解决异步编程
            特点:a)对象的状态不受外界影响,promise对象代表一个异步操作,有三种状态:pending(进行中)、resolve(成功)、rejected(失败)
            一旦状态改变,就不会改变
            基本用法:
            Promise构造函数的两个参数是resolve和reject;
            Promise实例生成后,可以用then方法分别制定resolve和rejected状态的回调函数;
            Promise的then方法是定义在原型对象Promise.prototype上的,then方法返回的是一个新的Promise实例,不是原来那个Promise实例,因此可以用链式写法;
            方法1:Promise.all()方法用于将多个promise实例包装成一个新的promise实例;
            方法2:Promise.race()方法只要有一个peomise执行完毕就执行
    (9)模块化
    export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
    
    import用于在一个模块中加载另一个含有export接口的模块。
    (10)数组新API
        Array.from()方法可以将伪数组转为数组
       Array.of()将一组数字转化为数组

    (11)Set和Map数据结构:
            
        Set
                a)Set实例成员值唯一存储key值,map实例存储键值对(key-value)
                b)Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。
                操作方法:
                    add(value):添加某个值,返回Set结构本身
                    delete(value):删除某个值,返回布尔值
                    has(value):返回布尔值,表示该值是否为Set的成员
                    clear():清除所有成员,没有返回值
                遍历方法:
                    keys():返回键名
                    values():返回键值   
                    entries():返回键值对
                    forEach():使用回调遍历每个成员
           Map  
                a)Map的键实际上是跟内存地址绑定的,只要内存地址不一样,就视为两个键;
                b)Map实例的属性和操作方法:
                    size属性:返回Map结构的成员总数;
                    set(key, value):设置键名key对应的键值为value,然后返回整个Map结构,若key已有值,则更新键值,否则生成该键。
                    get(key):读取key对应的键值
                    has(key):返回布尔值,表示某个键是否存在当前map对象中。
                    delete(key):删除某个键,返回true,删除失败返回false
                    clear():其清除所有成员,没有返回值
                c)map的遍历方法:
                    keys():返回键名
                    values:返回键值
                    entries:返回所有成员
                    forEach():遍历map的所有成员,map的遍历顺序就是插入顺序
     
     
    (12)Symbol:新的数据类型,表示独一无二的值,不会与其他属性名产生冲突;
                Symbol值通过Symbol函数生成;
                let s = Symbol();
                typeof s;    // “symbol”
        注意:
                Symbol函数前不能使用new命令,
                Symbol值不是对象,所以不能添加属性;
          Symbol函数可以接受一个字符串为参数,表示对当前Symbol实例的描述,因此相同参数的Symbol函数的返回值是不相等的;
     
    (13)generator拦截器
     
  • 相关阅读:
    在字符串中查找指定字符(15)
    说反话 (20)
    鼠标经过显示问题
    Java数据库连接池-proxool
    mysql中MAX()函数和count()函数的技巧使用
    Java中多线程问题
    eclipse开发文档模板
    方法调用中的别名问题
    php类的定义
    通知浏览器下载文件,而不是直接打开下载
  • 原文地址:https://www.cnblogs.com/suihang/p/9961791.html
Copyright © 2011-2022 走看看