es6学习记录

1、let和const

1）let所在代码块形成作用域，let声明的变量只在其作用域中有效。

2）不存在变量提升

3）暂时性死区 ：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

4）相同作用域内不允许重复声明相同变量，包括参数。

5）const:声明常量，不可再进行赋值操作。

2、变量的解构赋值

按照一定模式，从数组和对象中提取值，对变量进行赋值，称之为解构。

let [a,b,c] = [1,2,3]

则abc分别对应123；

如果解构失败，则变量的值为undefined；

3、箭头函数

箭头函数只能替换函数表达式，不能替换函数声明。

//ES5
var fun = function(a,b) {
  return a+b;  
}

//ES6
let fun = (a,b)=>a+b;

//ES5
var foo = function(){
  var a= 10;
  var b = 20;
   return a+b;  
}

//ES6
let foo = () =>{
  let a = 10;
  let b = 20;
  return a+b;  
}

注意：箭头函数内部无this；

4、模板字符串

es5中字符串的拼接是使用+号，看看es6：

//ES5
var a = 10;
var b = 20;
var str = a+"+"+b+"="+(a+b);

//ES6
let a = 10;
let b = 20;
let str = `${a}+${b}=${a+b}`;

5、函数默认参数

//ES5
function add(a,b){
   var A = a || 10;
   var B = b || 20;
    console.log(A+B);
}

add(); //当没有传参的时候，AB的值默认取10和20；

//ES6
function add(a=10,b=20) {
    let A = a;
    let B = b;
    console.log(A+B);
}

add(); // 30

　6、展开运算符

let arr1 = [1,2,3];
let arr2 = [...arr1,4,5,6];
console.log(arr2); // [1,2,3,4,5,6]

7.class类

先上一波代码看看：

class a {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }  
  render() {
    console.log(1);    
  }    
}    

class b extends a {
  constructor(m,n) {
    super();
    this.m = m;
    this.n = n;
  }
  render() {
    console.log(2);
  }
}