030_ES6
目录
简介
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：
[语言语法] – 语法解析规则、关键字、语句、声明、运算符等。
[类型]– 布尔型、数字、字符串、对象等。
[原型和继承]
内建对象和函数的
[标准库] – [JSON]、[Math]、[数组方法]、[对象自省方法]等。
ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的[Web API]，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似[node.js]的非浏览器环境。
ECMAScript标准的历史版本分别是1、2、3、5。
那么为什么没有第4版？其实，在过去确实曾计划发布提出巨量新特性的第4版，但最终却因想法太过激进而惨遭废除（这一版标准中曾经有一个极其复杂的支持泛型和类型推断的内建静态类型系统）。
ES4饱受争议，当标准委员会最终停止开发ES4时，其成员同意发布一个相对谦和的ES5版本，随后继续制定一些更具实质性的新特性。这一明确的协商协议最终命名为“Harmony”，因此，ES5规范中包含这样两句话
ECMAScript是一门充满活力的语言，并在不断进化中。
未来版本的规范中将持续进行重要的技术改进
2009年发布的改进版本ES5，引入了[Object.create()]、[Object.defineProperty()]、[getters]和[setters]、[严格模式]以及[JSON]对象。
ES6: 是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript是前端js的语法规范；可以应用在各种js环境中。如：浏览器或者node.js环境。
它有很多版本：es1/2/3/5/6，很多新特性，可以在js环境中使用这些新特性。
ES6语法：let和const
测试let和const
<!-- html文件，!回车，可以快捷生成HTML代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 传统定义变量和常量统一使用var
var name = "张三丰";
var PI = Math.PI;
console.log("var name = ",name);
console.log("var PI = ",PI);
// ES定义，变量使用let，常量使用const
let name2 = "张三丰";
const PI2 = Math.PI;
console.log("let name2 = ",name2);
console.log("const PI2 = ",PI2);
</script>
</body>
</html>
let解决var的变量穿透问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var的变量穿透问题：i的值5被输出
for(var i=0;i<5;i++){
console.log("var i = ",i);
}
console.log("var i = ",i);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var的变量穿透问题：i的值5被输出
// for(var i=0;i<5;i++){
// console.log("var i = ",i);
// }
// console.log("var i = ",i);
// let解决var的变量穿透问题：i超出范围输出直接报错
for(let i=0;i<5;i++){
console.log("let i = ",i);
}
console.log("let i = ",i);
</script>
</body>
</html>
const解决var的常量修改问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var的常量修改问题：常量PI的值被修改
var PI = Math.PI;
console.log("var PI = ",PI);
PI = 100;
console.log("var PI = ",PI);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var的常量修改问题：常量PI的值被修改
// var PI = Math.PI;
// console.log("var PI = ",PI);
// PI = 100;
// console.log("var PI = ",PI);
// const解决var的常量修改问题：常量PI的值修改会报错
const PI = Math.PI;
console.log("const PI = ",PI);
PI = 100;
console.log("const PI = ",PI);
</script>
</body>
</html>
注：实际开发中，一些低版本的浏览器可能不支持let和const
ES6语法：模板字符串
之前字符串连接使用单引号（'）或双引号（"）连接，模板字符串使用反引号（`）
模板字符串进行字符串拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var person = {
name:"张三丰",
address:"武当山"
};
// 传统字符串拼接
let str = "传统字符串拼接：我是"+person.name+"，在"+person.address+"修道！";
console.log(str);
// ES6模板字符串
let str2 = `ES6模板字符串：我是${person.name}，在${person.address}修道！`;
console.log(str2);
</script>
</body>
</html>
模板字符串支持换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var person = {
name:"张三丰",
address:"武当山"
};
// 传统字符串拼接
let str = "传统字符串拼接：我是"+person.name+"，在"+person.address+"修道！";
console.log(str);
// ES6模板字符串
let str2 = `ES6模板字符串：我是${person.name}，在${person.address}修道！`;
console.log(str2);
// 模板字符串支持换行
let str3 = `ES6模板字符串支持换行：
我是${person.name}，
在${person.address}修道！`;
console.log(str3);
</script>
</body>
</html>
ES6语法：函数默认参数
函数默认参数即给函数的参数加一个默认值，调用函数不传值时，使用默认值，传值时使用传的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function sum(a=100,b=200){
return a+b;
}
let result = sum();
console.log("不传值：" + result);
let result2 = sum(1);
console.log("传一个值：" + result2);
let result3 = sum(1,2);
console.log("传二个值：" + result3);
</script>
</body>
</html>
ES6语法：箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 传统函数
var sum = function(a,b){
return a + b;
}
console.log(sum(1,2));
// 箭头函数 - 改进1
var sum = (a,b)=>{
return a + b;
}
console.log(sum(1,2));
// 箭头函数 - 改进2
var sum = (a,b)=>a + b;
console.log(sum(1,2));
// 通过上面的例子找规律
// 1.去掉function
// 2.在参数括号后加箭头=>
// 3.如果逻辑代码仅有return一行，去掉{}和return
// 4.如果参数仅有一个，去掉参数括号
var arr = [1,2,3,4,5];
var newarr = arr.map(function(obj){
return obj * 2;
});
console.log(newarr);
var newarr = arr.map((obj)=>{
return obj * 2;
});
console.log(newarr);
var newarr = arr.map((obj)=>obj * 2);
console.log(newarr);
var newarr = arr.map(obj=>obj * 2);
console.log(newarr);
</script>
</body>
</html>
ES6语法：对象初始化简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let name = "张三丰";
let address = "武当山";
// 传统对象初始化
let info = {
name:name,
address:address,
do:function(){
console.log("道长在修道！");
}
};
console.log(info);
console.log(info.name);
console.log(info.address);
info.do();
// ES6对象初始化简写
// 因为对象是key:value存在
// 1.如果key和变量的名字一致，可以只写key
// 2.如果value是一个函数，可以把:function去掉
let info2 = {
name,
address,
do(){
console.log("道长在修道！");
}
};
console.log(info2);
console.log(info2.name);
console.log(info2.address);
info2.do();
</script>
</body>
</html>
对象初始化简写的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<p>账户：<input type="text" id="username"></p>
<p>密码：<input type="password" id="password"></p>
<p><input type="button" value="登陆" id="loginbtn"></p>
</form>
<script>
$("#loginbtn").on("click",function(){
let username = $("#username").val();
let password = $("#password").val();
// 传统对象初始化
let params = {username:username,password:password};
// ES6对象初始化简写
let params = {username,password};
$.ajax({
type:"post",
url:"",
data:params,
// 传统对象初始化
// success:function(){
// }
// ES6对象初始化简写
success(){
}
})
});
</script>
</body>
</html>
ES6语法：对象解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var name = "张三丰";
var address = "武当山";
var info2 = {
name,
address,
do(){
console.log("道长在修道！");
}
};
// 获取对象属性和方法的方式一：.
console.log("获取对象属性和方法的方式一：.");
console.log(info2.name);
console.log(info2.address);
info2.do();
// 获取对象属性和方法的方式二：[]
console.log("获取对象属性和方法的方式二：[]");
console.log(info2["name"]);
console.log(info2["address"]);
info2["do"]();
// 获取对象属性和方法的方式三：ES6对象解构
console.log("获取对象属性和方法的方式三：ES6对象解构");
// 支持取别名
var {name,address:addr,do:do2} = info2;
console.log(name);
console.log(addr);
do2();
</script>
</body>
</html>
ES6语法：对象传播操作符（...）
对象传播操作符（...），是把一个对象的属性传播到另一个对象中
对象拷贝和对象融合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var info = {
name:"张三丰",
address:"武当山",
do(){
console.log("道长在修道！");
}
};
// 对象解构和对象传播操作符...
// 对象拷贝
var {name,...info2} = info;
console.log(name);
console.log(info2);
// 对象融合
var info3 = {
...info,
alias:"太极宗师"
};
console.log(info3);
</script>
</body>
</html>
对象传播操作符（...）的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var userpage = {pages:10,pageNum:1,pageSize:10,total:100,userList:[{},{}]};
// 使用对象传播操作符
var {userList,...page} = userpage;
console.log(userpage);
console.log(userList);
console.log(page);
</script>
</body>
</html>
ES6语法：数组的map方法
数组的map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1,2,3,4,5,6];
// 新数组是原数组*2
// 传统方式
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr.push(arr[i] * 2);
}
console.log(arr);
console.log(newarr);
// 数组的map方法
// map--自带循环，并且会把处理的值回填到新数组对应的位置
let newarr2 = arr.map(obj=>obj * 2);
console.log(arr);
console.log(newarr2);
</script>
</body>
</html>
数组的map方法对象添加属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let userList = [{username:"张三丰",password:"123456"},{username:"张道陵",password:"123456"}];
userList.map(l=>l.alias = "道长");
console.log(userList);
</script>
</body>
</html>
ES6语法：数组的reduce方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1,2,3,4,5,6,7,8,9,10];
// reduce(function(),初始值（可选）) ：
// 接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
// 第一个参数是上一次reduce处理的结果
// 第二个参数是数组中要处理的下一个元素
// reduce() 会从左到右依次把数组中的元素用reduce处理，
// 并把处理的结果作为下次reduce的第一个参数。
// 如果是 第一次，会把前两个元素作为计算参数，
// 或者把用户指定的初始值作为起始参数
let result = arr.reduce((a,b)=>a + b);
console.log(result);
let result2 = arr.reduce((a,b)=>a - b);
console.log(result2);
let result3 = arr.reduce((a,b)=>a * b);
console.log(result3);
</script>
</body>
</html>
