ES6

ES6的基本语法

1. let+const命令

ES6 新增了let和const命令，用来声明变量。它的用法类似于var，

Es5 声明变量var 存在变量提升

let声明的变量
1.局部作用域  
2.不存在变量提升  
3.不能重复声明
4.可以被修改

let a = 2;
console.log(a);

const 声明常量 
1.局部作用域  
2.不存在变量提升  
3.不能重复声明  
4.一般声明不可变的量

const a = 10
console.log(a)

let 可以被修改  const一旦声明变量立刻赋值
建议:默认情况下使用const声明变量,只有你知道变量需要被修改的时候使用let	

​ ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。　　

2. 模板字符串

模板字符串就是两个反引号,括起来的字符串

var或者let声明的变量都可以被模板字符串直接通过${变量名}来使用

let aa = "chaoren"
let ss3 = `你好${aa}`;

ss3
"你好chaoren"

3. 解构

数组解构 它是对赋值运算符的一种扩展. 数组还有对象来进行操作

const [a, b, c] = [1, 2, 3]; //完全解构
const [name, age, f] = ['张三', 18]; //不完全解构只取前两个第三个为undefined

对象解构

const {
	name,
	age
	} = {
	name: "小马哥",
	age: 18
	}
console.log(name, age);

剩余运算符

    // 剩余运算符
    const {
      a,
      ...res
    } = obj;
    console.log(a, res);

函数的参数解构以及默认值

    function fn({
      e,
      f = 10
    }) {
      console.log(f);

    }
    fn({
      e: 20,
      f: 20
    })

传多个参数

    function fn(...args) {
      // console.log(arguments);
      // const arr = [...arguments];
      console.log(args);
      
    }
    fn('a','b','c');

4.箭头

ES5与ES6的区别

//ES5写法
function add(x){
    return x
}
add(5);
//匿名函数
var add = function (x) {
    return x
};
//ES6的匿名函数
let add = function (x) {
    return x
};
add(5);
//ES6的箭头函数,就是上面方法的简写形式
let add = (x) => {
    return x
};
console.log(add(20));

//更简单的写法，但不是很易阅读
let add = x => x;
console.log(add(5));
多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()
let add = (x,y) => x+y;

//es5对象中封装函数的方法
var person1 = {
    name:'超',
    age:18,
    f1:function () {  //在自定义的对象中放函数的方法
        console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
        console.log(this.name)  // '超'
    }
};
person1.f1();  //通过自定对象来使用函数

//ES6中自定义对象中来封装箭头函数的写法
let person2 = {
    name:'超',
    age:18,
    f1: () => {  //在自定义的对象中放函数的方法
        console.log(this); //this指向的不再是当前的对象了，而是指向了person的父级对象(称为上下文)，而此时的父级对象是我们的window对象，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
        console.log(window);//还记得window对象吗，全局浏览器对象，打印结果和上面一样：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
        console.log(this.name)  //啥也打印不出来
    }
};
person2.f1(); //通过自定对象来使用函数

//而我们使用this的时候，希望this是person对象，而不是window对象，所以还有下面这种写法
let person3 = {
    name:'超',
    age:18,
    f1(){  //相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法，写起来也简单，vue里面会看用到这种方法
        console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
        console.log(this.name)  //'超'
    }
};
person3.f1()

5.对象的扩展

  <script>
    const name = '马哥',age = 18;
    // 能少写就少写
    const person = {
      // 对象属性简写
      // 如果对象的key和value是一样的,可以简写一个
      name,
      // name:name,
      age,
      // 方法也可以简写
      fav(){
        console.log(this.name);
      }
      // fav:function(){
      //   console.log(this.name); 
      // }
    }
    console.log(person);
    person.fav();
    
  </script>

6.类

<script>
    //es5写类的方式
    function Person(name,age) {
        //封装属性
        this.name = name;
        this.age = age;
    }
    //封装方法，原型链
    Person.prototype.f1 = function () {
        console.log(this.name);//this指的是Person对象, 结果：'超'
    };
    //封装方法，箭头函数的形式写匿名函数
    Person.prototype.f2 = ()=>{
        console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}  this指向的是window对象
    };

    var p1 = new Person('超',18);
    p1.f1();
    p1.f2();
    //其实在es5我们将js的基本语法的时候，没有将类的继承，但是也是可以继承的，还记得吗，那么你想，继承之后，我们是不是可以通过子类实例化的对象调用父类的方法啊，当然是可以的，知道一下就行
</script>

es6里面的类怎么写

    class Person{
      // 静态属性 静态属性和方法 由构造函数Person对象调用,实例属性和方法,由实例对象所调用
      static a = 10;
      constructor(name,age){
        this.name = name;
        this.age = age;
      }
      fav(){
        console.log(this.name);
        
      }
      static fn(){
        console.log('fn');
        
      }
    }
    const p1 = new Person('大马哥',28);
    console.log(p1);
    Person.fn();
    console.log(Person.a);