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