ES6

作者: 知者s | 来源:发表于2018-07-10 10:46 被阅读0次
    参考资料:
        1.http://es6.ruanyifeng.com/#docs/function   
        2.https://www.cnblogs.com/Wayou/p/es6_new_features.html
    
    JS:ES(EcmaScript),DOM,BOM
    
     ES1.0   1997
     ES2.0   1998
     ES3.0   1999
     ES4.0    XXXX   2005-2006
     ES5.0   2009
     ES5.1   2011
     ES6(ES2015)     2015
     ES7     2016
     ES8    2017
     ES9    2018
     .....
    
    

    ES6新增特性:

    1. let,const
       特点:
       (1)没有变量提升
        (2)  块级作用域
        (3)不能重复定义
    
    

    2.模板字符串
    适用场景:解决字符串拼接问题
    用反引号实现:`` 获取值:${ }

    3.箭头函数:  =>
    
    

    匿名函数:

    function(item,index,arr) {
    
    console.log(arr)
    
    }
    

    用 =>来取代匿名函数
    (形参1,形参2,.....) => {

      //代码块
    
    

    }

    普通函数和箭头函数区别:

      箭头函数没有自己的this,它的this是其父级函数的this
      普通函数是有自己的this,他的this是在程序运行时确定的
    
    箭头函数特点:
    
    1.简洁
    2.没有arguments
    3.没有自己的this,它的父级的this(它所在上下文的this)
    
    构建工具:grunt(淘汰),gulp(有一部分公司在用),webpack(主流),fis,fekit
    
    require('a.js')
    require('b.css');
    require(''a.png)
    
    

    call,apply,bind的理解

    1.相同点:call,apply,bind都可以改变this指向
    2..区别:call和apply的传参形式不同,

        函数名.call(要改变的对象,参数1,参数2,......)
        函数名.apply(要改变的对象,[参数1,参数2,......])
    
        bind返回函数本身,但this已经改变了
        函数.bind(要改变的对象)(参数1,参数2,......)
               或
        函数.bind(要改变的对象,参数1,参数2,......)()
    
    

    对象扩展:
    1.如果key和value一样,写一个
    例如:

        var name="1512A"
        var age=20;
        以前写法:
    
        var obj={
             name:name,
             age:age
    
        }
    
        现在的写法:
        var obj={
           name,
           age
    
        }
    
    

    2.简化函数写法

    以前写法:

    var obj={
       say:function() {
          console.log(`我叫${this.name}`);
    
       }
    
    }
    
    

    现在写法:

            var obj={
               say() {
                  console.log(`我叫${this.name}`);
    
               }
    
            }
    
    

    尾逗号:可以在数组,对象末尾追加逗号,方便开发

       var obj={
       name:'alice',
       age:20,
    
    }
    
    

    解构赋值:

    var info={name: "alice", age: 20, address: "北京"}
    
    var {name,address}=info;
    
    var [one,two]=[20,45,6,2]
    
    

    展开操作符(spread)和rest: ...

    {23, 34, 45, 54, 342}

    ...  {23, 34, 45, 54, 342}
    
    []23, 34, 45, 54, 342]
    
    
    1. rest: 将数据列表 转换为 数组
    
        3,13,23,4,4,3 => [3,13,23,4,4,3 ]
    
    1. 展开操作符:将数组转换为 数据列表

    set:

    是数组的扩展,里面的值唯一,不能重复
    

    symbol:

    是ES6新增加的基本数据类型,从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因
    

    javascript基本类型:

    string,number,boolean,null,undefined
    

    map:

    是对象的扩展,key可以任何类型的值来充当,包括对象,字符串。。。。
    

    注意:和数组map方法的区别 返回值:数组

    class:是ES6实现的最新的面向对象写法

    ES5继承:https://segmentfault.com/a/1190000002440502

    定义类:

    class 类名{
    
       constructor(形参1,形参2,....) {
           //构造函数中的自动执行的内容
       }
    
       方法() {
           //方法逻辑
       }
    
    }
    
    

    实例化:new 类名(实参列表)

    例如:

    class Person {
    
       constructor(name) {
        this.name=name || "1512A";
       }
    
       drive() {
        console.log(`${this.name}会开车`);
       }
    
    }
    
    

    继承类:

    格式:

    //中国人继承人类
    class 子类  extends 父类{
    
         constructor(形参1,形参2,....) {
             super(name)   //表示调用父类,因为子类没有自己的this,必须通过调用父类实现
    
         }
    
         子类方法1() {
           //.....
         }
    
        子类方法2() {
           //.....
         }
    
    }
    
    

    例如:
    //中国人继承人类

    class ChinaPerson extends Person {
    
         constructor(name) {
             super(name)
    
         }
    
         play() {
            console.log(`${this.name}会打游戏`);
         }
    
         go() {
             console.log('go方法')
         }
    
    }
    
    

    默认参数: 在函数形参中直接指定默认值

    例如:
    function Fn(形能1="默认值1",形参2="默认值2") {

    }

    promise

    for of

    模块(module)

      export default {
          data() {
    
      }
    
     }
    
      import aaaa from 'header.vue'
    

    相关文章

      网友评论

          本文标题:ES6

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