标签 es6 下的文章

js(es6) generator函数


<script>
    function * gen(){
        yield 'welcome';
        yield 'to';
        yield '吾爱博客';
    }

    let g1 = gen();
    
    // v1 = g1.next()
    // console.log(v1.value,v1.done)
    // v1 = g1.next()
    // console.log(v1.value,v1.done)
    // v1 = g1.next()
    // console.log(v1.value,v1.done)
    // v1 = g1.next()
    // console.log(v1.value,v1.done)

    for (const iterator of g1) {
        console.log(iterator)
    }

    console.log(...gen())
</script>

输出

welcome
to
吾爱博客
welcome to 吾爱博客

js(es6) Symbol基本类型


1、Symbol()不能New
2、Symbol()返回是一个唯一值,传说中用来做key的,定义一些唯一的或者私有的东西
3、Symbol是基本类型
4、for in 不能循环出来(私有的)

<script>
    let k = Symbol("Strive")
    let kk = Symbol("Strive")
    let json = {
        a:'apple',
        b:'banana',
        [k]:'aaa',
        [kk]:'bbb'
    }
    
    console.log(json[k],json[kk])

    //[k]不会循环出来
    for (const key in json) {
        if (json.hasOwnProperty(key)) {
            const element = json[key];
            console.log(key,element)
        }
    }
</script>

输出:

aaa bbb
a apple
b banana

js(es6)类的继承extends和super的使用


<script>
    //父类
    class Person{
        constructor(name){
            this.name = name
        }

        showName(){
            console.log(`父类名字:${this.name}`)
        }

    }
    //子类
    class Student extends Person{
        constructor(name,skill){
            super(name)
            this.skill = skill
        }
        showName(){
            super.showName();//父级的方法执行
            console.log(`子类名字:${this.name}`)
        }
        showSkill(){
            return `技能:${this.skill}`
        }
    }

    let s = new Student("吾爱博客","逃学")
    console.log(s.skill,s.name)
    s.showName()

</script>

js(es6) 类class constructor、static、set、get


<script>
    let funcName = 'test'
    class Student{
        constructor(name,age){
            this.name = name
            this.age = age
        }
        static StudentMsg(){
            console.log(`静态方法执行~~~`)
        }
        showStudentName(){
            console.log(`学生名字:${this.name}`)
        }
        showStudentAge(){
            console.log(`学生年龄:${this.age}`)
        }
        [funcName](){
            console.log(`这是一个动态方法名${funcName}`)
        }

        set setName(name){
            this.name = name
            console.log(`set Name:${this.name}`)
        }

        get getName(){
            console.log(`get Name:${this.name}`)
        }

    }

    let s = new Student("吾爱",18)
    Student.StudentMsg()
    s.showStudentName()
    s.showStudentAge()
    s[funcName]()
    s.test()
    
    s.setName = `吾爱博客`
    s.getName
</script>

es6、js中 var 和 let的区别


先来看一个var案例:

<script>
    if (true) {
        var a = 12
    }
    alert(a);
</script>
输出 12

为什么他会输出12;学过java的我表示 应该undefined啊!
因为 var 的作用域只有全局和函数;没有块级作用域!

第一个对应的let案例:

<script>
    if(true){
        let a =12;
    }
    alert(a);
</script>
输出 报错:a is not defined

因为 let 的作用域有全局和函数;又有块级作用域!


来看第二个var案例:

<script>
    var a =12;
    function fn(){
        alert(a);
        var a = 5;
    }
    fn();
</script>
输出 undefined

这个应该是语言的特性(变量提升),应该要这样“读”:

<script>
    var a =12;
    function fn(){
        var a;
        alert(a);
        a = 5;
    }
    fn();
</script>
输出 undefined

第二个对应的let案例:

<script>
    let a =12;
    function fn(){
        alert(a);
        let a = 5;
    }
    fn();
</script>
输出 报错:Cannot access 'a' before initialization

在代码块内,只要let定义变量,在之前使用,都是报错
必须先定义,再使用


来看第三个var案例:

<script>
   var p = 12;
    //...
   var p = 6;
   alert(p)
</script>
输出 6

var 定义的变量可以重复覆盖

第三个对应的let案例:

<script>
   let p = 12;
    //...
   let p = 6;
   alert(let)
</script>
输出 报错:Identifier 'p' has already been declared

let 定义的变量不可以重复,注意:fro循环中是 父子块级作用域关系