ES6

   简单了解一下es6

     ES6是ECMAScript的第六个版本。JavaScript包括ECMA,DOM,BOM三个部分。es6中更新了一些更加方便快捷的语法。ECMA是js的实现者。

  1.let&const

    let也是声明变量,  但是和var 有一定的区别。首先弄清楚var 和 let 的区别。

      1)var 声明提前,let在执行到这一行的时候才会声明变量

      2)在使用未声明变量的时候let会报错。

      3)如果有重复声明的时候,var 同名的后面的值会覆盖前面的值,let有同名的会报错。

      4)let会出现作用域死区,只能在自己的代码块中使用let声明的变量,只能在当前作用域有作用。

{
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
 
  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }
 
  console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量

             const用来声明常量,也同样的没有变量声明提升,不能重复定义,且不能挂在到window上。

     const和let一样,也会产生作用域临时死区。比如

const A = 100;
{    //临时死区
     console.log(A);
     const A = 200;
}
会报错 A未声明

    2.spreed & rest 收集与展开

    展开和收集

    3.解构

      解构过程中具备赋值和变量声明两个功能,目的在于把等号左右的两个东西内部的值取出来

       对象数组都可以参与解构,解构的作用在于简化书写长度,提高开发效率

      解构数组:let [a, b, c] = [1, 2, 3];  

      可忽略中间值 let [a, , b] = [1, 2, 3];  // a = 1 b = 2 c = 3

      可嵌套   let [a, [[b], c]] = [1, [[2], 3]];  // a = 1  b = 2  c = 3

      不完全解构  let [a = 1, b] = [];      // a = 1, b = undefined

      剩余运算符 ...     let [a, ...b] = [1, 2, 3];  //a = 1 b = [2, 3]

      解构默认值 :  let [a = 2] = [undefined];  // a = 2

    对象模型的解构 

      解构对象 let { foo, bar } = { foo: 'aaa', bar: 'bbb' };   // foo = 'aaa'  bar = 'bbb'

      同样具有可嵌套 可忽略 不完全解构和剩余运算符的写法,用法和数组的基本相似。比如

        剩余运算符:let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}; // a = 10  b = 20  rest = {c: 30, d: 40}

 4.箭头函数

    箭头函数的作用:函数的目的指向性更强,可读性更好。简化代码,提升开发效率。

    箭头函数的特点:

      1)不用写function

      2)不能使用new关键字,没有原型。只能作为函数使用

      3)参数不能重复命名

      4)返回值可以不写return,箭头函数返回对象时,要加一个小括号

      5)内部arguments this 由定义是外围最接近一层的非箭头函数的arguments和this决定其值

      6)箭头函数this为父及作用域的this,不能使用call apply等任何方法改变this

    箭头函数用=>符号来定义,箭头函数相当于匿名函数所以要用函数表达式的方法来写。

    箭头函数的基本写法,num1 num2是传入的参数,右边是函数的执行的代码,当代码只有一句的时候可以省略大括号。当参数只有一个的时候可以省略小括号。当不需要参数的时候直接写()。

let sum = (num1,num2) => num1 + num2;

    5.Map对象与set

      map是一个对象,用来存储内容的。创建方式有

      var map = new Map();

      map.abc = 123;

      map.bcd = 456; 输出map 是一个长度为0的对象 ,包含属性值abc :123  bcd:456 

      get()可以用来获取map中的指定元素,不存在就返回undefined

      size属性返回成员的数量

      clear() 清空

      set(key,value)  添加或修改元素

      遍历map对象

myMap.forEach(m=>{console.log(m)})

          删除  myMap.delete(keyString) 

   6.  for in     for of 

      for of不能循环对象但可以遍历数组,主要用来循环map对象

var arr = [1,2,3];
for(var index of arr){
    console.log(index)
}
输出 1 2 3

      for in 循环数组

var arr = [1,2,3];
    for(var index in arr){
        console.log(index)
    }
输出的是 0 1 2

      for in 循环对象

var obj = {
            a : "1",
            b : "2",
            c : "3"
        }
        for(var index in obj){
            console.log(index);
            console.log(obj[index])
        }
输出的是:a 1 b 2 c 3

  7.类 class

    在es6以前对象和类是不分的,如果要生成一个对象实例,要先定义一个构造函数。es6中可以通过class关键字定义类。写法更加的清晰。

class Person{//定义了一个名字为Person的类
    constructor(name,age){
        this.name = name;//constructor是一个构造方法,用来接收参数
        this.age=age;
    }
    say(){//这是一个类的方法,不要加function
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
}
var obj=new Person("tom",10);
console.log(obj.say());//我的名字叫tom今年10岁了

    类的本质上是一个函数,类自身指向就是构造函数。也可以通过prototype来添加属性方法。

    class没有变量提升,需要先定义再使用。

    类的继承用extends实现。

class Animal{
    constructor(){
        this.type = 'animal';
    }
    says(say){
        console.log(this.type + ' says ' + say);  
    }
}

let animal = new Animal();
animal.says('hello')  //animal says hello

class Cat extends Animal{
     constructor(){
          super();
          this.type = 'cat'
      }    
}
let cat = new Cat();
cat.says('hello'); //cat says hello

    首先定义一个类,里面包含constructor。constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。cat类通过extends关键字继承了Animal的所有属性和方法。super()相当于父类的this对象。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,如果不调用super方法,子类就得不到this对象。

  8. Promise 

    Promise就是一个对象,用来做异步消息处理的。AJAX异步请求

new Promise(function(resolve,reject){
            if(成功){
                resolve(成功的数据)
            }else{
                reject(失败的原因)
            }
        })

       状态: pending等待             ->      resolve(成功)
                                ->      reject(失败)

   then是promise状态发生改变的毁掉函数,可以链式调用。

var p1 = new Promise(function(resolve,reject){
            resolve(1)
})
//then调用以后又返回一个promise对象
p1.then(function(data){
    return data + 10;
},function(){
}).then(function(data){
    console.log(data)
    },function(err){
})
console.log(p1)
//输出了promise对象  和 11 因为data+10 resolve传入1

      

    

     

      

      

原文地址:https://www.cnblogs.com/wangzheng98/p/11271528.html