ES6 特性
ES6 特性
1.1、ES6概念及发展史
以前学习JavaScript的时候，对ES5是有了解过的，但是在学习Vue的时候，就会发现有很多新的写法是ES6中的，真是让人捉急。所以今天ES6他来了。原英文文档：https://262.ecma-international.org/6.0/#sec-functiondeclarationinstantiation
W3C中对ECMAScript 6定义：ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了（所以也被叫作ES2015）。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
2.1 ES6的使用
2.1.1 let和const的定义.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//传统定义变量和常量的方式
var name="败落";
var PI=Math.PI;
console.log(name);
console.log(PI);
//ES6定义的方式
let name2="败落太棒了";
//定义常量
var PI2=Math.PI;
console.log(name2);
console.log(PI2);
</script>
</body>
</html>
2.1.2 let-const和var的区别
- let 变量
- 解决var的变量穿透问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for (var i = 0; i <5 ; i++) {
console.log(i)
}
//这里就会造成变量穿透问题
console.log(i)
</script>
</body>
</html>
注意：正常用 var 写会造成变量穿透问题 是一个很大的坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
for (let i = 0; i <5 ; i++) {
console.log(i)
}
//这里就会造成变量穿透问题
console.log(i)
</script>
</body>
</html>
使用 let 常量就可以完美解决这个问题 在下边写的i会报错
- const 常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const PI=Math.PI;
PI=100;
console.log(PI);
</script>
</body>
</html>
使用var定义常量时是可以修改的 使用const不允许被修改
- 在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中的，可以大胆的去使用let和const
- 但是如果你是web开发。建议大家还是使用var，因为在一些低版本的浏览器还是不支持let和const
2.1.3 模板字符串
- 在编写代码的过程中可能会牵涉到动态部分，es6也为我们提供了一套自己的语法
- 传统语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--字符串会牵涉到动态部分-->
<!--传统语法-->
<script>
var person={
name:"败落",
address:"河南",
age:18
};
let address="我是"+person.name+",正在"+person.address+"学习es6,今年"+person.age+"岁";
console.log("传统语法："+address);
</script>
</body>
</html>
- ES6语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--字符串会牵涉到动态部分-->
<!--传统语法-->
<script>
var person={
name:"败落",
address:"河南",
age:18
};
// es6的UI发模板字符串
let address2=`我是${person.name},正在${person.address}学习es6,今年${person.age}岁`;
console.log(`es6语法：${address2}`);
</script>
</body>
</html>
- 传统语法中可以看出每牵涉到动态部分时都需要用 “++” 来进行拼接
- ES6 为我们提供的一套语法中 把 “” 换成了 `` 拼接动态部分直接用 ${}
2.1.4 函数默认参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function sum(a,b){
return a+b;
}
var result=sum(100,100);
console.log("result=",result)
result=sum(100);
console.log("result=",result)
</script>
</body>
</html>
- 传两个参数是正常打印
- 只传一个参的时候 另一个参数就是默认值 javaScript 的变量默认值就是 undefined 所以结果会变成 NaN
2.1.5 箭头函数(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//箭头函数 (重点)
//传统语法
var sum= function (a,b){
return a+b;
}
//箭头函数语法
var sum= (a,b)=>{
return a+b;
}
var sum= (a,b)=> a+b;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [1, 2, 3, 4, 5];
// var newarr = arr.map(function (obj) {
// return obj * 2;
// })
//改变
var newarr = arr.map(obj=>obj * 2);
console.log(newarr)
</script>
</body>
</html>
- 箭头函数的特点：
- 去掉 function；
- 在括号后面加箭头 =>；
- 如果逻辑代码中仅有 return 可以全部省去 直接返回（如果有逻辑提，就不能进行省略）；
- 如果参数只有一个，可以把括号也省去（如果有多个参数就不能进行省略）
2.1.5 对象简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let person={
name:"败落",
address:"河南",
age:18,
go:function (){
console.log("我骑着小蓝车来公司上班了")
}
};
// ES6简写
var name="败落";
var address="河南";
var age=18;
let person2={
name,
address,
age,
go(){
console.log("我骑着小蓝车来公司上班了")
}
};
console.log(person2.name)
console.log(person2.address)
console.log(person2.age)
person2.go();
</script>
</body>
</html>
-
因为对象是 key:value 存在
-
1:如果 key 和变量的名字一样，可以指定一次即可
-
2:如果 value 是一个函数，可以把
:function全部去掉，只剩下()即可 -
对象简写案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="js/jquery-1.12.4.js">
</head>
<body>
<form action="">
<p>账号:<input type="text" name="account" id="account"></p>
<p>密码:<input type="text" name="password" id="password"></p>
<p><input type="button" value="登录" id="loginbtn"></p>
</form>
<script>
$("#loginbtn").click(() => {
let account = $("#account").val();
let password = $("#account").val();
// 对象简写应用场景
let param = {
account,
password
}
//执行异步请求
$.ajax({
method: "post",
url: "xxx",
data: param,
success() {
},
error() {
}
})
})
</script>
</body>
</html>
2.1.6、ES6的语法：对象解构
对象解构----ES6提供了一些快捷获取对象属性和行为的方式
- 对象是key:value存在的，获取对象属性和方法的方式有两种
- (1)通过
.获取对象属性和方法 - (2)通过
[ ]获取对象属性和方法 - Es6对象解构快速获取对象属性和方法
var name="败落";
var address="河南";
var age=18;
let person2={
name,
address,
age,
go(){
console.log("我骑着小蓝车来公司上班了")
}
};
//(1)通过.的方式获取属性和方法
console.log(person2.name)
console.log(person2.address)
console.log(person2.age)
person2.go();
//(2)通过[]的方式获取属性和方法
console.log(person2["name"])
console.log(person2["address"])
console.log(person2["age"])
person2["go"]()
//(3)Es6对象解构快速获取
var {name,age,go}=person2;
//还原代码
// var name=person2.name;
// var age=person2.age;
console.log(name,age);
go();
ES6 对象解构其实–其实就是快速获取属性和方法的方式一种形式
- 为什么要提供 " . " 和" [ ] " 两种方式来取值。
- 方式一 " . " 一般会被认为是字符串
- 方式二" [ ] "里面可以是数字也可以是变量，非法标识符也只能用它
2.1.7、对象传播操作符 ...
对象传播操作符使用
...来表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//对象传播操作符 ...
let person={
name:"败落",
address:"河南",
age:18,
phone:"123456",
go(){
console.log("开始上班了")
}
};
//解构出来
var {name,address,...person2}=person;
console.log(name);
console.log(address);
console.log(person2);
</script>
</body>
</html>
- 可以看到
name和address已经被解构出来了 person2会解构person剩下没有被解构的变量和方法
通过对象传递操作符，会将解构剩下的变量赋值给新定义的对象。
2.1.8、ES6：数组Map-败落
- 定义：对数组中的每个元素进行处理，得到新的数组；
- 特点：不改变原有数据的结构和数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let arr=[1,2,3,4,5,6,7];
let newArr=[];
//传统方法
for (let i = 0; i < arr.length; i++) {
newArr.push(arr[i]*2);
}
console.log(newArr);
//ES6增强语法 map 自带循环，并且会把处理的值回填对应的位置
newArr=arr.map( ele=> ele*2);
console.log(newArr);
//map处理对象数据
let users=[{name:"张三",age:18},{name:"李四",age:15},{name:"王五",age:16}];
let newUsers= users.map(function (ele){
ele.age=ele.age+1;
//给每一个对象增加字段
ele.check=true;
return ele;
});
console.log(newUsers)
</script>
</body>
</html>
ES6增强语法 map 自带循环，并且会把处理的值回填对应的位置
2.1.9、reduce
- 语法：
reduce(function(),初始值(可选))
接收一个函数**(必须)** 和一个初始值**(可选)**，该函数接收两个参数。
- 第一个参数是上一次 reduce 处理的结果
- 第二个参数是数组中要处理的下一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//reduce 计算方法
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//a=1 b=2 3
//a=3 b=3 6
//a=6 b=4 10
//箭头写法----1到10相加
let newArr = arr.reduce((a, b) => a + b);
//原生写法----1到10相加
let newArr = arr.reduce(function (a, b) {
return a + b
});
console.log(newArr)
</script>
</body>
</html>
Title ~~~reduce() 会从左到右一次把数组中的元素用 reduce 处理，并把处理的结果作为下次 reduce 的第一个参数，如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
reduce() 会从左到右一次把数组中的元素用 reduce 处理，并把处理的结果作为下次 reduce 的第一个参数，如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数