前端学习笔记 --ES6新特性

前言

这篇博客是我在b站进行学习es6课程时的笔记总结与补充。

此处贴出up主的教程视频地址：深入解读ES6系列(全18讲)

1、ES6学习之路

1.1 ES6新特性

1. 变量
2. 函数
3. 数组
4. 字符串
5. 面向对象
6. Promise
7. generator	//类似于Promise
8. 模块化

1.2 变量

1.2.1 let、var、const和作用域

知识点：
1. ES6之前的JS只有函数作用域和全局作用域，ES6引入了let后新增了块级作用域，还引入const。
2. 所有window对象内置属性都拥有全局作用域。

var
1. 可以重复声明
2. 无法限制修改
3. 函数作用域（在函数体内可访问）

let
1. 不能重复声明
2. 变量（可以修改）
3. 块级作用域（在大括号{}内可访问）

<!--注意：var和let都存在变量提升，但是let在变量声明和初始化前的区间存在暂时性死区，无法调用-->

const
1. 不能重复声明
2. 常量（不能修改）
3. 块级作用域

[块级作用域]
说明：因为var是全局变量，js是单线程运行，而for循环是同步执行，onclick()是异步执行，所以for循环执行完成后，全局变量i为3，再执行onclick()就得到了3
var btn=document.getElementsByTagName('input');	//有三个input组件
for(var i=0;i<btn.length;i++){
	btn[i].onclick=function(){
		alert(i);	//一直弹出3，因为var没有块级作用域
	};
}

解决方法：
1.用函数封装一层（用立即执行函数），传递i
var btn=document.getElementsByTagName('input');	//有三个input组件
for(var i=0;i<btn.length;i++){
	(function (i){
		btn[i].onclick=function(){
			alert(i);	//分别弹出1，2，3
		};
	})(i);
}

2.把var改成let声明
var btn=document.getElementsByTagName('input');	//有三个input组件
for(let i=0;i<btn.length;i++){
	btn[i].onclick=function(){
		alert(i);	//弹出0,1,2
	};h
}

1.2.2 立即执行函数（IIFE / Immediately Invoked Function Expression）

此处引用自stpice的博客

知识点：
function foo(){}	//这是定义（Declaration），让解释器知道其存在，并不会立即执行
foo();	//这是语句，（Statement），解释器遇到它会执行

IIFE调用方式：
(function foo(){}());
(function foo(){})();
!function foo() {}();
+function foo() {}();
-function foo() {}();
~function foo() {}();

在需要表达式的场景下，就不需要用括号了：
void function(){}();
var foo = function(){}();
true && function () {}();
0, function () {}();

$(function(){})的用法：
$(document).ready(function(){
	console.log("ready");
});
等同于
$(function(){
	console.log("ready");
});

1.3 箭头函数

1.3.1 箭头函数基本用法

知识点：
箭头函数 ()=>{} 等价于 function(){}
当只有一个参数的时候，可以省略()，如 (res)=>{} 等价 res=>{}
当只有一个返回值时，可以省略{}，如 ()=>{return 0;} 等价 ()=>return 0;

1.3.2 调用位置和调用栈

此处引用自博主越努力越幸运_952c

知识点：
调用栈：调用栈主要是存放返回地址
调用位置：当前函数在代码中被调用的位置

function baz(){
	//当前调用栈是baz
	//当前调用位置是全局作用域
	bar();	//<--bar的调用位置
}

function bar(){
	//当前调用栈是baz->bar
	//当前调用位置在baz中
	foo();	//<--foo的调用位置
}

function foo(){
	//当前调用栈是baz->bar->foo
	//当前调用位置是在bar中
}

baz();	//<--baz的调用位置

1.3.3 ES5和ES6的this指向（箭头函数）

此处引用自博主蔡香满屋

ES5：
函数的调用位置决定了this的绑定
全局环境下，this始终指向全局对象（window）
普通函数内部的this分为两种情况：严格模式和非严格模式

非严格模式：this默认指向全局对象window
function f2(){
	return this;
}
f2()===window;	//true

严格模式：this为undefined
function f2(){
	"use strict";	//使用严格模式
	return this;
}
f2()===undefined;	//true

ES6:
箭头函数的定义位置决定了this的绑定
所以call()/apply()/bind()方法对于箭头函数来说只是传入参数，不会影响this值

var Animal=function(){
	this.name="Animal";	//下面那一行的this指向的时这外面的this
	this.speak=(name,words)=>{
		console.log(this.name+'is saying'+words+'.');
	}
}

var cat=new Animal();
cat.speak("cat","miao~");	//Animal is saying miao~

1.4 函数的参数扩展

知识点：
...可以用于展开/收集参数

[收集参数]
function show(a,b,...args){	//...args必须是最后一个形参
	alert(a);
	alert(b);
	alert(args);	//输出3,4,5,6
}
show(1,2,3,4,5,6);

[展开参数]
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr=[...arr1,...arr2];	//等价于arr=[1,2,3,4,5,6]

1.5 解构赋值

知识点：
1. 左右两边结构必须一样
2. 右边的格式必须是合法的
3. 声明和赋值不能分开

let [a,b,c]=[1,2,3];	//把1,2,3分别赋值给a,b,c
let [{a,b,c},[d,e,f],g,e]=[{a:1,b:2,c:3},[1,2,3],"string",1];
let [json,arr,s,i]=[{a:1,b:2,c:3},[1,2,3],"string",1];	//注意与上式的区别

1.6 数组

1.6.1 map（映射）

知识点：
map映射可以实现两个数组间的对应映射，比如下面a[]，b[]两个数组间的元素一一对应：
a=[10,60,88,50,30];
b=['不及格','及格','及格','不及格','及格']

let score=[19,85,99,25,90];
let result=score.map(item=>item>=60?'及格':'不及格');
alert(score);	//分别输出19，85，99，25，90
alert(result);	//分别输出'不及格','及格','及格','不及格','及格'

1.6.2 reduce（汇总）

知识点：
reduce将数组[1,2,3]各个元素相加得到总数5

<!--将数组元素相加求和-->
let arr=[12,69,180,8763];
let result=arr.reduce(function(tmp,item,index){	//tmp代表两数相加产生的中间数，item表示当前第二个加数，index为索引（第一次运算得到中间数后为2）
	return tmp+item;
});

<!--求数组元素相加后的平均数-->
let arr=[12,69,180,8763];
let result=arr.reduce(function(tmp,item,index){
	if(index!=arr.length-1){	//不是最后一次运算
		return tmp+item;
	}else{
		return (tmp+item)/arr.length;
	}
});
alert(result);

1.6.3 filter（过滤器）

知识点：
filter将返回true或false来实现过滤

<!--过滤得到能被3整除的数-->
let arr=[12,5,8,99,27,36,75];
let result=arr.filter(item=>item%3==0);
alert(result);

1.6.4 forEach（循环迭代）

知识点：
forEach迭代输出数组的元素

let arr=[12,5,8,9];
arr.forEach((item,index)=>{	//index可加可不加
	alert(index,": ",item);
});

1.6.5 map和forEach的异同点

相同点：
都是遍历数组的每一项
执行匿名函数时都支持传入三个参数：item,index,arr	//item为当前项，index为索引，arr为原数组

不同点：
map会分配内存空间存储新数组并返回，forEach不会返回
forEach对数据的操作会改变原数组，map不会改变原数组，而是会返回一个新数组

1.7 字符串

1.7.1 startsWith和endsWith

知识点：
startsWith和endsWith通过判断字符串开头或结尾是否含有特定字符串来返回true和false

1.7.2 字符串模板：` 搭配 ${} 连接字符串

知识点：
可以直接把东西塞到字符串里面	$(东西)
可以折行书写代码

let title='标题';
let content='内容';

旧的写法：
let str='<div>\	//折行需要加'\'
	<h1>'+title+'</h1>\
	<p>'+content+'</p>\
</div>';

新的写法：
let str=`<div>	//使用反引号包裹
	<h1>$(title)</h1>	//不需要加'+'连接符
	<p>$(content)</p>
</div>`;

1.8 面向对象

1.8.1 老版本JS

缺点：
面向对象概念模糊，类和函数的不分家
方法需要在外面用prototype定义

<!--构造一个类和继承-->
function User(name,pass){
	this.name=name;
	this.pass=pass;
}

User.prototype.showName=function(){
	alert(this.name);
}

User.prototype.showPass=function(){
	alert(this.pass);
}

var u1=new User('zhang','123');

u1.showName();
u1.showPass();

//---------------继承User----------------

function VipUser(name,pass,level){
	User.call(this,name,pass);	//call实现继承
	this.level=level;
}

VipUser.prototype=new User();
VipUser.prototype.constructor=VipUser;	//个人猜测这里是加入User后，重新构造VipUser

VipUser.prototype.showLevel=function(){
	alert(this.level);
}

var v1=new VipUser('zhang','123',3);

v1.showName();
v1.showPass();
v1.showLevel();

1.8.2 ES6

优点：
强化面向对象概念，区分函数和类
class关键字、构造器和类分开了
class里面直接加方法

<!--构造一个类和继承-->
class User{
	constructor(name,pass){	//构造器
		this.name=name;
		this.pass=pass;
	}

	showName(){	//方法
		alert(this.name);
	}

	showPass(){
		alert(this.pass);
	}
}

var u1=new User('zhang','123');

u1.showName();
u1.showPass();

//---------------继承User----------------

class VipUser extends User{
	constructor(name,pass,level){
		super(name,pass);	//super关键字继承父类
		this.level=level;
	}

	showLevel(){	//直接在class里面加方法
		alert(this.level);
	}
}

var v1=new VipUser('zhang','123',3);

v1.showName();
v1.showPass();
v1.showLevel();

1.8.3 面向对象应用--React

React特点:
1. 强调组件化，一个组件即一个class
2. 强依赖与JSX（JSX==babel==browser.js）

（这里先简单介绍一下react框架，后续将会详细学习）

1.9 JSON

1.9.1 JSON和字符串之间的互换

知识点：
1. JSON转换成字符串：JSON.stringfy()
2. 字符串转换成JSON：JSON.parse()
3. 把字符串作为URI组件进行编码：encodeURIComponent()
4. JSON的标准写法：
 · 所有key和字符串类型的value都要用双引号包裹
 · 最外层用单引号包裹

eg：let str='{"a":12,"b":"hello"}';

1.9.2 JSON简写

知识点：
1. 名字一样可以简写（key和value一样）
2. 方法可以简写

eg：
<!--名字简写-->
let a=12;
let b=5;
let json={a:a,b:b};	//可简写为：let json={a,b};

<!--方法简写-->
let json={
	a:12,
	show:function(){	//可简写为：show(){alert(this.a);}
		alert(this.a);
	}
};

1.10 Promise

1.10.1 Promise简介与基本用法

知识点：
Promise的出现解决了ajax异步加载时代码复杂的问题，在较新版本的ajax中有封装了Promise

<!--Promise的基本写法-->

let p = new Promise(function(resolve,reject){
	$.ajax({
		url:'hello.txt',
		dataType:'json',
		success(arr){
			resolve(arr);	//执行成功调用resolve()返回arr
		},
		error(err){
			reject(err);	//执行失败调用reject()返回err
		}
	})
});

p.then(function(arr){	//接受resolve()返回的参数
	console.log('成功',arr);
},function(err){	//接受reject()返回的参数
	console.log('失败',err);
});

1.10.2 Promise.all()

知识点：
当有多个Promise一起异步执行时，使用Promise.all()来返回多个Promise调用结果

let p1 = new Promise(functioin(resolve,reject){...});

let p2 = new Promise(functioin(resolve,reject){...});

Promise.all([p1,p2]).then(arr=>{	//此处也可简写成箭头函数
	let [res1,res2]=arr;	//解构赋值
	console.log(res1,res2);
},err=>{
	let [err1,err2]=err;
	console.log(err1,err2);
});

1.10.3 Promise.race()

知识点：
与Promise.all()用法相似，原则是谁先来先返回谁，即哪个Promise返回的值快就返回谁，可以用于超时处理

Promise.race([p1,p2]).then(results=>{},err=>{});

1.11 generator

1.11.1 generator简介

知识点：
generator（生成器），执行过程中可以暂停去执行其他函数
generator跟promise相似，用于异步回调处理，异步的请求可以用类似同步的逻辑来写

普通函数异步请求：
function 函数(){
	代码...

	ajax(xxx,function(){
		代码...
	});
}

generator异步请求：
function *函数(){	//*不能省略
	代码...

	yield ajax(xxx);

	代码...
}

1.11.2 yield介绍

知识点：
yield把函数分成了几部分，通过调用next()来分别执行
yield可以传参和返回

传参：
function *show(){
	alert('a');

	let a=yield;	//执行第二个next的时候把5赋值给a

	alert('b');
	alert(a);	//输出5
}

let gen=show();
gen.next(12);	//执行yield的上半部分
gen.next(5);	//执行yield的下半部分

返回：
function *show(){
	alert('a');

	yield 12;	//返回12给第一个next

	alert('b');

	return 55;	//返回55给第二个next
}

let gen=show();

let res1=gen.next();
console.log(res1);	//输出{value:12,done:false}

let res2=gen.next();
console.log(res2);	//输出{value:55,done:true}

1.11.3 generator实例

知识点：
在使用前需要安装runner，并引入jquery.js（用于ajax）和runner.js

runner(function *(){

	//使用同步的写法实现异步的请求

	let data1=yield $.ajax({url:'data/1.txt',dataType:'json'});
	let data2=yield $.ajax({url:'data/2.txt',dataType:'json'});
	let data3=yield $.ajax({url:'data/3.txt',dataType:'json'});

	console.log(data1.data2.data3);
});

1.12 回调函数的对比

知识点：
1. 在同时请求多条数据的时候，promise和generator方法效果差不多

<!--传统回调-->
//第一层
$.ajax({
	url:xxx,
	dataType:'json',
	success(data1){
		//第二层
		$.ajax({
			url:xxx,
			dataType:'json',
			success(data2){
				//第三层
				$.ajax({
					url:xxx,
					dataType:'json',
					success(data3){
						//OK
					},error(){
						alert('失败');
					}
				});
			},error(){
				alert('失败');
			}
		});
	},error(){
		alert('失败');
	}
});

<!--promise-->
Promise.all([
	$.ajax({url:xxx,dataType:'json'}),
	$.ajax({url:xxx,dataType:'json'}),
	$.ajax({url:xxx,dataType:'json'}),
]).then(res=>{
	//OK
},err=>{
	alert('失败');
});

<!--generator-->
runner(function *(){
	let data1=yield $.ajax({url:xxx,dataType:'json'});
	let data2=yield $.ajax({url:xxx,dataType:'json'});
	let data3=yield $.ajax({url:xxx,dataType:'json'});

	//OK
});

2. 在请求完数据后，通过数据的值来判断下一条请求时，generator>传统回调>promise

<!--传统回调-->
$.ajax({url:'getUserData',dataType:'json',success(userData){
	if(userData.type=='vip'){
		$.ajax({url:'getVipData',dataType:'json',success(items){
			//OK
		},error(err){
			alert('失败');
		}})
	}
},error(err){
	alert('失败');
}})

<!--promise-->
Promise.all([
	$.ajax({url:'getUserData',dataType:'json'})
]).then(res=>{
	let userData=res[0];

	if(userData.type=='vip'){
		Promise.all([
			$.ajax({url:'getVipData',dataType:'json'})
		]).then(res=>{
			//OK
		},err=>{
			alert('失败');
		});
	}
},err=>{
	alert('失败');
});

<!--generator-->
runner(function *(){
	let userData=yield $.ajax({url:'getUserData',dataType:'json'});

	if(userData.type=="vip"){
		let items=yield $.ajax({url:'getVipData',dataType:'json'});
		//OK
	}
});