ES6学习笔记

参考书在线阅读：《ES6标准入门（第三版）》

let

let a;
let b,c,d;
let e=100;
let f=521, g='iloveyou', h=[];

1. 变量不能重复声明。（var可以重复声明）

   let a=1;
   //let a=2;//×

2. 块级作用域
   ES5中的三种作用域：全局，函数，eval(严格模式)

   {
       let doge='wangwang';
   }
   console.log(doge);//取不到，但是var取得到

3. 不存在变量提升

   console.log(song);
   var song='海上日记';
   //相当于：
   var song;
   console.log(song);//undefined
   var song='海上日记';
   
   console.log(song);//使用let则会报错
   let song='一程山路';

4. 不影响作用域链

   {
       let master='miaomiao';
       function playWithCat(){
           console.log(master);
       }
       playWithCat();//可以读取
   }

   以for循环为例：

   for(let i=0;i<items.length;i++){
       items[i].onclick=function(){
           items[i].style.background='pink';
       }
   }

   结构为： for（单次表达式1;条件表达式2;末尾循环体3）{中间循环体;} 相当于：

   {
       var i=0;
   }
   {
       var i=1;
   }
   {
       var i=2;
   }

   i为全局变量，所以循环结束时，i=item.length，但此时items[i]取不到值。 将var改为let可解决问题：

   {
       let i=0;
   }
   {
       let i=1;
   }
   {
       let i=2;
   }

   这样数组的每一项都能得到修改。 所以以后for循环尽量用let声明初始值。

const

1. 一定要赋初始值
2. 一般常量使用大写（不强制）
3. 常量值不能修改
4. 块级作用域
5. 对于数组和对象的元素修改，不算作对常量的修改，不会报错

   const ANI=['Aria','Digimon','OnePiece'];
   ANI.push('IScream');//可以修改

变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

1. 数组的解构

   const F4=['佐助','罗夏','路飞','白龙'];
   let [sasuke,rorschach,luffy,haku]=F4;
   console.log(sasuke);//佐助
   console.log(rorschach);//罗夏
   console.log(luffy);//路飞
   console.log(haku);//白龙

2. 对象的解构

   const rorschach={
       name:'罗夏',
       age:28,
       money:function(){
           console.log('我有很多钱');
       }
   };
   let {name, age, money}=rorschach;
   console.log(name);//罗夏
   console.log(age);//28
   console.log(money);//function...
   money();//我有很多钱

模板字符串

ES6引入了新的声明字符串的方式[``]反引号。

1. 声明

   let str=`我也是一个字符串哦`;
    console.log(str, typeof str);//我也是一个字符串哦 string

2. 内容中可以直接出现换行符
   普通的引号无法换行，只能用加号+拼接。

   let str=`
   <ul>
       <li>a</li>
       <li>b</li>
       <li>c</li>
   </ul>`;

3. 变量拼接

   let lovest='水星领航员';
   let out=`我最喜欢的番剧是${lovest}`;
   console.log(out);//我最喜欢的番剧是水星领航员

对象的简化写法

ES6允许在大括号里直接写入变量和函数，作为对象的属性和方法。书写更简洁。

let name='长门';
let change=function(){
    console.log('一袋米哦扛几楼');
}
const juezhao={
    name,
    change,
    //improve:function{
    //    console.log('神罗天征');
    //}
	//简写为：
    improve(){
        console.log('神罗天征');
    }
}

箭头函数

let fn=(a,b)=>{...};

1. this是静态的，this始终指向函数声明时所在作用域下的this的值

   function a(){
   	console.log(this.hh);
   }
   let b=()=>{
   	console.log(this.hh);
   }
   window.hh='window的属性';
   const bianliang={
   	hh:'bianliang的属性'
   }
   
   //直接调用：this都是指向window
   a();//window的属性
   b();//window的属性
   
   //call方法调用：可以改变函数内部this的值
   a.call(bianliang);//bianliang的属性
   b.call(bianliang);//window的属性 （箭头函数的this不被改变）

2. 不能作为构造函数实例化对象

   let Artist=(name,album)=>{
   	this.name=name;
   	this.album=album;
   }
   let hikaru=new Artist('宇多田光','First Love');
   console.log(hikaru);//报错

3. 不能使用arguments(用于保存实参)变量

   let fn=()=>{
   	console.log(arguments);
   }
   fn(1,2,3);//报错

4. 箭头函数的简写
   （1）省略小括号，当形参有且只有一个的时候

   let add=n=>{
   	return n+n;
   }
   console.log(add(9));

   （2）省略花括号，当代码体只有一条语句的时候，此时return必须省略，且语句的执行结果就是函数的返回值

   let add=n=>n*n;
   console.log(add(9));

5. 应用

   //需求：点击div 2s后变成粉色
   let ad=document.getElementById('ad');
   //普通函数的写法：
   ad.addEventListener('click',function(){
   	let _this=this;//this的常见命名：_this, that, self
   	setTimeOut(function(){
   		_this.style.background='pink';
   	},2000);
   });
   //箭头函数的写法：
   ad.addEventListener('click',function(){
   	setTimeOut(()=>{
   		this.style.background='pink';//这里的this指代的就是该函数外层作用域的事件源ad
   	},2000);
   });

   箭头函数适合与this无关的回调：定时器，数组的方法回调。
   箭头函数不适合与this有关的回调：事件回调，对象的方法。

函数参数的默认值设置

ES6允许给函数参数赋初始值。

1. 形参初始值：具有默认值的参数，一般位置靠后（潜规则）。

   function add(a,b,c=10){
   	return a+b+c;
   }
   let result=add(1,2);
   console.log(result);//13

2. 与解构赋值结合使用

   function fn({a,b,c='hhh'}){
   	console.log(a);
   	console.log(b);
   	console.log(c);
   }
   fn({
   	a:'111',
   	b:'222'
   });

rest

ES6引入rest参数，用于获取函数的实参，用来代替arguments。

//ES5获取实参的方式：
function fn(){
	console.log(arguments);
}
fn('哈哈','呵呵','嘿嘿');//打印为对象

//ES6的rest参数：
function fn2(...args){
	console.log(args)
}
fn2('哈哈','呵呵','嘿嘿');//打印为数组，可以用数组的方法：filter,some,every,map 提高了对参数处理的灵活程度

如有多个参数，rest参数必须要放到最后。

扩展运算符[…]

扩展运算符能将数组转换为逗号分隔的参数序列。

const girls=['花花','泡泡','毛毛'];
function monster(){
	console.log(arguments);
}
monster(...girls);//ES5: monster('花花','泡泡','毛毛');
//数组解构

1. 数组的合并

   const girls=['Alicia','Akira','Athena'];
   const girls2=['Akari','Aika','Alice'];
   //ES5:
   const ariaSpirit1=girls.concat(girls2);
   console.log(ariaSpirit1);//['Alicia','Akira','Athena','Akari','Aika','Alice']
   //ES6:
   const ariaSpirit2=[...girls,...girls2];
   console.log(ariaSpirit2);//['Alicia','Akira','Athena','Akari','Aika','Alice']

2. 数组的克隆

   const zm=['A','B','C'];
   const zm2=[...zm];
   console.log(zm2);//['A','B','C']  浅拷贝

3. 将伪数组转为真正的数组

   const div=document.querrySelectorAll('div');
   const divArr=[...div];
   console.log(divArr);

Symbol

ES6引进的新的原始数据类型，表示独一无二的值，是一种类似字符串的数据类型。

1. 特点
   （1）Symbol的值是唯一的，用来解决命名冲突的问题；
   （2）Symbol的值不能与其它数据进行运算、拼接、对比；
   （3）Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

   let s =Symbol();
   console.log(s,typeof s);//Symbol() "symbol"
   
   let s2=Symbol();
   let s3=Symbol();
   console.log(s2===s3);//false 
   //symbol好比身份证，参数是姓名
   
   let s4=Symbol.for('One Piece');
   console.log(s4, typeof s4);//Symbol(One Piece) "symbol"
   
   let s5=Symbol.for('One Piece');
   console.log(s4===s5);//true

   目前所学的前端数据类型：
   USONB you are so niubility
   u undefined
   s string symbol
   o object
   n null number
   b boolean

2. 使用：给对象添加属性和方法

   //写法一：
   let game={
   	name:'扫雷'
   };
   let methods={
   	up:Symbol(),
   	down:Symbol()
   };
   game[methods.up]=function(){
   	console.log(1);
   };
   game[methods.down]=function(){
   	console.log(2);
   }
   
   //写法二：
   let youxi={
   	name:'连连看',
   	[Symbol('say')]:function(){
   		console.log(3);
   	},
   	[Symbol('run')]:function(){
   		console.log(4);
   	}
   }

   （不太清楚该功能的具体使用场景，和ES5相比有什么优势…）

3. 11个Symbol内置值（属性）

   Symbol内置值	用法
   Symbol.hasInstance	当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
   Symbol.isConcatSpreadable	对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat() 时， 是否可以展开。
   Symbol.species	创建衍生对象时，会使用该属性
   Symbol.match	当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
   Symbol.replace	当该对象被 str.replace(myObject) 方法调用时，会返回该方法的返回值。
   Symbol.search	当该对象被 str.search (myObject) 方法调用时，会返回该方法的返回值。
   Symbol.split	当该对象被 str.split(myObject) 方法调用时，会返回该方法的返回值。
   Symbol.iterator	对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
   Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
   Symbol. toStringTag	在该对象上面调用 toString 方法时，返回该方法的返回值
   Symbol. unscopables	该对象指定了使用 with 关键字时，哪些属性会被 with 环境排除。

迭代器

迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。

1. ES6创造了一种新的遍历命令for…of循环，iterator接口主要供for…of消费。
2. 原生具备iterator接口的数据（可用for…of遍历）：
   （1）Array
   （2）Arguments
   （3）Set
   （4）Map
   （5）String
   （6）TypedArray
   （7）NodeList
3. 工作原理
   （1）创建一个指针对象，指向当前数据结构的起始位置；
   （2）第一次调用对象的next方法，指针自动指向数据结构的第一个成员；
   （3）接下来不断调用next方法，指针一致往后移动，直到指向最后一个成员。
4. 应用：自定义遍历数据

   const std={
   	name:'Sam',
   	score:[
   		60,
   		80,
   		90
   	],
   	[Symbol.iterator](){
   		let index=0;
   		let _this=this;
   		return{
   			next:function(){
   				if(index<_this.score.length){
   					const result= {value:_this.score[index],done:false};
   					index++;
   					return result;
   				}else{
   					return {value:undefined,done:true}
   				}
   			}
   		};
   	}
   }
   //对对象的遍历
   for(let v of std){
   	console.log(v);
   }

生成器

生成器其实就是一个特殊的函数。
用来进行异步编程。
ES5使用纯回调函数、node、fs、ajax、mongodb进行异步编程。

1. 使用生成器函数

   function * gen(){
   	console.log('hello');
   }
   let iterator=gen();
   console.log(iterator);//直接调用显示函数，函数本身不执行
   
   //在生成器函数可以出现yield语句：yield相当于函数代码的分隔符
   function * gen2(){
   	//三个分隔符产生四块代码，由next方法执行
   	console.log(111);
   	yield '哈哈';
   	console.log(222);
   	yield '呵呵';
   	console.log(333);
   	yield '嘿嘿';
   	console.log(444);
   }
   let iterator=gen2();
   iterator.next();//111 {value: '哈哈', done: false}
   
   //在上面的代码执行完后再执行这个：
   iterator.next();
   iterator.next();//222 333 {value: '嘿嘿', done: false}
   
   //在上面的代码执行完后再执行这个：
   iterator.next();//444 {value: undefined, done: true}
   //遇到yield就暂停，调用next就继续
   
   //遍历的调用方法：
   for(let v of gen2()){
   	console.log(v);
   }//111 哈哈 222 呵呵 333 嘿嘿 444

2. 生成器函数参数

   function * gen(arg){
   	//三个分隔符产生四块代码，由next方法执行
   	console.log(arg);
   	let one= yield '哈哈';
   	console.log(one);
   	let two= yield '呵呵';
   	console.log(two);
   	let three= yield '嘿嘿';
   	console.log(three);
   }
   let iterator=gen('haha');
   iterator.next();//haha {value: '哈哈', done: false}
   //执行完上面再执行下面：
   iterator.next('hehe');//hehe {value: '呵呵', done: false}

3. 实例一
   1秒后输出111,2秒后输出222，三秒后输出333。

   //ES5的写法：回调地狱
   setTimeout(()=>{
   	consol.log(111);
   	setTimeout(()=>{
   		consol.log(222);
   		setTimeout(()=>{
   			console.log(333);
   		},3000);
   	},2000);
   },1000);
   
   //使用生成器函数：
   function one(){
   	setTimeout(()=>{
   		console.log(111);
   		iterator.next();
   	},1000);
   }
   function two(){
   	setTimeout(()=>{
   		console.log(222);
   		iterator.next();
   	},2000);
   }
   function three(){
   	setTimeout(()=>{
   		console.log(333);
   		iterator.next();
   	},3000);
   }
   function * gen(){
   	yield one();
   	yield two();
   	yield three();
   }
   let iterator=gen();
   iterator.next();

Set

let s= new Set();//集合
console.log(s,typeof s);//Set(0){} "Object"

let s2=new Set(['a','b','c']);
console.log(s2);//{"a","b","c"}
s2.add('d');
s2.delete('b');
console.log(s2.has('a'));//true

1. 数组去重：let result=[...new Set(arr)];
2. 交集：let result=[...new Set(arr)].filter(item=>{new Set(arr2).has(item)});（filter函数体内如果是true就留下重复的，false则去掉）
3. 并集：let result=[...new Set([...arr,...arr2])];
4. 差集：let result=[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)))

Map

ES6提供了Map数据结构，它类似对象，也是键值对集合。但是键的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Map也实现了iterator接口，所以可以使用“扩展运算符”和“for…of”进行遍历。new Map()

1. 属性和方法
   （1）size：返回Map的元素个数
   （2）set：增加一个新元素，返回当前Map
   （3）get：返回键名对象的键值
   （4）has：检测Map中是否包含某元素，返回boolean
   （5）clear：清空集合，返回undefined
   （6）delete：删除某个元素

Proxy

Proxy字面翻译为“代理”，从书面理论上来讲，是ES6中全新创建的一种构造函数，用于拦截对象属性的访问、赋值、函数调用的默认事件，从而进行更改。和后端语言的get/set写法类似，更改原来的取值赋值操作，通过一个自定义的过程得到新的结果，并返回出去。
那么这种技术是如何在软件中应用的呢？
比如变量赋值前的校验、记录对象取值赋值的操作日志、监控对象的性能等等，可以增强代码的安全性。
var proxy = new Proxy(target, handler);
先创建一个Proxy对象，该对象为ES6原生提供，Proxy对象有两个参数：第一个是目标对象，第二个对象用来放置拦截方法。

let my_obj={};
var proxy = new Proxy(my_obj, {
	//Proxy对象的第一个参数和get方法的第一个参数本质上是同一个对象，只不过Proxy从外界接收对象，内部传给get。
	get:function(target, propKey, receiver){...},//用于拦截“读”请求(my_obj.id 或 my_obj[id])；第一个参数为目标对象，第二个参数为属性名，第三个可选参数与Reflect.get有关
	set:function(target, propKey, value, receiver){...},//用于拦截“写”请求(my_obj.id=123 or my_obj[id]=123)；不一定要return，直接赋值即可(target[propKey]=value)
	apply:function(target, context, args){...},//用于拦截函数的调用、call操作、apply操作，如需在一系列判断后仍执行原函数调用，则在Proxy的apply内，return Reflect.apply(...arguments)；三个参数分别为：目标对象，目标对象上下文、目标对象的参数数组
	has:function(){...},//下次再学
	construct:function(){...},
	deleteProperty:function(){...},
	defineProperty:function(){...},
	getOwnPropertyDescriptor:function(){...},
	getPrototypeOf:function(){...},
	setPrototypeOf:function(){...},
	isExtensible:function(){...},
	ownKeys:function(){...},
	preventExtensions:function(){...}
});
my_obj.proxy=proxy;//便于通过对象直接调用

Reflect

1. ES6提供的新的API，将原本部署在Object上的方法复制到Reflect上（今后Object上的方法会逐渐废除），并做了优化，且未来新增的Object上的方法只部署在Reflect对象上。
2. Reflect对象方法与Proxy对象方法一一对应。
3. Reflect共有13个静态方法：(具体参数使用时再查)
   · （1）Reflect.get
   . （2）Reflect.set
   · （3）Reflect.apply
   · （4）Reflect.construct (提供一种不写new的构造函数写法)
   · （5）Reflect.defineProperty
   · （6）Reflect.deleteProperty
   · （7）Reflect.has (in运算符)
   · （8）Reflect.ownKeys (=Object.getOwnPropertyNames+Object.getOwnPropertySymbols, 返回字符串数组)
   · （9）Reflect.isExtensible
   · （10）Reflect.preventExtensions
   · （11）Reflect.getOwnPropertyDescriptor
   · （12）Reflect.getPrototypeOf (读取对象的__proto__属性)
   · （13）Reflect.setPrototypeOf

Promise

Promise，译为“承诺”（只有异步操作能改变Promise对象的状态：Pending->Fulfilled(Resolved) or Pending->Rejected(Resolved)，且改变之后不会再改变）。
Promise是ES6引入的异步编程的新解决方案。语法上是一个构造函数，用来封装异步操作可以获取其成功或失败的结果。
Promise可以将异步操作以同步操作的流程表达出来。
缺点：一旦执行，无法中途取消。

1. Promise构造函数：Promise(excutor){}

   const p=new Promise(function(resolve,reject){
   	//将异步方法放在Promise实例内
   	setTimeout(function(){
   		//let data='haha';
   		//resolve(data);
   		let err='fail';
   		reject(err);
   	},1000);
   });
   //只要写了.then，实例内的异步方法就会给出回调结果到then内函数里
   p.then(function(value){
   	//resolve走这里（then的第一个参数函数）
   	console.log(value);
   },function(reason){
   	//reject走这里（then的第二个参数函数）
   	console.error(reason);
   });

   可以用于封装读取文件；
   可以用于封装ajax请求。

   const p=new Promise((resolve,reject)=>{
   	const xhr=new XMLHttpRequest();
   	xhr.open("GET","https://api.apiopen.top/getJoke");
   	xhr.send();
   	xhr.onreadystatechange=function(){
   		if(xhr.readyState===4){
   			//判断状态响应码：200-299
   			if(xhr.status>=200&&xhr.status<300){
   				resolve(xhr.response);
   			}else{
   				reject(xhr.status);
   			}
   		}
   	}
   });
   p.then(function(value){
   	console.log(value);
   },function(reason){
   	console.error(reason);
   });

2. Promise.prototype.then(fun)
   用于指定回调，为成功和失败结果作处理，对象状态由回调函数的执行结果决定。
   如果回调函数中返回的结果是非promise类型的属性，状态为成功，则返回值为对象的成功的值；
   如果回调函数中返回的结果是promise类型的，外面的promise返回的结果是什么，内层的promise状态就是什么，也可以抛出错误。new p1.then(return new p2...)
   then方法的返回的结果是一个Promise对象：所以可以链式调用，p.then(value=>{}).then(value=>{})...避免回调地狱。
3. Promise.prototype.catch(fun)
   用来指定promise对象失败的回调。
   p.catch(function(){...})
   catch写法优于在.then的第二个参数中定义reject函数，即只要写成：

   var p=new Promise(function(resolve,reject){...})
   	.then(function(data){...})
   	.catch(function(err){...});

   catch方法返回的也是一个Promise对象，因此也可以继续链式调用（如果是链式catch，下一个方法会捕获上一个方法中的错误）。
4. Promise.all([…])
   用于将多个Promise实例包装成一个Promise实例。
   All Fulfilled, Fulfilled.
   One Rejected, Rejected.(交集)

   var p=Promise.all([p1,p2,p3])
   .then(function(data){...})//第一个Rejected的进入这里
   .catch(function(err){...});

5. Promise.race([…])
   One Resolved/Rejected, Resolved/Rejected.(并集)
6. Promise.resolve(obj)
   转为Promise对象
   · (1) obj为一个Promise对象：返回obj
   · (2) obj为一个普通对象，有then方法：返回Promise对象，并立即执行then方法
   · (3) obj不是对象，或没有then方法：返回Promise对象，从生成时就是Resolved状态，没有异步操作
   · (4) Promise.resolve()直接执行，不带参数：返回Promise对象，在本轮事件循环结束时置为Resolved状态
7. Promise.reject(msg/obj)
   · (1) 参数为字符串：返回Promise对象，立即执行后状态为Rejected，msg为reject的理由
   · (2) 参数为含有then方法的对象：返回Promise对象，catch得到的参数为obj的then中reject的方法
8. 自己部署一个done方法（jquery已提供）

   Promise.prototype.done=function(onFulfilled, onRejected){
   	this.then(onFulfilled, onRejected)
   		.catch(function(reason){
   			setTimeout(()=>{throw reason},0);
   		});
   };
   AsyncFun()
   	.then(f1)
   	.catch(r1)
   	.then(f2)
   	.done();//放在回调链的尾端

   done会捕捉到任何错误，并向全局抛出。
   done不返回Promise对象，所以不能再接catch。
9. 自己部署一个finally方法
   不管Promise对象最后状态如何都会执行的操作。

   Promise.prototype.finally=function(callback){
   	let p=this.comstructor;
   	return this.then(
   		value=>p.resolve(callback()).then(()=>value),
   		reason=>p.resolve(callback()).then(()=>{throw reason})
   	);
   };
   AsyncFun()
   	.then(f1)
   	.finally(f2);//f2是一个回调函数，一定会执行

   finally并不是最后一环，done才是。
10. Promise.try(fun)
    不用区分fun是同步函数还是异步函数，如果是同步函数则同步执行，如果是异步函数则异步执行。

    Promise.try(fun)
    	.then(...)
    	.catch(...)

Iterator(遍历器) 和 for…of

1. Iterator是一种接口，可用于遍历操作。
2. Iterator创造指针对象，调用指针的next方法，指向下一个成员。
3. Iterator接口部署在Symbol.iterator属性上，原生具备Iterator接口的数据结构：Array,Map,Set,String,TypedArray,函数的arguments对象,NodeList对象。
4. 具有Iterator接口的数据结构，都可以用for…of循环。

class 类

ES6的class可以只看作是一个语法糖，只是让对象的写法更清晰，更像面向对象的编程的语法。

1. 声明类

   //ES5：
   function Phone(brand,price){//构造函数
   	this.brand=brand;
   	this.price=price;
   }
   Phone.prototype.call=function(){//添加方法
   	console.log('打电话');
   }
   let huawei=new Phone('华为',5999);//实例化
   huawei.call();
   
   //ES6:
   class Phone{
   	constructor(brand,price){
   		this.brand=brand;
   		this.price=price;
   	}
   	call(){//不支持ES5的对象完整形式
   		console.log('打电话');
   	}
   }
   let iphonex=new Phone('Apple',10000);

   constructor()方法就算没写，JS也会自动添加。

2. 静态成员

   //ES5:
   function Phone{...}
   Phone.name='手机';//往函数对象上添加属性和方法
   Phone.change=function(){...};
   Phone.prototype.size='5.5inch';
   let nokia=new Phone();
   console.log(nokia.name);//undefined 静态成员无法继承
   //实例对象身上没有构造函数对象身上的属性
   console.log(nokia.size);//5.5inch 原型上的属性是有的
   
   //ES6:
   class Phone{
   	static name='手机';//静态成员，实例化对象无法获取
   	static change(){...};
   }

3. 对象继承

   //ES5:
   function Phone(brand,price){
   	this.brand=brand;
   	this.price=price;
   }
   Phone.prototype.call=function(){
   	console.log('打电话');
   }
   function SmartPhone(brand,price,color,size){
   	Phone.call(this,brand,price);
   	this.color=color;
   	this.size=size;
   }
   //设置子级构造函数的原型
   SmartPhone.prototype=new Phone;
   SmartPhone.prototype.constructor=SmartPhone;
   //声明子类的方法
   SmartPhone.prototype.photo=function(){...}
   SmartPhone.prototype.playGame=function(){...}
   const chuizi=new SmartPhone('锤子',2499,'黑色','5.5inch');
   console.log(chuizi);//brand√ price√ color√ size√ __proto__:Phone photo√ playGame√ __ptoto__: call√
   
   //ES6:
   class Phone{
   	constructor(brand,price){//构造方法
   		this.brand=brand;
   		this.price=price;
   	}
   	call(){
   		console.log('打电话');
   	}
   }
   class SmartPhone extends Phone{//构造方法
   	constructor(brand,price,color,size){
   		super(brand,price);//super是父类的constructor，包含了call
   		this.color=color;
   		this.size=size;
   	}
   	photo(){...}
   	playGame(){...}
   }
   const xiaomi=new SmartPhone('小米',799,'黑色','4.7inch');
   console.log(xiaomi);//子类属性+方法和父类属性+方法都在

4. 对象继承二：子类对父类方法的重写

   //ES6:
   class Phone{
   	constructor(brand,price){
   		this.brand=brand;
   		this.price=price;
   	}
   	call(){
   		console.log('打电话');
   	}
   }
   class SmartPhone extends Phone{
   	constructor(brand,price,color,size){
   		super(brand,price);
   		this.color=color;
   		this.size=size;
   	}
   	photo(){...}
   	playGame(){...}
   	call(){...}//父类包含这个方法，但是内容和父类不同
   }
   const xiaomi=new SmartPhone('小米',799,'黑色','4.7inch');

5. get和set

   class Phone{
   	get price(){
   		console.log('价格属性被读取了');
   		return '999';
   	}
   	set price(value){
   		console.log('价格属性被修改了');
   	}
   	let s=new Phone();//实例化一个对象
   	s.price='free';
   }

数值扩展

1. Number.EPSILON：js的最小精度
   Number.EPSILON ≈ 2.220446049250313080808472633361816E-16
   用于判断精度：if Math.abs(a-b)<Number.EPSILON
2. 二进制、八进制、十六进制
   let b=0b1010;//=十进制的10 二进制用0b开头
   let o=0o777;//=十进制的511 八进制用0o开头
   let x=0xff;//=十进制的255 十六进制用0x开头
3. Number.isFinite(n)：检测一个数是否为有限数

   Number.isFinite(100/0);//false
   Number.isFinite(Infinite);//false

4. Number.isNaN(n)：检测一个变量是否为NaN(not a number)
5. Number.parseInt(str)：字符串转整数 Number.parseFloat(str)：字符串转小数

   Number.parseInt('5211314love');//5211314  截断
   Number.parseFloat('3.1415926率');//3.1415926

6. Number.isInteger(n)：判断一个数是否为整数
7. Math.trunc(n)：将数字的小数部分抹掉
8. Math.sign(n)：判断一个数为正数、负数、还是零

   Math.sign(-100);//-1
   Math.sign(0);//0
   Math.sign(33);//1

对象方法扩展

1. Object.is(a,b)：判断两个值是否完全相等，一般情况下相当于===

   Object.is(NaN,NaN);//true
   NaN===NaN;//false

2. Object.assign(a,b)：对象的合并

   const s1={
   	a:1,
   	b:2,
   	c:3
   };
   const s2={
   	a:11,
   	b:22,
   	d:4
   }
   console.log(Object.assign(s1,s2));//{a:11,b:22,c:3,d:4}
   //结果：对象合并，相同属性以后一个为主

3. Object.getPrototypeOf：获取原型对象 Object.setPrototypeOf：设置原型对象

   const a={name:'aaa'};
   const b={age:18};
   Object.setPrototypeOf(a,b);//将b作为原型对象给a的__proto__属性
   //不建议使用，一般在Object.create时就定义好原型

模块化

模块化：将一个大的程序文件，拆分成多个小的文件，然后组合起来。

1. 优点：防止命名冲突，代码复用，高维护性
2. 已有的模块化产品：CommonJS=>NodeJS、Browserify，AMD=>requireJS，CMD=>seaJS
3. 模块化语法：
   export：用于规定模块的对外接口
   import：用于输入其他模块提供的接口
   (1)通用的导入方式

   //分别暴露
   export let a=1;
   export function b(){...}
   
   //统一暴露
   c:1;
   function d(){...}
   export {c,d};
   
   //默认暴露
   export default{
   	e:1,
   	f:function(){...}
   }

   <script type="module">
   	import * as m1 from './src/js/m1.js';
   	
   	m1.default.f();
   </script>

   （2）解构赋值形式

   //m1.js
   export let a=1;
   export function b(){...}
   
   //m2.js
   export let a=2;
   export let c='cc';
   
   //m3.js
   export default{
   	let a=3;
   	function d(){...}
   }

   <script type="module">
   	import {a,b} from './src/js/m1.js';//a,b可以直接使用
   	import {a as a1,c} from './src/js/m2.js';//重命名重名变量
   	import {default as m3} from './src/js/m3.js';//默认暴露必须要重命名
   </script>

   （3）简便形式，针对默认暴露

   <script type="module">
   	import m3 from './src/js/m3.js';
   </script>

   （4）使用模块化方式二

   //main.js
   import * as m1 from './src/js/m1.js';
   import * as m2 from './src/js/m2.js';
   import * as m3 from './src/js/m3.js';

   <script src="./src/js/main.js" type="module"></script>

4. babel对ES6模块化代码转换
   有的浏览器不一定支持在script标签里增加src属性的方式，所以用 babel 做一个转换，可以将比较新的ES6语法转为有些浏览器只能识别的ES5语法。
   （1）安装工具 babel-cli, babel-preset-env, browserify(webpack)
   （2）npx babel src/js -d dist/js
   （3）打包 npx browserify dist/js/app.js -o dist/bundle.js
5. ES6模块化引入NPM包

   //先 npm i jquery 安装包
   import $ from 'jquery';//原来的写法：const $ =require('jquery');

ES7新特性

1. Array.prototypr.includes

   const z=['a','b','c','d'];
   console.log(z.includes('a'));//true
   //与之相比，indexOf返回的是数字下标，includes更方便

2. 指数操作符 “ ** ”

   console.log(2 ** 10);//1024
   console.log(Math.pow(2,10));//1024

ES8新特性

1. async和await
   async和await两种语法结合可以让异步代码像同步代码一样。
   （1）async函数

• async函数的返回值为promise对象
• promise对象的结果由async函数执行的返回值决定

  async function fn(){
  	//return 'aaa';
  	//1.只要函数本身返回的不是一个promise对象，则async就能返回一个成功(resolved)的Promise对象
  	
  	//throw new Error('出错啦');
  	//2.抛出错误，返回的就是一个失败的Promise对象
  	
  	//3.返回的结果是一个Promise对象
  	return new Promise((resolve,reject)=>{
  		//resolve('成功的数据');
  		//reject('失败');
  	});
  }
  const result=fn();
  console.log(result);//与函数本身返回的结果一致

  （2）await表达式
• await必须写在async函数中
• await右侧的表达式一般为promise对象
• await返回的是promise成功的值
• await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

  const p=new Promise((resolve,reject)=>{
  	//resolve("成功的值");
  	reject("失败了");
  });
  async function main(){
  	try{
  		let result=await p;
  		console.log(result);
  	}catch(e){
  		console.log(e);
  	}
  }
  main();

  （3）例子：async与await结合读取文件内容

  const fs=require('fs');
  function readMd1(){
  	return new Promise((resolve,reject)=>{
  		fs.readFile("./xxx1.md",(err,data)=>{
  			if(err) reject(err);//如果失败
  			resolve(data);//如果成功
  		})
  	})
  }
  function readMd2(){
  	return new Promise((resolve,reject)=>{
  		fs.readFile("./xxx2.md",(err,data)=>{
  			if(err) reject(err);//如果失败
  			resolve(data);//如果成功
  		})
  	})
  }
  async function main(){
  	let result1 = await readMd1();
  	let result2 = await readMd2();
  	console.log(result1.toString());
  	console.log(result2.toString());
  }
  main();

  （4）async与await结合发送Ajax请求

  function sendAJAX(url){
  	return new Promise((resolve,reject)=>{
  		const x=new XMLHttpRequest();
  		x.open('GET',url);
  		x.send();
  		x.onreadystatechange=function(){
  			if(x.readyState===4){
  				if(x.status>=200&&x.status<300){
  					resolve(x.resopnse);
  				}else{
  					reject(x.status);
  				}
  			}
  		}
  	})
  }
  //promise then方法测试：
  const result_p = sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
  	console.log(value);
  },reson=>{});
  //async与await测试：
  async function main(){
  	let result =await sendAJAX("https://api.apiopen.top/getJoke");
  	consol.log(result);
  }
  main();

2. Object.values()
   返回一个给定对象的所有可枚举属性值的数组。

3. Object.entries()
   返回一个给定对象自身可遍历属性[key,value]的数组。

   const obj={
   	a:'aaa',
   	b:['b1','b2','b3'],
   	c:[333,444]
   };
   console.log(Object.keys(obj));//['a','b','c']
   console.log(Object.values(obj));//['aaa',['b1','b2','b3'],[333,444]]
   console.log(Object.entries(obj));//[0:['a','aaa'],1:['b',[...]],2:['c',[...]]]
   console.log(new Map(Object.entries(obj)));//{['a','aaa'],['b',[...]],['c',[...]]}

4. Object.getOwnPropertyDescriptors()
   返回指定对象所有自身属性的描述对象。
   configurable
   enumerable

ES9新特性

1. 对象的rest参数和spread扩展运算符

   function fn({a,b,...c}){...}
   fn({
   	a:'aaa',
   	b:123,
   	c1:'cc1',
   	c2:'cc2',
   	c3:333
   })
   
   const x1={x11:'content1'};
   const x2={x22:'content2'};
   console.log({...x1,...x2});//{x11:'content1',x22:'content2'}

2. 正则扩展-命名捕获分组

   let str='<a href="https://www.baidu.com">百度</a>';
   const reg=/<a href="(?<url>.*)">(?<text>.*)<\/a>/;
   const result=reg.exec(str);
   consolelog(result);//可以获取result.groups.url, result.groups.text

3. 正则扩展-反向断言
4. 正则扩展-dotAll模式

ES10新特性

1. Object.fromEntries
   Object.entries可以将对象转为二维数组，Object.fromEntries可以将二维数组转为对象（键值对）
2. 字符串方法扩展：trimStart 和 trimEnd
   指定清除字符串左侧空格和右侧空格
3. 数组方法扩展：flat 和 flatMap
   flat：将多维数组转为低维数组，从外往内展开，不加参数默认展开一层，参数为深度。
   flatMap：两个操作的结合，先map，后flat。
4. Symbol.prototype.description
   获取Symbol的字符串描述。

   let s=Symbol('name');
   consol.log(s.description);//name

ES11新特性

1. 私有属性

   class Person{
   	//公有属性
   	name;
   	//私有属性
   	#age;
   	#weight;
   	//初始化：构造方法
   	constructor(name,age,weight){
   		this.name=name;
   		this.#age=age;
   		this.#weight=weight;
   	}
   	intro(){
   		console.log(this.name);
   		console.log(this.#age);
   		console.log(this.#weight);
   	}
   }
   const girl=new Person('小红',18,'45kg');
   //console.log(girl.#age);//报错
   girl.intro();//可以获取私有属性

2. Promise.allSettled

   const p1=new Promise(...);
   const p2=new Promise(...);
   const result=Promise.allSettled([p1,p2]);//只要有一个成功就显示成功
   const result2=Promise.all([p1,p2]);//全都成功才不报错

3. String.prototype.matchAll
   适合数据的批量提取。

   const str=`...`;
   const reg=/.../;
   const result=str.matchAll(reg);

4. 可选链操作符

   function fn(x){
   	//const con=config && config.db && config.db.host;
   	const con=x?.name?.a;
   }
   // fn({
   // 	name:{
   // 		a:'aaa',
   // 		b:'bbb'
   // 	},
   // 	school:{
   // 		c:'ccc',
   // 		d:'ddd'
   // 	}
   // })
   fn();
   //即使fn没有传入用到的参数，也不会报错，免去了层层判断

5. 动态import
   ES6的模块化本身是静态的。

   const btn=document.getElementById('btn');
   btn.onclick=function(){
   	import('./hello.js').then(module=>{
   		module.hello();
   	})
   }

6. BigInt（大整型）数据类型

   let n=521n;
   //整型可以转成大整型
   let n2=123;
   console.log(BigInt(n2));//123n
   //应用于大数值运算
   let max=Number.MAX_SAFE_INTEGER;
   console.log(BigInt(max)+BigInt(1));

7. 绝对全局对象globalThis
   指向window对象。

编程风格（迷你知识点）

1. 建议不再使用var命令
2. let和const之间优先使用const
3. 静态字符串使用单引号，动态字符串使用反引号，不再使用双引号
4. 添加属性用Object.assign(obj,{name:’aa’});

End.🐧