ES6 知识点整理
2018-09-18 本文已影响21人
Ethan_zyc
ES6
包括 变量、函数、数组、json、字符串、面向对象、promise、generator、async/await 和解构赋值相关的。
变量
var：可以重复定义、不能限制修改、函数级作用域（不是块级作用域）
为了解决以上问题，ES6 增加了let和const。
let 作为变量彻底取代 var，const 用来定义常量。
函数
箭头函数
// 传统
let plus = function(a,b) {
return a+b
}
// 箭头函数
let arrPlus = (a,b) => a+b
// 传统
function plus1(a,b) {
return a+b;
}
let a = plus(1,5)
let b = plus1(1,6)
let c = arrPlus(1,7)
console.log(a,b,c) // 6 7 8
默认参数
let plus = function(a,b=1) {
return a+b
}
console.log(plus(2)) // 3
参数展开（剩余参数，数组展开）
function rest(a,b,...c) {
console.log(a,b,c)
}
rest(1,2,3,4,5) // 1 2 [ 3, 4, 5 ]
注：展开的参数必须放在最后
三个点的另一个作用：将数组展开
let arr1 = [1,2,3]
let arr2 = [5,6,7,...arr1,8,9]
console.log(arr2) // [ 5, 6, 7, 1, 2, 3, 8, 9 ]
或者把一个数组打包 push 进另一个数组
let arr1 = [1,2,3]
let arr2 = [5,6,7,8,9]
arr2.push(...arr1)
console.log(arr2); // [ 5, 6, 7, 8, 9, 1, 2, 3 ]
数组
map：原来数组有多少个，map 处理之后还是那么多个。参数：item，index，array
let arr = [12,35,56,79,56];
let arr1 = arr.map(item => item%2 === 0 ? '偶' : '奇');
let arr2 = arr.map((item,index) => index + ':' + item);
console.log(arr); // [ 12, 35, 56, 79, 56 ]
console.log(arr1); // [ '偶', '奇', '偶', '奇', '偶' ]
console.log(arr2); // [ '0:12', '1:35', '2:56', '3:79', '4:56' ]
filter: 过滤掉不符合条件的。参数：item，index，array
let arr = [12,75,56,79,56];
let arr1 = arr.filter(item => item>=60);
console.log(arr); // [ 12, 75, 56, 79, 56 ]
console.log(arr1); // [ 75, 79 ]
forEach: 遍历。仅仅只是循环用，无返回值，也不会改变原数组。 参数：item，index，array
let arr = [12,35,56,79,56];
let arr1 = arr.forEach(item => item+20);
console.log(arr); // [12,35,56,79,56]
console.log(arr1); // undefined
reduce: 汇总。下面代码中的 tmp 可以理解为前一个值。
let arr = [12,35,56,79,56];
let avg = arr.reduce((tmp,item,index) => {
tmp += item;
if(index === arr.length-1) tmp /= (index+1);
return tmp;
})
console.log(avg); // 47.6 也就是这五个数的平均值
关于 reduce 的参数，其实有五个，tmp，item，index，array，init。如果没有传入 init，初始值就会取数组的第一个值，并且内部调用时，index 从1开始。
let arr = [12,35,56,79,56];
let avg = arr.reduce((tmp,item,index,array) => {
console.log(tmp,item,index,array);
tmp += item;
if(index === arr.length-1) {
console.log('我要求平均数了');
tmp /= (index+1);
}
return tmp;
})
console.log(avg);
/*
12 35 1 [ 12, 35, 56, 79, 56 ]
47 56 2 [ 12, 35, 56, 79, 56 ]
103 79 3 [ 12, 35, 56, 79, 56 ]
182 56 4 [ 12, 35, 56, 79, 56 ]
我要求平均数了
47.6
*/
如果传入了初始值 10000，index 就从0开始。tmp 的初始值也就是10000，结果自然也不同了。
let arr = [12,35,56,79,56];
let avg = arr.reduce((tmp,item,index,array) => {
console.log(tmp,item,index,array);
tmp += item;
if(index === arr.length-1) {
console.log('我要求平均数了');
tmp /= (index+1);
}
return tmp;
}, 10000)
console.log(avg);
/*
10000 12 0 [ 12, 35, 56, 79, 56 ]
10012 35 1 [ 12, 35, 56, 79, 56 ]
10047 56 2 [ 12, 35, 56, 79, 56 ]
10103 79 3 [ 12, 35, 56, 79, 56 ]
10182 56 4 [ 12, 35, 56, 79, 56 ]
我要求平均数了
2047.6
*/
Array.from(arr)
Array.from(arr)的作用就是将 array-like 类型的数据转变成 array。
比如下例中，如果直接用 aDiv 去调用 forEach 会报错，因为 aDiv 其实并不是一个 array，而是 array-like。
报错信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: #eeeeee;
margin: 20px;
float: left;
}
</style>
<script>
window.onload = () => {
let aDiv = document.getElementsByTagName('div');
console.log(aDiv);
// aDiv 其实并不是一个数组，而是个 array-like，在控制台中打印出来是个 HTMLCollection，所以不能用 forEach
// 这时候就需要用 Array.from(arr)将一个 array-like 转换成一个真正的 array
// aDiv.forEach(div => {
// div.style.background = 'red';
// })
Array.from(aDiv).forEach(div => {
div.style.background = 'red';
})
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
json
省略 function
在 json 中，我们可以这样写一个方法
let json = {
a:1,
b:100,
add: function() {
console.log(this.a+this.b);
}
}
json.add(); // 101
现在，我们可以把 function 省略了，效果是一样的
let a = 1;
let json = {
a,
b:100,
add() {
console.log(this.a+this.b);
}
}
json.add(); // 101
这里还包含了一个 json 的新特性，就是在 json 的 a 那边，如果键值的名称相同，直接写一个就行了。
字符串
字符串模板
方便植入变量，并且可以随意折行
let json = {
name: 'ethan',
age: 23,
address: '南通'
}
console.log(`大家好，我叫${json.name}，今年${json.age}岁，家在${json.address}`);
// 大家好，我叫ethan，今年23岁，家在南通
面向对象
ES6 之前的传统的对象看这篇吧——js 笔记，ES6出来之后，官方提供了面向对象的写法。看代码吧
class Person{
constructor(name,age,address) {
this.name = name;
this.age = age;
this.address = address;
}
introduce() {
console.log(`大家好，我叫${this.name}，今年${this.age}岁，家在${this.address}`);
}
}
class Student extends Person{
constructor(name,age,address,major) {
super(name,age,address);
this.major = major;
}
introduce() {
console.log(`大家好，我叫${this.name}，今年${this.age}岁，家在${this.address}， 专业是${this.major}`);
}
}
let person = new Person('ethan', 24, '包邮区');
person.introduce(); // 大家好，我叫ethan，今年24岁，家在包邮区
let student = new Student('zyc', 18, '南京', '车辆工程');
student.introduce(); // 大家好，我叫zyc，今年18岁，家在南京， 专业是车辆工程
上面定义了一个 Person 类，又定义了一个继承 Person 类的 Student 类，很明显方便了很多。
bind()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = () => {
class Person{
constructor(name,age,address) {
this.name = name;
this.age = age;
this.address = address;
}
introduce() {
console.log(`大家好，我叫${this.name}，今年${this.age}岁，家在${this.address}`);
}
}
let person = new Person('ethan', 24, '包邮区');
// document.onclick = person.introduce; // 大家好，我叫undefined，今年undefined岁，家在undefined
document.onclick = person.introduce.bind(person); // 大家好，我叫ethan，今年24岁，家在包邮区
}
</script>
</head>
<body>
</body>
</html>
可以看到，如果直接给 onclick 一个方法，但现在方法中的 this 指向调用它的 document，所以都是 undefined。所以需要给他绑定一个对象，这里绑定的是 person，就能正常输出了。bind(obj)的作用就相当于把调用它的函数内部的 this 赋值为 obj，即 this = obj。
还有一点需要注意的就是箭头函数的 this 和普通函数的 this 指代的会有所不同：
- 箭头函数：根据所在的环境
- 普通函数：根据调用的对象
看如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = () => {
let b = {
aa: 'aaa'
}
b.arrFunc = () => {
console.log(this);
}
b.func = function () {
console.log(this);
}
b.arrFunc(); // b {...}
b.func(); // Window{...}
}
</script>
</head>
<body>
</body>
</html>
Promise
主要是用来解决异步操作。
- 同步：串行 简单，方便
- 异步：并行 性能高，体验好
这是 promise 的基本用法
let p = new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
})
});
p.then(json=>{
console.log('成功',json);
}, err=>{
console.log('获取失败');
})
当有好几个异步请求时，可以使用promise.all
let p = new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
})
});
let p1 = new Promise((resolve, reject) => {
$.ajax({
url: '2.txt',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
})
});
let p2 = new Promise((resolve, reject) => {
$.ajax({
url: '3.json',
dataType: 'json',
success(json){
resolve(json);
},
error(err){
reject(err);
}
})
});
Promise.all([p,p1,p2]).then(arr=>{
console.log('成功',arr);
}, err=>{
console.log('获取失败');
})
这样写很麻烦，可以简化一下
Promise.all([
$.ajax({url: '1.txt', dataType: 'json'}),
$.ajax({url: '2.txt', dataType: 'json'}),
$.ajax({url: '3.json', dataType: 'json'}),
]).then(arr=>{
let [a, b, c] = arr;
console.log('成功',a,b,b);
}, err=>{
console.log('获取失败');
})
还有一个方法是Promise.race，写法和Promise.all差不多，不过他的意思是只要有一个请求成功就进行下一步，所以相应的返回值也不会是数组了，而是那个最先返回的结果。不常用。
但工作中会遇到一种情况是多个请求嵌套，第二个请求需要用到第一个请求成功返回的值作为参数，我看的教程中提到不能这样做，并且提到之后的generator会帮忙解决，但之后好像见过，就试着写了下，可能有不完善的地方，暂时看能满足需求。当第一个请求失败的时候便不会继续执行了，并且1中的返回的数据被用作下一个 then 中函数的参数。
运行这个程序的话需要用到服务器，mac 上我用的 XAMPP ，1.txt 和 2.txt 里面的都是 json 数据。
总结一下，只有当执行到 resolve 的时候才会去执行 then 中的，resolve 括号中的会作为下一个的then 中函数的参数。
如果 then 中返回的是普通变量，那么 return 的值就会作为先一个 then 的参数，如果 then 中是一个 Promise，那么 resolve 的括号中的值就作为参数。
这篇整理的挺好的，可以看下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js" charset="utf-8"></script>
<script>
new Promise((resolve, reject) => {
$.ajax({
url: '1.txt',
dataType: 'json',
success(json1) {
console.log('json1', json1);
var sum1 = [json1];
console.log('sum1:', sum1);
resolve(json1);
}
})
}).then(json1 => {
return new Promise((resolve, reject) => {
$.ajax({
url: '2.txt',
dataType: 'json',
success(json2) {
console.log('上一个请求传过来的参数：', json1);
var sum2 = [json1, json2];
console.log('sum2:', sum2);
}
})
})
})
</script>
</head>
<body>
</body>
</html>
generator
中间可以暂停，用 yield 来暂停，yield 只能用在 generator 函数中。
执行 generator 函数与普通函数有点区别，如下，执行 show 函数时会返回一个 generator 对象，当我们调用 next 的时候才会往下开始执行，直到 yield，再调用 next 再往下执行
function* show() {
console.log('第一步');
yield;
console.log('第二步');
}
let go = show();
go.next();
console.log('第一步和第二步中间的');
go.next();
// 开始了吗
// 第一步
// 第一步和第二步中间的
// 第二步
yield 还可以用来传值，如下
function* show() {
console.log('第一步');
let a = yield;
console.log('第二步',a);
}
let go = show();
go.next();
go.next(12);
// 第一步
// 第二步 12
yield 还可以有返回值，如下
function* show() {
console.log('第一步');
let a = yield '返回值';
console.log('第二步',a);
return 100;
}
let go = show();
let res1 = go.next();
console.log(res1);
let res2 = go.next(12);
console.log(res2);
// 第一步
// { value: '返回值', done: false }
// 第二步 12
// { value: 100, done: true }
但实际使用中，由于 generator 有各种问题，很快被 async/await 取代了，所以不需要太了解。
async/await
js 中解决异步操作的终极方案
同样的需求，就是等待第一个请求成功返回后再去请求第二个，看代码吧.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
(async () => {
let a = await $.ajax({url: '1.txt',dataType: 'json'});
let b = await $.ajax({url: `${a.a}.txt`,dataType: 'json'});
let c = await $.ajax({url: '3.json',dataType: 'json'});
console.log(a,b,c);
})()
</script>
</head>
<body>
</body>
</html>
当然，我们最好在请求的外边套一层 try/catch ，来处理异常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
async function test() {
try{
let a = await $.ajax({url: '1.txt',dataType: 'json'});
let b = await $.ajax({url: `${a.b}.txt`,dataType: 'json'});
let c = await $.ajax({url: '3.json',dataType: 'json'});
console.log(a,b,c);
}catch(e) {
console.log('数据请求错误');
throw new Error('错误');
}
}
test();
</script>
</head>
<body>
</body>
</html>
解构赋值
关于解构赋值看这篇就可以：链接
注：解构赋值必须定义和赋值同步完成
