es6新增属性

变量声明

声明变量的有两种 分别是var和let
const声明常量并且在声明常量的时候必须赋值
注意:常量赋值之后是不能修改的

对象

在es5中使用的是语法糖 简言之就是已经写好 使用的时候直接添加就行了

  var obj = {
            name:"张三",
            age:30,

        }
        var obj2 = {};
        // 语法糖   别人写好了  直接添加就行
        obj2.name = "李四";
        obj["age"] = 20;
        var obj = new Object({name:"张三"});
        obj.name = "李四";

在es6中当属性名和属性值相同时就可以省略
比如

  var name = "张三";
        var obj = {
            // 属性名和属性值相同就可以省略
            name,
            say(){
                
            }
        }

解构赋值

es6允许按照一定的模式从数组和对象中提取值 并且对变量进行赋值

        var {name,age}=obj;
        var req = {
            query:{
                pageNO:1,
                pageSize:10
            }
        }
        // 设置了默认值 后面的对象中如果有对应的值 就会把默认值替换掉
        // var {pageNO,pageSize=20,total=100} = req.query;
        // console.log(pageNO,pageSize,total); // 1 10 100
        let x = 10,y = 20
        let[x,y] = [10,20];

        let[x=20]=[30] // 30
        let[q,b,c]="张三一" // 张 三 一

        // 剩余运算符
        let[a,b,...c]=[1,2,3,4];
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3 4
        

展开运算符

var arr = [1,2,3,4];
var arr1 = [5,6,7,8];
// ... 展开运算符
console.log([...arr1,...arr2]); // 1 2 3 4 5 6 7 8 
 var obj = {
            name:"张三",
            sex:"男"
        }
        var obj2 = {
            age:50,
            ...obj
        }
        obj2.name="李四" // 深拷贝
        console.log(obj); // 张三
        console.log(obj2); // 李四



         function f1(a,...b){
            console.log(a,b); // 13  4 5 6 7
        }
        f1(13,4,5,6,7);

合并对象

var obj1= {
            name:"张三"
        }
        var obj2 = {
            age:18
        }
        var obj3 = Object.assign({},obj1,obj2); // 深拷贝
       console.log(obj3) //Object { name: "张三", age: 18 }
​

箭头函数

在es6中新增箭头函数
语法:

var f = (x) =>{
    return x + 1
}

有一个参数的时候 参数的() 也可以省略不写
当函数里面只有一句代码 并且return的时候{} 和 return 也可以省略不写
语法:

var f = x => x + 1

箭头函数简写时 返回值如果是对象 需要用括号()包裹 没有参数或者有多个参数的时候 也需要添加()
语法:

var f = x => ({name:1})
var f1 = () => 1 + 1

箭头函数的this指向问题
1.在计数器中 箭头函数会保留this指向不被修改(普通函数的this指向window)
2.箭头函数的this是不能被修改的 call apply bind方法对箭头函数无效
3.例:

        var obj1 = {
            name: "陶大花"
        }
        var obj2 = {
            name: "陶二花"
        }
        obj1.add = function () {
            // this 指向上层(父作用域)的this 如果父作用域没有this  继续向上一层查找
            obj2.say = () => {
                console.log(this); // obj1
            }
        }
        obj1.add();
        obj2.say();

4.箭头函数中没有arguments

set

set对象储存的值每个值只能出现一次 可用作数组去重
例如:

  var s1 = new Set([1,2,2,2,2,3,4,5,67]);
        // console.log(([...s1]));
        // 数组去重
        // var arr = [1,2,3,3,3,3];
        // var res = [...new Set(arr)];
        // 如果 新添加的值在原来的对象中 新增无效
        s1.add(1);
        // 删除
        s1.delete(67);
        // 判断是否存在  返回值是 布尔值
        console.log(s1.has(67));
        // 删除所有
        s1.clear();
        console.log(s1); //Set[]

try.catch和throw

try尝试 catch捕获 throw异常抛出
例如:

   try{
        console.log(i / 0);
        }catch(error){
            console.log(error);
        }finally{ // 结束  无论错误与否 都会执行
            console.log("无论错误与否 都会执行");
        }
       function checkAge(age){
        if(age>200){
            // 抛出错误信息 停止代码
            throw new Error("年龄太大")
        }
        return age
       }
       console.log(checkAge(300));

symbol

在es6中 symbol代表着独一无二的值 可以用来定义唯一的值
例如:

 var sy1 = Symbol("张三");
 var sy2 = Symbol("张三");
console.log(sy1 === sy2); // false

类

在es5中如果一些公共属性是要写到原型里面 但是在es6中可以用 class来表示
例如:

class Person{
    // 接收生成的实例对象传递过来的参数
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log("111")
    }
}
new Person("张三",30).say();

继承

在es5中想要继承属性 需要将一些想要被继承的属性写到原型对象里面才可以 在es6中用extends即可完成
例如:

class Animal{
    constructor(a){
        this.type = "动物";
        this.a = a;
    }
    say(){
        console.log(this.a)
    }
}
// extends 继承
   class Dog extends Animal {
            constructor(v) {
                super(v) // super 指向父类的构造函数
            }

        }
        var d = new Dog("叫");
        d.say();

在子类构造函数使用super调用父类的构造函数 不需要考虑this指向