vue学习（一）ES6常用语法

1 ES6常用语法

1.1 变量提升

例①

# 变量提升
<div id="app">

</div>

<script>
    console.log(age);    # undefined
    var age = 18;
    console.log(age)     # 18
</script>

例②

# 变量提升
<div id="app">

</div>

<script>
    function aa() {
        console.log(xiaoqiang)    # undefined
        if (1){
            var xiaoqiang = 'qiang';
            console.log(xiaoqiang)    # qiang
        }
    }
    aa()
</script>

例③

# 例②的引申   let
<body>
<div id="app">

</div>

<script>
    function aa() {
//        console.log(xiaoqiang);    # 报错
        if (1){
            let xiaoqiang = 'qiang';   # let 块级作用域
            console.log(xiaoqiang)    # qiang
        }
    }
    aa()
</script>
</body>

例④

<body>
<div id="app">

</div>

<script>
    const s12 = 'high';
    console.log(s12)    # high
-------------------------------
    const s12 = 'high';
    const s12 = 'high1';

    console.log(s12)   # 报错
</script>
</body>
# const 定义一个不变的变量

1.2 模板字符串

<body>

<div id="app">

</div>

<script>
# 反引号与一般引号的区别
    var ele = document.getElementById('app');
-------------------------------------
    ele.innerHTML = '<ul>' +
        '<li>1</li>' +
        '<li>2</li>' +
        '<li>3</li>' +
        '</ul>';
-------------------------------------
    ele.innerHTML = `
                    <ul>
                    <li>1</li>
                    <li>2</li>    # 形式一
                    <li>3</li>
                    </ul>`
-------------------------------------
    var xiao = 'qiang';
    var age = 18;
    var hobby = 'learn';
    ele.innerHTML = `
                    <ul>
                    <li>${xiao}</li>
                    <li>${age}</li>  # # 形式二
                    <li>${hobby}</li>
                    </ul>`

</script>
</body>

1.3 数据的解构

<script>
    # 对象
    let obj = {
        name : 'xiaoqiang',
        age:18
    };
# 类似于python的**打散
    let {name,age}=obj;     # 要用一个对象{}来接收

    console.log(name);
    console.log(age)
</script>

<script>
    # 数组
    let arry = ['s','12'];
    let [a,b] = arry;

    console.log(a);
    console.log(b)
</script>

1.4 箭头函数

* 1
<script>
    let jiantou = x => x+1;
    console.log(jiantou(5))    # 6
// 省略了function关键字
// 省略了return返回值
</script>

* 2
<script>
function aa() {
    console.log(this)    #  this的用法
                         #  打印出的是window
}
aa()
</script>
# 函数的调用的全局的 window调用

* 3
<script>
    function aa() {
        console.log(this) # {name: "xiaoqiang", aa: ƒ}
    }
    aa();

    let obj = {
        name : 'xiaoqiang',
        aa:aa
    };
    obj.aa()
</script>

* 4
<script>
    function aa() {
        console.log(this) ###
    }
    aa();

    let obj = {
        name : 'xiaoqiang',
        aa:aa
    };
    let obj2 = {
        name: 'xiaoxiaoqiang',
        obj:obj
    };

    obj.aa();
    obj2.obj.aa()
</script>
# this 取决于函数最近的调用者

1.5 类

* 1 单纯的类
<script>
    # 定义类要是class，一定要加constructor
    class Student{
        constructor(){
            this.name = 'xiaoqiang';

        }
        says(say){
            console.log(this.name  + 'says'+ say)
        }
    }
    // 实例化 要加 new；调用
    let xiaoxiao = new Student();
    xiaoxiao.says('I love China')
</script>

* 2 类的继承
<script>
----------------------------------------
    class Student{
        constructor(){
            this.name = 'xiaoqiang';

        }
        says(say){
            console.log(this.name  + 'says'+ say)
        }
    }
    // 实例化 要加 new；调用
    let xiaoxiao = new Student();
    xiaoxiao.says('I love China')
----------------------------------------
## ↓ 继承 constructor会报错，要加super
    class Stu extends Student{
        constructor(){
            super();
            this.name = 'ganggang'
        }
    }
    let gang = new Stu()

    gang.says('Me too')
</script>

1.6 模块

后期补