1. ES6
1.1 简介
ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma 国际（前身为欧洲计算机制造商协会，英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言）是lavascript 语言的下一代标准，已经在2015年6月正式发布了，并且从ECMAScript6开始，开始采用年号来做版本。即ECMAScript2015，就是ECMAScript6。
它的目标，是使得JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。每年一个新版本。
ECMAScript是浏览器脚本语言的规范，而各种我们熟知的is语言，如JavaScript则是规范的具体实现。
2. ES6新特性
2.1 let声明变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1. var声明的变量往往会越域
// let声明的变量有严格的局部作用域
// {
// var a=1;
// let b=2;
// }
// console.log(a); // 1
// console.log(b); //'b' is not defined
//2. var可以声明多次
// let只能声明一次
// var m=1;
// var m=2;
// let n=3;
// let n=4;
// console.log(m); //2
// console.log(n); //Identifier 'n' has already been declared
//3. var会变量提升
// let不存在变量提升
// console.log(x); //undefined
// var x=10;
// console.log(y); //Uncaught ReferenceError: Cannot access 'y' before initialization
// let y=1;
//2.const声明常量（只读变量）
const a=1;
a=2; //Uncaught TypeError: Assignment to constant variable.
</script>
</body>
</html>2.2 const声明常量（只读变量）
//2.const声明常量（只读变量）
const a=1;
a=2; //Uncaught TypeError: Assignment to constant variable.2.3 解构表达式&字符串扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 解构表达式 -->
<script>
//1.数组解构
let arr=[1,2,3];
// let a=arr[0];
// let b=arr[1];
// let c=arr[2];
// console.log(a,b,c);
//1 2 3
// let [a,b,c]=arr;
// console.log(a,b,c);
//1 2 3
//2.对象解构
const person={
name: "aaa",
age: 66,
language: ['java','js','css']
}
// const name=person.name;
// const age=person.age;
// const language=person.language;
// console.log(name,age,language);
//aaa 66 (3) ["java", "js", "css"]
// const {name,age,language}=person;
// console.log(name,age,language);
aaa 66 (3) ["java", "js", "css"]
const {name:abc,age,language}=person;
console.log(abc,age,language);
//aaa 66 (3) ["java", "js", "css"]
//3.字符串扩展
//3.1 ES6为字符串扩展了几个新的APl：
//-includes()：返回布尔值，表示是否找到了参数字符串。
//-startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
//-endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
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
//3.2 字符串模板
//模板字符串相当于加强版的字符串，用反引号`，
//除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
//多行字符串
let ss=`
<div>
<span>hello aaa</span>
<div>
`;
console.log(ss);
//<div>
// <span>hello aaa</span>
//<div>
//字符串插入变量和表达式。变量名写在${}中，${}中可以放入Javascript表达式。
let name2="张三";
let age2=18;
let info=`我是${name2},今年${age2}`;
console.log(info);//我是张三,今年18
let info2=`我是${abc},今年${age}`;
console.log(info2);//我是aaa,今年66
//字符串中调用函数
function fun(){
return "这是一个函数";
}
let sss=`ahahaha,${fun()}`;
console.log(sss);//ahahaha,这是一个函数
</script>
</body>
</html>2.4 函数优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//函数优化
//1.函数参数默认值
//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法
function add(a,b){
//判断b是否为空，为空就给默认值1
b=b || 1;
return a+b;
}
//传一个参数
console.log(add(10));//11
//现在可以这么写直接给参数写上默认值，没传就会自动使用默认值
function add2(a,b=1){
return a+b;
}
//传一个参数
console.log(add2(20));//21
//2.不定参数 任意多个参数
function fun(...value){
console.log(value.length)
}
fun(1,2,3,4);//4
fun();//0
//3.箭头函数
//es6中定义函数的简写方式
//一个参数时
var print=function(obj){
console.log(obj);
}
print("aaa");//aaa
var print2=obj=>console.log(obj);
print2("bbb");//bbb
//多个参数
var sum=function(a,b){
return a+b;
}
var sum2=(a,b)=>a+b;
console.log(sum2(10,20));//30
var sum3=function(a,b){
c=a+b;
return a+c;
}
var sum4=(a,b)=>{
c=a+b;
return a+c;
}
console.log(sum4(20,30));//70
const person={
name: "aaa",
age: 66,
language: ['java','js','css']
}
function hello(person){
console.log("hello",person.name);
}
var hello2=(person)=>console.log("hello",person.name);
hello2(person);//hello aaa
//{name} 直接解构person 箭头函数+解构
var hello2=({name})=>console.log("hello",name);
hello2(person);//hello aaa
</script>
</body>
</html>2.5 对象优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//对象优化 1.新增的api
//Es6给Object拓展了许多新的方法，如：
//keys(obj): 获取对象的所有key形成的数组
//values(obj): 获取对象的所有value形成的数组
//entries(obj): 获取对象的所有key和value形成的二维数组。格式：`[[k1,v1],[k2,v2],...]`
//assign(dest,…src): 将多个src对象的值持贝到dest中。（第一层为深持贝，第二层为浅持贝）
const person={
name: "aaa",
age: 66,
language: ['java','js','css']
}
console.log(Object.keys(person));// ["name", "age", "language"]
console.log(Object.values(person));// ["aaa", 66, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
const target={a:1};
const source1={b:2};
const source2={c:3};
//Object.assign方法的第一个参数是目标对象，后面的参数都是源对象
Object.assign(target,source1,source2);
console.log(target);//{a: 1, b: 2, c: 3}
//2.声明对象简写
const age=66;
const name="aaa";
const person1={name:name,age:age};
console.log(person1);//{name: "aaa", age: 66}
const person2={name,age};
console.log(person2);//{name: "aaa", age: 66}
//3.对象的函数属性简写
let person3={
name:"aaa",
//以前
eat:function(food){
console.log(this.name+"在吃"+food);
},
//箭头函数版 this不能使用 这里this.name 拿不到，对象.属性可以获取信息
eat2: food=>console.log(person3.name+"在吃"+food),
//简写版
eat3(food){
console.log(this.name+"在吃"+food);
}
}
person3.eat("apple");//aaa在吃apple
person3.eat2("apple");
person3.eat3("apple");
//4.对象拓展运算符
//拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
//--拷贝对象 深拷贝
let person4={name:"bbb",age:1};
let someone={...person4}
console.log(someone);//{name: "bbb", age: 1}
//--合并对象
let age2={age:123};
let name2={name:"zxcv"};
let person5={name:"abc"};
person5={...age2,...name2};
//后面的name2会覆盖之前的值
console.log(person5);//{age: 123, name: "zxcv"}
</script>
</body>
</html>2.6 map和reduce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//数组中新增了map和reduce方法。
//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr=['1','2','3','10'];
arr=arr.map((item)=>{
return item*2;
});
//arr=arr.map(item => item*2);
console.log(arr);//2 4 6 20
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//arr.reduce（callback，[finitialValue]）
//reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。
//callback（执行数组中每个值的函数，包含四个参数）
//1、previousvalue（上一次调用回调返回的值，或者是提供的初始值（initialValue））
//2、currentValue（数组中当前被处理的元素）
//3、index（当前元素在效组中的索引）
//4、array（调用reduce的数组）initialValue（作为第一次调用callback的第一个参数。）
let result=arr.reduce((a,b)=>{
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a+b;
});
console.log(result);//32
//reduce 指定初始值
let result2=arr.reduce((a,b)=>{
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a+b;
},100);
console.log(result2);//132
</script>
</body>
</html>2.7 Promise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!-- 在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。
异步执行可以用回调函数实现。一旦有一连串的ajax请求a，b，c，d.
后面的请求依赖前面的请求结果，就需要层层嵌套。
这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，裁们不得不非常小心翼翼处理内层函数与外层函数的数据，
一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…….
总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。
案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：
1.查询用户，查询成功说明可以登录
2.查询用户成功，查询科目
3.根据料目的查询结果，获取去成绩
分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，
为了渲染方便，最好响应json数据。在这里就不编写后台接口了，而是提供三个ison文件，
直接提供ison效据，模拟后台接口： -->
<script>
//1、查出当前用户信息
//2、按照当前用户的id查出他的课程
//3、按照当前课程id查出分数
// $.ajax({
// url:"mock/user.json",
// success(data){
// console.log("查询用户：",data);
// $.ajax({
// url: `mock/user_corse_${data.id}.json`,
// success(data){
// console.log("查询课程：",data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success(data){
// console.log("查询到分数",data);
// },
// error(error){
// console.log("出现异常了3:"+error);
// }
// });
// },
// error(error){
// console.log("出现异常了2:"+error);
// }
// });
// },
// error(error){
// console.log("出现异常了1:"+error);
// }
// });
//1.promise 可以封装异步操作
// let p=new Promise((resolve,reject)=>{
// //1.异步操作
// $.ajax({
// url:"mock/user.json",
// success:function(data){
// console.log("查询用户：",data);
// resolve(data);
// },
// error:function(error){
// reject(error);
// }
// });
// })
// p.then((obj)=>{
// //console.log("上一步的结果",obj.id);
// return new Promise((resolve,reject)=>{
// $.ajax({
// url: `mock/user_corse_${obj.id}.json`,
// success:function(data){
// console.log("查询用户课程：",data);
// resolve(data);
// },
// error:function(error){
// reject(error);
// }
// });
// })
// }).then((data)=>{
// console.log("上一步的结果",data);
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success:function(data){
// console.log("查询用户课程分数：",data);
// //resolve(data);
// },
// error:function(error){
// //reject(error);
// }
// });
// })
function get(url,data){
return new Promise((resolve,reject)=>{
$.ajax({
url:url,
data:data,
success:function(data){
resolve(data);
},
error:function(error){
reject(error);
}
})
});
}
get("mock/user.json")
.then((data)=>{
console.log("用户查询成功：",data);
return get(`mock/user_corse_${data.id}.json`);
})
.then((data)=>{
console.log("课程查询成功：",data);
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("成绩查询成功：",data);
})
.catch((error)=>{
console.log("遇到异常..");
});
</script>
</body>
</html>2.8 模块化
什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而s中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export和import。
·`export`命令用于规定模块的对外接口。
·`import`命令用于导入其他模块提供的功能。
3. Babel
Babel是一个Javascript编译器，我们可以使用es的最新语法编程，而不用担心浏览器兼容问题。他会自动转化为浏览器兼容的代码
8615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
