ES6语法

ES6（ECMAScript 6）是JavaScript的一个版本，也被称为ES2015。它于2015年发布，引入了许多新的语法和特性，使JavaScript更加强大、便捷和易用。

以下是ES6常用的一些语法和特性：

1. 声明变量的关键字变化：使用let和const来声明变量，取代了原来的var关键字。

2. 箭头函数：使用箭头（=>）定义函数，简化函数的写法。

3. 模板字符串：使用反引号（`）来创建字符串模板，可以方便地插入变量和换行符。

4. 解构赋值：可以从数组或对象中提取值，并赋给对应的变量。

5. 默认参数：在函数定义时，可以为参数设置默认值。

6. 扩展运算符：使用三个点（...）可以将一个数组展开，或将多个参数合并成一个数组。

7. 类和对象：引入了类的概念，可以使用class关键字来定义类，同时也支持面向对象的继承和封装。

8. 模块化：通过export和import关键字，可以将代码分割成多个模块，方便管理和重用。

9. 简化的对象字面量：可以直接在对象中使用变量名作为属性名，简化对象的定义。

10. Promise：引入了Promise对象，用于处理异步操作，解决了回调地狱的问题。

这些只是ES6的一部分特性，ES6还有很多其他的语法和功能，使JavaScript变得更加现代化和强大。ES6的语法在现代的前端开发中被广泛使用，提高了开发效率和代码质量。

VUE基于是ES6的，所以在使用Vue之前我们需要先了解一下ES6的语法。

1.什么是ECMAScript6

ECMAScript是浏览器脚本语言的规范，基于javascript来制定的。为什么会出现这个规范呢？

1.1.JS发展史

• 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。

• 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。

• 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。

1.2.ECMAScript发展历史

• 97年而后，ECMAScript就进入了快速发展期。1998年6月，ECMAScript 2.0 发布。

• 1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了

• 2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。

  一边是以 Adobe(flash,ps), Mozilla(火狐), Opera(浏览器) 和 Google为主的 ECMAScript 4 工作组。

  一边是以 Microsoft(微软)和 Yahoo(雅虎) 为主的 ECMAScript 3.1 工作组。

  ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本

• 2009年12月，ECMAScript 5 发布。

• 2011年6月，ECMAScript 5.1 发布。

• 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。

• ES6就是javascript用的最多语言规范.被各大浏览器厂商实现了.

2.ES6语法规范

2.1.let & var

都是用来声明变量， let相较于var，他是块级的(局部)。

for(var i == 0 ; i < 10 ; ++){
    console.debug(i);
}
console.debug("i="+i);	//正常打印
------------------------------------
for(let i == 0 ; i < 10 ; ++){
    console.debug(i);
}
console.debug("i="+i);	//这里会报错，i会找不到

2.2.const

const声明常量不能修改  ， 如同Java的final修饰符

const c = 4;
c = 5;	//编译报错，不能修改

2.3.解构表达式

简单理解，解构表达式就是将数组的元素或者对象的属性向变量赋值的一种简易写法。

数组赋值

let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]);	//以前的取值
------------------------------------

let [a,b] = arr;	//结构表达式数组赋值,定义了变量a,b并按照索引赋值。
console.debug(a,b);	

对象赋值

var user = {
    id: 1,
    username:"DT",
    age: 31
}
--------------------------------------
console.debug(user.id,user.username,user.age);	//以前的取值
--------------------------------------
var {id,username,age} = user;	//结构表达式，对象赋值，按照属性名赋值。
console.debug(id,username,age);

方法参数赋值

var user = {
    id: 1,
    username:"DT",
    age: 31
}
--------------------------------------
function showUser({id,username,age}){ 	//结构表达式，方法参数赋值，按参数名赋值。
	console.debug(id,username,age);
}
showUser(user);	//把user对象作为参数传给showUser方法	

注意：数组用 [ ] 赋值，对象用 { } 赋值

2.4.箭头函数

箭头函数是函数的一种简写

var user = {
    username:"DT",
    age:31,
    showUser:function(){	//以前定义方法的方式
        console.debug(this.username+" "+this.age);
    },
    //--------------------------------------
    showUser2:()=>{	//es6定义方法的方式
        //注意：这里的this指的是window对象了。不能用this.usename
		console.debug(user.username+" "+user.age);        
    },
    showUser3(){	//简写
        console.debug(user.username+" "+user.age);        
    }
}
user.showUser();
user.showUser2();
user.showUser3();

2.5.Promise对象

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

  /**=======================================
     Promise 异步请求
     =======================================**/
    //1.执行异步请求
    const p = new Promise((resolve, reject) =>{
        //成功，调用 resolve 
        //失败，调用 reject
        // 这里我们用定时任务模拟异步
        setTimeout(() => {
            const num = Math.random();
            // 随机返回成功或失败
            if (num < 0.5) {
                //2.调用成功的结果回调
                resolve("成功！num:" + num)
            } else {
                //3.调用失败的结果回调
                reject("出错了！num:" + num)
            }
        }, 300)
    })
    // 调用promise
    p.then(function (msg) {
        //2.调用成功的结果回调
        console.log(msg);
    }).catch(function (msg) {
        //3.调用失败的结果回调
        console.log(msg);
    })

2.6.模块化

模块化通常是把一段JS代码通过export导出为公共的模块，其他地方通过import导入使用，实现代码复用的目的。

• 定义三个文件

        main.html
        main.js
        util.js

util.js

--------------方式一--------------------------------
export const util1 = {
    sum(a , b){
        return a + b;
    }
}
--------------或者---------
const util2 = { //面向对象思维
    /*sum:function (a,b){
        return a+b;
    }*/
    sum(a,b){
        return a+b;
    }
}
export {util2};
--------------方式二：导出多个----------------------
const util3 = {
    sum(a , b){
        return a + b;
    }
}

const util4 = {
    sum(a , b){
        return a + b;
    }
}
export {util3,util4};	//导出多个
---------------方式三：默认导出--------------------------
export default{
    sum(a,b){
        return a + b;
    }
}

main.js

//方式一: 的导入
import {util} from './util.js';
//util.sum(1,1)

//方式二：多个导入
import {util3,util4} from './util.js';

//方式三：默认导入
import {名字任意} from './util.js';

main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<script src="./main.js" type="module"></script>
<script>
    alert(util.sum(1,1));   //运行会报错，浏览器不支持，要使用webpack之后才能运行
</script>
<body>

</body>
</html>