分分钟带你欣赏ES6语法糖

let , const关键字

var

看习惯了java, 看js真的是忍不住想笑,比如说这个var,它太自由了,自由到{}根本限制不住它的生命周期

js的var关键字,无论在何处声明,都会被视为声明在函数的最顶部,不在函数里面的就被视为在全局的最顶部,这就是所谓的变量提升

function aa(bool) {
    if (bool) {
        var test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

比如上面的代码, 他就不会报错,而是说undifined, 因为var的变量提升, 相当于下面那样:

function aa(bool) {
    var test;
    if (bool) {
        test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

let

换成let关键字,就是普通变量, 它的生命周期被限制在 { }

function aa(bool) {

    if (bool) {
        let test = "hello";
    } else {
        console.log(test);
    }
}

const

const 声明常量, 值不允许被修改,而且必须初始化

function aa() {
    let a = 'abc';
    const test = a;
    a = "world";
    alert('a=='+a);
    alert('test=='+test);
}
aa();

结果就是 abc world

如果尝试直接对test赋值, 编译器会报错的

模板字符串的拼接

这样取值完全没问题, 但是js的设计者认为他 + 太多了,low爆了

console.log(name1 + "喜欢" + name2); 

于是: ${} , 注意啊, 是esc下面的键位

console.log(`${name1}喜欢${name2}`); 

方法入参的默认值

如果我们不给入参传值, 默认就是空, 一用就报错, 所以参数需要默认值是很有必要的

这时候, 用户传递进来值了,使用的就是用户传递进来的值, 在java中想干这个事,得在参数位置加老长的注解

function sayName(name = "张三") {
    alert(name);
}

箭头函数

es6的箭头函数和java8的lambda表达式如出一辙, 因为学了java8, 所以es6的箭头函数也是秒上手了, 包括流式的操作也如出一辙

对象的简写和解构

原来,如果方法想返回一个对象,需要这样写

function people(name, age) {
return {
    name: name,
    age: age
}
}

在es6中,如果属性和值相同 ,就变成了这样

function people(name, age) {
    return {
        name,
        age
    }
}

动态的添加属性, 在java想都别想,

let p = {name: '张三', age: 680};
alert(p.name);
alert(p.age);

• 添加属性

p.address = '山东';

• 添加函数

p.add = () => {};

其实js这么自由也不一定是好事, 起码不能乱点了, 它也不给报错, 一不留神就多了个属性

组装对象或数组SpreadOperator ...

const color = ['red', 'blue'];
const colorful = [...color, 'green']
// 现在 colorful数组就是 三个颜色的数组 , 同样换成{}  也一样

Import 和 export

这个特性vue用的最多, 模块化的感觉很强烈

let fun = function () {
    console.log("fun")
}
export {fun}


// 在第二个文件 导入
import fun from "./fun";
// 然后使用
fun()

面向对象的编程模式-类

class person {
    // 构造函数
    constructor(name) {
        this.name = name; // 不提前定义变量? 不存在的,直接点就行了老铁
    }

    // 方法
    sayHello() {
        console.log("hello");
    }
}

// 类的继承
class Student extends person {
    constructor(name) {
        super(name);
    }

    sayHaha() {
        console.log("haha");
    }
}

使用:

它并不能写 父类引用指向子类对象

//person stu = new Student('zhangsan');  
var stu = new Student('zhangsan');
stu.sayHaha();