ES6特性

1. ES6 变量声明:var let,let 是为了取代var ,但是兼容性不好

var 只有一层作用域,let有多层作用域

{}是为了声明作用域
    {
        let a = 10;
            var b =15;
        console.log(a,b);
    }
    console.log(b);
    console.log(a);//找不到

2. 常量:不能被重复定义

const PI = "3.14159265358979323846";

3. 字符串模板

    let name = "张三";
    let str2 = `姓名是${name}年龄是19`;

4. 对象简写

    var name = "张三";
    var obj1 = {
        name;
        eat(){
         console.log("吃");
        }
     }

5 . 工厂模式:防止变量污染

function Factory(height){
    //obj人类;
    var obj = {};
    obj.height = height;
    obj.name = "张三";
    obj.age = 20;
    obj.hobby = function(){
        console.log("喜欢");
    return obj;
}
var newFactory = Factory("178cm");

6. 箭头函数

// ES5写法(有参函数)
var test = function(str){
    return str;
}

// ES6写法 必须是匿名函数
var test = (str) =>str;
console.log(test("hello"));


// ES5写法(无参函数)
var test1 = function(){
    var str = "你好";
    return str;
}

// ES6写法
var test1 = () =>{
    var str = "你好";
    return str;
}

// 作用域和对象冲突:用小括号包裹返回对象,否则当成作用域解析,报错
var test = () =>({
    name:"张三",
    age:17,
});

7. 箭头函数的this穿透

var obj = {
    name:"张三",
    age:19,
   // es5 this指向该对象
    action:function(){
        console.log(this);
        }
    // es6 箭头函数 this指向windod this向上一层穿透
    action:() => {
          console.log(this);
    }
}

8. 隐藏参数

// ES5 隐藏参数
function test(){
    console.log(arguments);
}
test("1111","2222");

// ES6 展开运算符
function test1(...arr){
    console.log(arr);
}
test1("3333333","44444");

9. 类

class Person{
    //类最开始在加载的时候执行
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    hobby(){
        console.log("喜欢");
    }
    showName(){
        console.log(this.name);
    }
}
var zs = new Person("zs",28);
console.log(zs.age);
zs.showName();
            
//类的继承
class Student extends Person{
    constructor(name,age){
            //super传参,继承属性
            super(name,age);
    }
    action(){
        console.log("我是action函数");
    }
}
var newStudent = new Student("李四",222);
console.log(newStudent.name);
newStudent.hobby();

你可能感兴趣的:(ES6特性)