1.准备工作

1.1下载vscode与环境配置

(1)vscode与插件下载

官网：https://code.visualstudio.com/

安装插件。Chinese,Live Server(模拟tomcat功能)，Vetur&vue-helper(支持vue的开发，方便其使用)。

(2)创建工作区

在本地创建文件夹，取名vscodeworkspace。在vscode中点击:文件->打开文件夹，打开该文件夹。然后点:文件->将工作区另存为，如下图另存工作区。

之后想要打开该工作区只需要点:文件->打开工作区即可。

(3)验证插件功能

按照下图所示目录结构新建文件。

在html中编写。

<h1>hello,world！</h1>

保存文件后，右键选择open with live server。将直接通过浏览器访问该html页面，这说明live server安装成功了。如果每页该选项请检查是否成功安装。如果选择该选项而无法访问到浏览器，可能与电脑配置相关，可以手动访问127.0.0.1:5500/vs0101/demo01/01.html

1.2 前置知识

javascript,jquery,html。

关于html可以看我的这篇博客速成:一小时速成html_半旧518的博客-CSDN博客.

2.ES6入门

2.1 什么是javascirpt

JavaScript是世界上最简单的一门脚本型语言。Brendan Eich祖师爷十天开发出来的。

2.2 什么是ES6

ECMAScript是javascript的一种标准，目前常用es6开发，其语法比es5更加简洁，但是目前大部分浏览器只支持es5，开发环境需要进行一定的处理提供语法支持将es6转换为es5。

2.3 定义变量与常量

(1) let定义变量

在文件夹vs0101下新建es6demo\01.html。

es6中使用let定义变量，let定义的变量具有作用范围而js中的var定义变量每有作用范围，查看示例代码。

<script>
    //es6如何定义变量，定义变量特点
    // js定义变量： var a =10;
    // es6写法定义变量： 使用关键字 let；let a = 10;

    {//代码块
        var a = 10;
        let b = 20;
    }
    //在代码块，外面输出变量
    console.log(a);
    console.log(b);

</script>

在浏览器的控制台中验证结果。

let定义的变量也不能够重复定义，而var则无此约束。

<script>
    // var 可以声明多次
	// let 只能声明一次
    var m = 1;
    var m = 2;
    let n = 3;
    let n = 4;
    console.log(m);
    console.log(n);
</script>

浏览器验证，控制台输出。

Uncaught SyntaxError: Identifier 'n' has already been declared

可以发现，es6中提供的语法更为严谨。

(2) const定义常量

<script>
    const PI = "3.14"; //Uncaught TypeError: Assignment to constant variable.
    // 常量不允许重复赋值
    PI = 3;

    // 常量必须进行初始化
    const AA // Uncaught SyntaxError: Missing initializer in const declaration
</script>

2.4 解构模板和生命对象

(1) 解构数组

es6可以对数组进行解构。这可以简化我们对于变量赋值、数组操作等的编程。

<script>
    //数组解构
        
        // 传统
        let a=1 ,b = 2, c= 3
        console.log(a,b,c)
    
        // ES6
        let [x,y,z]=[1,2,3]
        console.log(y,z,x) //2,3,1
    
</script>

(2) 解构对象

还可以对对象进行解构，可以方便我们对对象的编程。

<!-- 结构对象 -->
<script>
    user = {name:"wz",age:20,sex:"male",email:"wz@qq.com"}
    // 传统方式获取对象的属性
    name1 = user.name
    email1 = user.email
    console.log(name1 + "==" + email1)

    // es6中获取对象的属性
    let{name, email} = user //注意要使用结构对象，需要保证所取的变量命名与对象属性名一致
    console.log(name + "**" + email) 

</script>

(3)简化字符串编程

使用符号`可以实现加强版的字符串，他可以简化字符串的换行。

<script>
    let str = `Hey,
    can you stop angry now?`
    console.log(str);
   
</script>

打印结果。

Hey,
    can you stop angry now?

符号`还可以实现在字符串中引用变量表达式。

<script>

    let name = 'wz'
    let age = 18
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    console.log(info);
    //My Name is wz,I am 19 years old next year.

</script>

甚至还可以调用函数。

<script>

    function f(){
        return 'have fun!'
    }
    let str = `the game start,${f()}`
    console.log(str);
    //the game start,have fun!

</script>

(4)简化对象创建

解构也可以方便对象的创建。

<script>
    
    const age = 12
    const name ='achang'

    //传统
    const person1 =  {age: age,name: name} 
    console.log(person1);

    //ES6
    const person2 = {age,name}
    console.log(person2);

</script>

2.5 方法定义

<script>

    //传统
    const person1 = {
        sayHi:function(){
            console.log("hi");
        }
    }
    person1.sayHi();//hi

    //ES6
    const person2 = {
        sayHi(){
            console.log("h1");
        }
    }
    person2.sayHi();//h1

</script>

2.6 对象扩展运算符

(1)复制对象

<script>
    let person1 = {"name":"wz", "age":"18"}
    let person2 = {...person1}
    console.log(person2)
</script>

(2)合并对象

<script>

    //合并对象
    let age = {age:15}
    let name = {name:'wz'}
    let person2 = {...age,...name}
    console.log(person2); //{age:15,name:'wz'}

</script>

2.7 箭头函数

<script>
    // 传统
    let f1 = function(m) {
        return m + 1
    }
    console.log(f1(2))

    // es6
    let f2 = m => m + 1
    console.log(f2(3))
</script>