ES6

ES6新特性-let&const

使用const表示常量（声明之后不允许改变，一旦声明必须初始化，否则会报错）

//ES6 常量 不能修改const b=2;b=3;//Uncaught TypeError: Assignment to constant variable.console.log(b);

使用var声明的变量往往会越域，而let声明的变量有严格的局部作用域

// ES6// var声明的变量往往会越域// let声明的变量有严格的局部作用域{var a=1;let c=3;}console.log(a);console.log(c);//Uncaught ReferenceError: c is not defined

let只可以声明一次，var可以声明多次

//var可以声明多次，let只可以声明一次var a=1var a=3let b=2let b=4console.log(a)console.log(b)//Uncaught SyntaxError: Identifier 'b' has already been declared

let不会变量提升,变量提升的意思是可以先使用变量，再声明

// var会变量提升
// let不会变量提升console.log(a)var a =1console.log(b)let b =2

ES6新特性-解构&字符串

数组的解构：

//数据的解构let arr=[1,2,3];let a=arr[0];let b=arr[1];let c=arr[2];console.info(a,b,c);//ES6:数组的解构表达式let[aa,bb,cc]=arr;console.info(aa,bb,cc);

对象的解构：

let person={name:'徐庶',age:11,hobbies:['唱歌','跳舞']}let name=person.name;console.info(name)//ES6:对象的解构表达式let{name,age,hobbies}=person;console.info(name,age,hobbies);

字符串模板：直接将html放在``中

let html="<div>"+"<a>你好</a>"+"</div>";//ES6:字符串模板
let esHtml=`<div><a>你好</a></div>`;
console.info(esHtml);

字符串扩展：

//字符串扩展
let str="hello.vue";
console.log(str.startsWith("hello"))//true
console.log(str.endsWith(".vue"))//true
console.log(str.includes("e"))//true
console.log(str.includes("hello"))//true

字符串插入变量和表达式，变量名可以写在 $,$ {}中可以放入js表达式

 let person={name:'徐庶',age:11,hobbies:['唱歌','跳舞']}let{name,age,hobbies}=person;function fun(){return "这是一个函数"}//ES6:字符串插入变量和表达式，变量名写在${},${}中可以放入js表达式console.info(`名字是${name},年龄是${age},爱好是${hobbies},这个函数的返回值是${fun()}`);

ES6新特性-函数优化

函数参数默认值：直接括号内设置默认值

//1.函数的参数默认值 ES之前function add(a){if(!a){a=1;}console.log(a);}add();//ES6:函数的参数默认值function add(a=1){console.info(a);}add();

可变长度参数：在括号内的参数前添加…

//2.可变长度参数 ES之前function add(a){console.info(a);}add([1,2]);//ES6:可变长度参数function add(...a){console.log(a);}add(1,2,3);

参数解构

//ES6:参数解构
let nums={a:1,b:2}function add({a,b}){console.log(a+b);}add(nums);

箭头函数：单行的时候更简洁，不需要return，多行的时候需要。

//箭头函数 lambda =>   ES6之前function add(a,b){return a+b;}console.info(add(1,2));//ES6:箭头函数let add=(a,b)=>{let c=a+bconsole.log(c);}add(2,2);

ES6新特征-对象优化

对象的内置函数
- keys()显示对象的属性
- values()显示属性的值
- entries()显示对象的属性和值
- 对象合并函数assign()
  - 说明：第一个参数是需要合并的对象其他参数会合并到第一个参数上面（如果有相同的后来者居上）

// 1.对象的内置函数let person = {name: "jack",age: 21,language: ['java', 'js', 'css']}console.log(Object.keys(person));//["name", "age", "language"]console.log(Object.values(person));//["jack", 21, Array(3)]console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]// 对象合并const target = { a: 1 };const source1 = { b: 2 };const source2 = { a:4,c: 3 };// 参数说明 第一个参数是需要合并的对象   其他参数会合并到第一个参数上面// 如果有重复的属性， 会以后面的进行覆盖Object.assign(target, source1, source2);console.log(target);//{a:4,b:2,c:3}

声明对象简写

对象属性的简写：属性名和引用的变量名是相同的就可以省略赋值

let name="徐庶";
let age=11;// ES6之前
let person={name:name,age:age
}// ES6: 对象声明属性的简写 ：  如果属性名和引用的变量名是相同的就可以省略赋值，它会自动调用相同名字的变量
let person={name,age
} 
console.info(person)

对象中函数的简写：使用箭头函数声明，如果要调用本对象的属性this会失效，需要使用对象.属性的方式

// ES: 对象中函数的简写方式
let person={name:"徐庶",
// ES6之前eat: function(food){console.info(this.name+"吃了："+food)},
// ES6：通过箭头函数声明，   如果要调用本对象的属性this指向window， 需要使用对象.属性eat2: (food) => console.info(person.name+"吃了："+food),
//第三种方式，不写冒号eat3(food){console.info(this.name+"吃了："+food)}
}
person.eat("米饭");
person.eat2("海鲜");
person.eat3("水果");

对象扩展运算符：拷贝与合并（…）

//对象的扩展运算符//1.拷贝对象（深拷贝）let person={name:"xushu",age:18,wife:{name:"杨迪"}};let person2={...person};console.info(person2);//2.合并对象const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };let newObject={...target,... source1,...source2};console.info(newObject);

ES6新特性-promise异步编排

使用ES之前的ajax请求方式:

//使用函数简化，但是还是嵌套的方式
function myAjax(url, callback){$.ajax({url: url, success: function (result) {callback(result);}});}
myAjax("http://localhost:8811/user/existUsername",function(result){if(result.data){myAjax("http://localhost:8811/user/existPhone",function(result){})}})//传统的ajax请求方式用户名是否存在   $.ajax({url: "http://localhost:8811/user/existUsername",success: function (result) {if (result.data) {alert('用户名不存在！')// 手机是否存在$.ajax({url: "http://localhost:8811/user/existPhone",success: function (result) {if (result.data) {alert('手机不存在！')// 注册用户$.ajax({url:"http://localhost:8811/user/registryUser",success: function (result) {if (result.data) {alert(result.message)}},error: function (err) {alert("异常" + err)}})} else {// 手机号已存在alert(result.message)}},error: function (err) {alert("异常" + err)}})} else {// 用户名已存在alert(result.message)}},error: function (err) {alert("异常" + err)}})

promise异步编排：

当执行到resolve函数时，会调用.then()判断result
当执行到reject函数时，会调用.catch()判断err

new Promise((resolve, reject) => {// 1. 请求用户名是否存在$.ajax({url: "http://localhost:8811/user/existUsername",success: function (result) {resolve(result);},error: function (err) {reject(err);}})})// 2.手机是否存在.then(result => {return new Promise((resolve, reject) => {if (result.data) {alert('用户名不存在！')$.ajax({url: "http://localhost:8811/user/existPhone",success: function (result) {resolve(result);},error: function (err) {reject(err);}})} else {alert(result.message)}})}).then(result => {return new Promise((resolve, reject) => {if (result.data) {alert('手机不存在！')// 注册用户$.ajax({url: "http://localhost:8811/user/registryUser",success: function (result) {resolve(result);},error: function (err) {alert("异常" + err)}})} else {// 手机号已存在alert(result.message)}});}).then(result => {if (result.data) {alert(result.message)}}).catch(err => {alert('服务器异常')});//设置函数，简化请求function myAjax(url) {return new Promise((resolve, reject) => {// 1. 请求用户名是否存在$.ajax({url,success(result) {resolve(result);},error(err) {reject(err);}})})}// 验证用户名不存在myAjax("http://localhost:8811/user/existUsername").then(result => {if (result.data) {alert('用户名不存在！');return myAjax("http://localhost:8811/user/existPhone")} else {alert(result.message)}})// 验证手机号是否存在.then(result => {if (result.data) {alert('手机号不存在！');return myAjax("http://localhost:8811/user/registryUser")} else {alert(result.message)}})// 注册成功.then(result => {if (result.data) {alert(result.message)}}).catch(err => {alert('服务器异常')});

ES6新特性-模块化

什么是模块化
- 模块化就是把代码进行拆分，方便重复利用。类似于java中的导包：要使用一个包，必须先导包。然而JS中并没有包的概念，取而代之的是模块。
- 在ES6中每一个模块既是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的
- 模块功能
  1. export命令用于规定模块的对外接口，如果你希望外部可以读取模块当中的内容，就必须使用export来对其进行暴露（输出）。其中export不仅仅只能导出对象，一切JS变量都可以导出
  2. import命令永固导入模块

import语法：

import 组件名 from ‘js文件路径’
组件名={需要导入的组件}需要多个时，用逗号隔开。当需要用的组件很多时，可直接写成*，就不要{}，但是还需要使用as取别名
非默认组件一定要用大括号，默认组件不能写在大括号里面

<script type="module">
// import 语法
// import 组件名 from js文件路径
// 组件名 : {需要导入的组件}  多个用逗号分隔，  用过组件有很多可以写成* ，就不需要{} ,但是还需要使用as取别名
// 非默认组件一定要用大括号    ，默认组件不能写在大括号里面
import * as person form './js/user.js'
import xxx,{girl} from './js/user.js'console.info("---"+Object.keys(xxx));
console.info("----"+girl);</script>

导出语法：
- 对应三种import语法
  1. 直接写在组件上面（变量、对象、函数…)（export let User）
  2. 写在底部（批量导出）（export {User,girl}）
  3. 导出默认组件(export default)

export default {username:'徐庶',age:'18',print() {console.info(`姓名${this.username},年龄:${this.age}`)}
}let girl ={realName:'迪丽热巴', cup:'E'
}export {girl}
// 需要导入 要先 导出 
// 导出 3:
//  1. 直接写在组件上面（变量、对象、函数....)
//export let User//  2. 写在底部（批量导出）
// export {User,girl}// 3. 导出默认组件