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拦截器
     
  • 相关阅读:
    用Python完成一个汇率转换器
    鸿蒙如何用JS开发智能手表App
    鸿蒙如何用JS开发智能手表App
    SAP Spartacus SplitViewComponent Migration 的一个具体例子
    SAP Spartacus B2B 页面 Popover Component 的条件显示逻辑
    SAP Spartacus 升级时关于 schematics 的更新
    SAP Spartacus B2B 页面 Disable 按钮的显示原理
    SAP Spartacus B2B 页面 Disable Confirmation 对话框的显示原理
    通过 Feature Level 动态控制 SAP Spartacus 的页面显示
    SAP Commerce Cloud Build Manifest Components
  • 原文地址:https://www.cnblogs.com/suihang/p/9961791.html
Copyright © 2011-2022 走看看