Es5 - 11 详解

一、ES简介

• ECMAScript，欧洲计算机制造商协会
• ES是一种标准，而JS是ES的一种实现
• 每年的ES版本中都会引入新特性
  
  
  
  
  
  

二、NRM的安装与使用

NRM是切换源的工具

ES6

2.1安装

• window命令：
  
  npm install -g nrm
• mac下命令：
  
  sudo npm install -g nrm

2.2 操作指令

• 查看可选源
  
  nrm ls
• 测试源的速度
  
  nrm test +源名称
• 切换源
  
  nrm use +源名称
• 增加定制源
  
  nrm add 源名 http://ip地址
• 删除源
  
  nrm del+源名

三、let const var

3.1 var 声明

delete只能删除对象的属性，不能删除变量

var a = 10;
delete a;
console.log(a) //10
b = 10;
delete b//b is not defind

说明b是属性，不是变量。b是全局变量window的属性

3.2 JS的问题

  var a = 10;
  b = 10;
  console.log(window.a)//10
  console.log(window.b)//10

可以看到 window.a也被打印出来了，如果有很多全局变量，就会造成变量污染,这是因为js本身没有块级作用域的问题

为了解决这一问题，let就诞生了

3.3 let

let a = 10;
console.log(a)//10
console.log(window.a) //undefind

• 可以看到window.a是undefined,说明let声明的变量不属于顶层对象window
• 不允许重复声明（多次声明同一变量）
• 不存在变量提升
• 暂时性死区（就是防止在声明变量之前去使用变量）
• 具有块级作用域

3.4 const

• 不属于顶层对象window
• 不允许重复命名
• 暂时性死区
• 具有块级作用域
• 不存在变量提升
• 声明常量
• 要赋初值

3.5 模板字符串

const name = 'gzq';
console.log(`username: ${name}`)//username: gzq

四、解构赋值

含义：找一定模式，从数组或对象中提取值，对变量进行赋值

4.1 数组结构赋值

cosnt [a,b,c] = [1,2,3]; //1,2,3

const [a,[b,c]] = [1,[2,3]]; //1,2,3

const [a,b,[c]] = [1,2,[3,4,]]; //1,2,3

const [a,b,c] = [1,2,[3,4]]// 1,2,[3,4]

const [a,b,c,d] = [1,2,[3,4]]// 1,2,[3,4] undefind

const [a,b,c,d=5] = [1,2,[3,4]]// 1,2,[3,4],5

const [a,b,c,d=5] = [1,2,[3,4],6]// 1,2,[3,4],6

4.2 对象解构赋值

const obj = {
	name: 'guozhiqiang',
	tag: '大帅哥'
}

const {name,tag} = obj;
console.log(name,tag) //guozhiqaing 大帅哥

• 变量起别名

const obj = {
	name: 'guozhiqiang',
	tag: '大帅哥'
}

const {name: tdfName,tag: tdfTag} = obj;
console.log(tdfName,tdfTag) //guozhiqaing 大帅哥

4.3 字符串解构赋值

const str = "guozhiqaing";
const [a,b,c,d,e,f] = str;
console.log(a,b,c,d,e,f)//guozhi

4.4 应用场景

• 对于有默认值的数组和对象
• 对参数的解构赋值

const foo=([a,b,c]) => {
	console.log(a,b,c)//1,2,3
}

foo([1,2,3]);

• 对返回值结构赋值

const foo=() {
	let user = {
		name: 'guozhiqaing',
		tag: '大帅哥'
	}
	return user;
}
const {name,tag} = foo();
console.log(name,tag)//guozhiqiang,大帅哥

• 引入组件时，按需引入

import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
  }
}
export default element

• 对json解构

const str = '{"name": "guozhiqiang","tag":"大帅哥"}'
const {name,tag} = JSON.parse(str);

五、数组的各种遍历方式

5.1 for

const arr = [1,2,3];
for(let i=0;i<arr.length;i++) {
	console.log(arr[i])//1,2,3
}

5.2 forEach

• 注意：forEach不支持break和continue关键字

const objArr = [1,2,3];
objArr.forEach((item,index) => {
	console.log(item)//1,2,3
})

5.3 map

• map的返回值是新数组，但不会改变原数组

const oldArr = [1,2,3];
const newArr = objArr.map(item => item*2);
	console.log(newArr)//[2,4,6]

5.4 filter

• 数组过滤 返回符合条件的元素组成新的数组返回

const arr = [1,2,3,4,5,6];
const newArr = arr.filter(item => item%2==0);
console.log(newArr)//[2,4,6]

5.5 some

• 返回值是布尔值，只要有一个满足要求就返回true

const arr =[1,3,5,7,8];
console.log(arr.some(item => item % 2==0)) true

5.6 every

• 检测数组中的元素是否都复合条件，如果是则返回true

const arr = [2,4,6,8,9];
console.log(arr.every(item => item % 2 == 0))

5.7 reduce

作为一个函数返回的累加器

const arr = [2,4,6,8,10];
const reslut = arr.reduce((pre,cur,index,arr) => {
	return pre+cur;
})
console.log(result)//30

5.8 for…in

一般不用来遍历数组，因为会把原型下的方法也遍历出来

const arr = [1,2,3];
for(let index in arr) {
	console.log(arr[index])//1,2,3
}

5.9 find

返回第一个通过测试的元素

const arr = [1,2,3,4];
const result = arr.find(item => item % 2 == 0);
console.log(result)//2

5.10 findIndex

返回第一个符合条件的元素的下标

const arr = [1,2,3,4];
const result = arr.findIndex(item => item % 2 == 0);
console.log(result)//1

5.11 for…of

var arr = [
    { name:'nick', age:18 },
    { name:'freddy', age:24 },
    { name:'mike', age:26 },
    { name:'james', age:34 }
];
for(var item of arr){
    console.log(item.name,item.age);//nick freddy,mike,james
}

5.12 for of 与 for in 区别

1. for of无法循环遍历对象

var userMsg = {
    0: 'nick',
    1: 'freddy',
    2: 'mike',
    3: 'james'
};

for(var key in userMsg){
    console.log(key, userMsg[key]);	//nick,freddy,mike,james
}
console.log('-----------分割线-----------');
for(var item of userMsg){
    console.log(item);//userMsg is not iterable
}

1. 遍历输出结果不同

var arr = ['nick','freddy','mike','james'];
for(var key in arr){
    console.log(key);	//0,1,2,3
}
console.log('-----------分割线-----------');
for(var item of arr){
    console.log(item);//nick,freddy,mike,james
}

1. for in 会遍历自定义属性，for of不会

var arr = ['nick','freddy','mike','james'];
arr.name = "数组";

for(var key in arr){
    console.log(key+': '+arr[key]);	//0:nick,1:freddy,2:mike,3:james,name: 数组
}
console.log('-----------分割线-----------');
for(var item of arr){
    console.log(item);//nick,freddy,mike,james
}

从以上例子不难看出来，for in遍历的是key值，for of遍历的是value值

六、数组的扩展

6.1 类数组（伪数组）

如下 都是类数组，可以用typeof instanceof Array.isArray来验证

const div1=document.getElementByTagName('div')//HTMLCollection
const div2=document.getElementByClassName('.xxx')//HTMLCollection []
const div3=document.querySelectorAll('div')//NodeList: [div.xxx]

console.log(typeof div1)//object
console.log(div1 instanceof Array)//false
console.log(Array.isArray(div1))//false

6.2 将伪数组转换成数组

6.2.1 Array.prototype.slice.call()

//将伪数组转化成数组
const res1 = Array.prototype.slice.call(div1);
const res2 = Array.prototype.slice.call(div2);
console.log(res1,res2)//[div.xx],[div.xx]

6.2.2 Array.from()

//将伪数组转化成数组
const res1 = Array.from(div1);
const res2 = Array.from(div2);
console.log(res1,res2)//[div.xx],[div.xx]

6.3 构造函数表示数组

const arr1 = new Array(1,2);
console.log(arr1);//[1,2]
const arr2 = new Array(3);
console.log(arr2);//[empty x 3]

显然第二种情况和我们想象的不太一样，我们想要的是[3],为了解决这一问题，我们就引入了Array.of

6.4 Array.of()

const arr1 = Array.of(3);
const arr2 = Array.of(1,'123',true,'good',{name: '郭志强',tag: '大帅哥'});
console.log(arr1);//[3]
console.log(arr2);//[1,'123',true,good,{...}]

6.5 copyWithin

//copyWithin 元素替换
//第一个元素 从那个位置开始替换 必选
//第二个元素 从那个位置开始截取 可选
//第三个元素 截取到第几个结束 可选 可为负数 即为倒数
const arr = [1,2,3,4,5]；
console.log(arr.copyWithin(2,3);//1,2,4,5,5

6.6 fill

• 将数组中的部分值和全部值替换为一个固有元素

//fill('value',start,end)
const arr = new Array(3).fill(7)
console.log(arr)//[7,7,7]

const arr1 = [1,2,3,4,5];
const res = arr1.fill('hi',2,4)
console.log(res)//[1,2,'hi','hi',5]

const arr2 = [1,2,3,4,5];
const res2 = arr2.fill(7);
console.log(res2)//[7,7,7,7,7]

6.7 indexOf和includes

• indexOf不能检测数组中是否有NAN
• NAN==NAN结果是false

const arr = [1,2,3,NaN];
console.log(arr.indexOf(NaN))//false
console.log(arr.includes(NaN))//true

七、函数的参数

7.1 ES5传参

function sayHi(a,b) {
	console.log(a,b);//hello undefind
}
sayHi('hello');

• 当y有默认值时

function sayHi(a,b) {
	b=b||'world';
	console.log(a,b)//hello,world
}
sayHi('hello')

• 上一步代码有一个问题，当y我们传0时 0===false
• 如果要解决这种问题，需要麻烦的判断
• 所以我们可以用ES6的传参方式来解决这一问题

7.2 ES6传参

• ES6解决参数默认值问题

  function sayHi(a,b='world') {
  	console.log(a,b)//hello,wrold
  }

• 参数变量是默认声明的

 function foo(x = 5) {
 	let x = 3;
 }
 foo();//报错 变量x已存在

• 参数名不允许重复
• 默认值应该放到最后边
• length能获取函数中没有指定默认值的参数的个数

funciton foo(a,b,c=2) {
	console.log(a,b,c)
}
console.log(foo.length)//2

• 默认参数作用域问题

const x = 2;
function foo1(x,y=x) {
	console.log(x,y)
}
foo1(5);//5,5

let x = 2;
function foo2(y=x) {
	let x = 5;
	console.log(x,y)
}
foo2()//5,2

function foo3(y=x) {
	let x = 5;
	console.log(x,y)
}
foo3()//报错 x is not defind

八、扩展运算符与rest参数

8.1 扩展运算符

• 把数组或类数组展开成用逗号分隔的值

function foo(a,b,c) {
	console.log(a,b,c);
}

foo(...[1,2,3])//1,2,3

• ES5合并数组

const arr1 = [1,2,3];
const arr2 = [3,4,5];
Array.prototype.push.apply(arr1,arr2);//1,2,3,3,4,5

• ES6合并数组

const arr1 = [1,2,3];
const arr2 = [3,4,5];
arr1.push(...arr2);//1,2,3,3,4,5

8.2 rest参数

• 把逗号隔开的值组成一个新的数组
• ES5不定参数求和

function foo(x,y,z) {
	let num =0;
	Array.prototype.forEach.call(arguments,function(item) {
		num+=item;
	})
	return num;
}

console.log(1,2,3)//6
console.log(1,2,3,4)//10

• ES6不定参数求和

function foo(x,y,z) {
	let num =0;
	Array.form(arguments).forEach(function(item) {
		num+=item;
	})
	return num;
}
console.log(1,2,3)//6
console.log(1,2,3,4)//10

九、箭头函数

9.1 ES5声明函数

• 第一种会预编译，第二种不会

function foo(x,y) {
	return x+y;
}

const foo = function(x,y) {
	return x+y;
}

9.2 ES6箭头函数

• this指向定义时所在的函数的对象，而不是调用时所在的对象
• 不可以当做构造函数
• 不可以使用arguments对象
• 定义后不可以修改this指向

const foo = (x,y) => x+y;
const res = foo(2,3);
console.log(res)//5

十、对象的的扩展

10.1 属性的简写

• 当属性值与属性相同时，可以这样简写

const name = 'gzq';
const age = 20；
const user = {
	name,
	age
}
console.log(user) //{name: 'gzq'，age:20}

10.2 属性名表达式

const name = 'gzq';
const age = 20；
const s = 'school'
const user = {
	name,
	age,
	[s]:'jssut'
}
console.log(user)//{name: 'gzq',age: 20,school:'jssut'}

10.3 方法的简写形式

• 注意： 对象里定义方法不要写箭头函数，因为this指向问题

const name = 'gzq';
const age = '20'；
const user = {
	name,
	age,
	study() {
		console.log('我是',this.name,'今年',this.age,‘岁’);
	}
}
user.study();//我是gzq今年20岁

10.4 Object.is()

• 判断两个值是否严格相等
• 与的区别是：会进行类型转换，而Object.is不会
• 与=的区别是：=会认为+0和-0相等，NumberNaN与NaN不相等，而Object.is不会

10.5 Object.assign()

• 对象复制

const name = 'gzq';
const age = 20；
const user = {
	name,
	age
}

const user2 = {...user};
console.log(user2)//{name: 'gzq',age: 20}

const user3 = {};
Object.assgin(user3,user2);
console.log(user3)//{name: 'gzq',age: 20}

• Object.assign()是浅拷贝
• 可以用于对象合并，将源对象的所有可枚举属性复制到对象中（第一个参数是对象，其余都是源对象）

10.6 in

10.6.1 判断对象是否包含某个属性

const x={
	a: 20,
	b: 30
}
console.log('y' in x)//false
console.log('a' in x)//true

10.6.2 数组里判断当前下标是否有值

const arr = [1,2,3];
console.log(2 in arr)//true
console.log(3 in arr)//falses

10.7 对象的遍历

const obj = {
	name: 'gzq',
	age: 18
}

for(let i in obj) {
	console.log(i,obj[i])//name,gzq,age,18
}

const obj = {
	name: 'gzq',
	age: 18
}
Object.keys(obj).forEach(item = > {
	console.log(item,obj[item])//name,gzq,age,18
})

const obj = {
	name: 'gzq',
	age: 18
}
Object.getOwnPropertyNames(obj).forEach(item => {
	console.log(item,obj[item])//name,gzq,age,18
})

const obj = {
	name: 'gzq',
	age: 18
}
Reflect.ownKeys(obj).forEach(item => {
	console.log(item,obj[item])//name,gzq,age,18
})

十一、深拷贝与浅拷贝

• Object.assign()是浅拷贝，拷贝引用类型时只是把地址指过去而已
• JSON.parse(JSON.stringify(obj))可以实现新拷贝

11.1 手写深拷贝

后续补上

十二、面向对象与面向过程

• 面向对象就是把物体本身看作是一个对象，再从对象本身具有的功能和方法出发
• 面向过程就是把大象装进冰箱一共分为三步，必须按照这个顺序进行
• JS是基于面向对象的编程语言
• 类（class）是对象（Object）的模板，定义了一组对象共有的方法和属性

十三、ES5中的类与继承

13.1 ES5中的类

function People(name, age) {
	this.name = name;
	this.age = age;
}
People.prototype.showInfo = function() {
	console.log(`我叫${name}，今年${age}岁`)
}

const user = new People('gzq',20);
user.showInfo()//我叫gzq，今年20岁

• 静态属性直接定义在类上，实例属性定义在构造函数中

People.sex = '男'

• 静态方法

People.showName() {
	console.log(People.sex);
}

• 实例方法都定义在类的原型上
• 静态方法里的this指向的是构造函数

13.2 ES5中的继承

13.2.1 构造函数的继承

function Father(name) {
	this.name = name;
}
Father.prototype.showName = function() {
	console.log(this.name);
}
function Son(name,age) {
	Father.call(this);
	this.age = age;
}

let s1 = new Son('大头',18);
console.log(s1.name)//大头
s1.showName()//报错，构造函数只能继承属性，不能继承方法

13.2.2 原型继承

Son.prototype = new Father();
Son.prototype.constructor = Son;

13.2.3 组合继承

function Father(name) {
	this.name = name;
}
Father.prototype.showName = function() {
	console.log(this.name);
}
function Son(name,age) {
	Father.call(this);
	this.age = age;
}
Son.prototype = new Father();
Son.prototype.constructor = Son;
let s1 = new Son('大头',18);
console.log(s1.name)//大头
s1.showName()//大头

十四、ES6的类与继承

14.1 ES6中的类

class People {
	constructor(name,age) {
		this.name = name;
		this.age = age;
	}

	showName() {
		console.log(this.name)
	}
}

const user = new People('gzq',20);
console.log(user.name)//gzq

14.2 ES6的继承

class People {
	constructor(name,age) {
		this.name = name;
		this.age = age;
	}

	showName() {
		console.log(this.name)
	}
}
class Coder {
	constructor(name,age,company) {
		super(name,age);
		this.company = company
	}
	showCompany() {
		console.log(this.company)
	}
}
const user = new Coder('gzq',18,'家里蹲');
user.showCompany();//家里蹲
user.showName();//gzq

14.3 定义静态属性

• class中目前不支持定义静态属性

class People {
	constructor(name,age) {
		this.name = name;
		this.age = age;
	}

	showName() {
		console.log(this.name)
	}

	static showAge() {
		console.log('111')
	}
}

People.showAge()//111

14.4 深入研究

http://caibaojian.com/es6/class.html

十五. 数据类型 Symbol

15.1 介绍

• ES6引入一种新的原始数组类型Symbol,表示独一无二的值。
• 它是javascript语言的第七种数据类型，是一种类似于字符串的数组类型

15.2 Symbol特点

• Symbol 的值是唯一的，用来解决命名冲容的问题
• Symbol 值不能与其他数据进行运算
• Symbol 定义的对象属性不能使用for.in 循环遍历，但是可以使用 Reflect. owners 来获取对象的所有键名

// 创建Symbol
let s = Symbol()
let s2 = Symbol('描述文字,相当于对这个变量的注释')
console.log(s, typeof s) // Symbol() "symbol"
console.log(s, typeof s2) // Symbol() "symbol"
console.log(Symbol('ddd')===Symbol('ddd'))	// false
// Symbol.for创建
let s3 = Symbol.for('yishen')
let s4 = Symbol.for('yishen')
console.log(s3===s4) // true

15.3 js基本数据类型

补充js中数据类型，7中基本数据类型+复杂数据类型object

USONB you are so niubility

u undefined

s string symbol

o object

n null number

b boolean BigInt

15.4 使用场景

• 向对象中添加方法

// 方法一
let game = {
  name:'俄罗斯方块',
  up:function(){console.log('我是up方法')},
  down:function(){console.log('我是down方法')}
}
let methods = {
  up:Symbol(),
  down:Symbol()
}
game[methods.up] = function(){
  console.log('我也是up方法')
}
game[methods.down] = function(){
  console.log('我也是down方法')
}
console.log(game)	// 如下图

• 给对象添加方法-------方法二
  
  

15.5 Symbol内置值

除了定义自己使用的Symbol值以外，ES6还提供了内置的Symbol值，执行语言内部使用的方法。

可以称这些方法为魔术方法，因为它们会在特定的场 景下自动执行。

可自定义返回结果

十六. 迭代器

16.1 介绍

• 迭代器(iterator)是一种接口，为各种不同的数据结构提供统一的访问机制。

• 任何数据结构只要部署iterator接口(对象里面的一个属性Symbol.iterator)，就可以完成遍历操作

• ES6创造了一种新的遍历命令 for … of 循环，iterator接口主要供 for … of消费

• 原生具备iterator接口的数据(可用for of 遍历)

• Array、Arguments、Set、Map、String、TypedArray、NodeList

16.2 工作原理

• 创建一个指针对象，指向当前数据结构的起始位置
• 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
• 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
• 每调用 next 方法返回一个包含 value 和 done 属性的对象
  
  
• 需要自定义遍历数据的时候，要想到迭代器

// 迭代器应用
const beijing = {
  name: '终极一班',
  stus: [
    'xiaoming',
    'xiaoning',
    'xiaotian',
    'knight'
  ],
  [Symbol.iterator]() {
    let index = 0
    let _this = this
    return {
      next: function () {
        if (index < _this.stus.length) {
          const result = {value: _this.stus[index],done: false}
          index++
          return result
        } else {
          return { value: undefined,done: true}
        }
      }
    }
  }
}
for (const v of beijing) {
  console.log(v)	//xiaoming xiaoning xiaotian knight
}

十七. 生成器

17.1 介绍

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

js的异步是单线程的

17.2 生成器的调用和声明

function * gen(){
  console.log(111)
  yield 'yiele是代码的分割符1'
  console.log(222)
  yield 'yiele是代码的分割符2'
  console.log(333)
  yield 'yiele是代码的分割符3'
  console.log(444)
}
let iterator = gen()
iterator.next()		//	111
iterator.next()		//	222

console.log(iterator.next())		//	{value:'yiele是代码的分割符1',done:false}
console.log(iterator.next())		//	{value:'yiele是代码的分割符2',done:false}

17.3 生成器的参数传递

• 生成器实例
  
  

十八. Promise

18.1 介绍

• Promise是ES6引入的异步编程的新解决方案。
• 语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

18.2 使用

• Promise构造函数:Promise(excutor){}
• Promise.prototype.then()
• Promise.prototype.catch()
• .then()返回的结果也是Promise对象，对象状态有回调函数的执行结果决定
• .then().then()可以链式调用

十九. 数组结构 Set&Map

19.1 介绍

19.1.1 Set

• ES6提供了新的数据结构 Set(集合)。类似于数组，成员的值都是唯一的。
• set实现了iterator接口，可以使用 扩展运算符 和 for…of进行遍历
• set的属性和方法
  
  

19.1.2 Map

• 它类似于对象，也是键值对的结合。“键”的范围不限于字符串，各种类型的(包含对象)都可以当做键
• Map也实现了iterator接口，可以使用扩展运算符和for…of遍历。
• Map的属性和方法
  
  

19.2 使用

19.2.1 Set

// 声明集合set
let s = new Set(['1', 'er', 'san', 'si', 'san'])
console.log(s, typeof (s))	// Set(4){"1", "er", "san", "si"}   "object"
// 集合会自动去重，可以利用这点做数组快速去重[...new Set(array)]
s.size()	// ->4
s.add('wu')	// ->{"1","er","san","si","wu"}

19.2.2 Map

var myMap = new Map();
var keyString = "a string"; 

myMap.set(keyString, "和键'a string'关联的值");

myMap.get(keyString);    // "和键'a string'关联的值"
myMap.get("a string");   // "和键'a string'关联的值"
                         // 因为 keyString === 'a string'

19.3 应用场景

19.3.1 Set

• 数组去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

• 并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}

• 交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

• 差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}

19.3.2 Map

• Map 与 Array的转换

var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

• Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);
console.log(original === clone);
// 打印 false。 Map 对象构造函数生成实例，迭代出新的对象。

• Map 的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

ES7新特性

Array.prototype.includes

• Includes 方法用来检测数组中是否包含某个元素，返回Boolean，indexOf也可以实现类似功能

const mingzu = ['西游记','红楼梦','三国演义','水浒传']
console.log(mingzhu.includex('西游记'))	// true

指数操作符 **

• ES7中引入指数运算符 ** ，用来实现幂运算，功能与Math.pow结果相同

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

ES8新特性

async和await

• async和await两种语法结合让异步代码像同步代码一样

async函数

• async函数的返回值为promise对象

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

await表达式

• await 必须写在async函数中

• await右侧的表达式一般为promise对象

• await返回的是promise成功的值

• await的promise失败了，就会抛出异常，需要通过 tru ... catch 捕获异常

对象方法扩展

const school = {	// 声明对象
  name:'qinghua',
  cities:['北京','上海','广州','深圳'],
  xueke:['前端','python','nodejs','php']
}
console.log(Object.keys(school))			// 获取所有的键   ["name", "cities", "xueke"]
console.log(Object.values(school))		// 获取有的值 ["qinghua", Array(4), Array(4)]
console.log(Object.entries(school))		// [[key1,value1],[key2,value2]...],可用于生产Map
console.log(new Map(Object.entries(school)))
console.log(new Map(Object.entries(school)).get('name'))	// 'qinghua'

console.log(Object.getOwnPropertyDescriptors(school))	// 返回对象属性的 描述对象   见下图
const obj = Object.create(null,{		// 第一个参数：原型对象，第二个参数：描述对象
  value:'yishe',										// getOwnPropertyDescriptors返回的就是描述对象
  writable:true,										// 是否可写，(writable cofigurable enumerable)属性特性
  cofigurable:true,									// 是否可以删除，属性特性克隆对象时也许会用到
  enumerable:true										// 是否可以枚举
})

ES9新特性

Rest参数、spread扩展运算符

• ES6中已经引入，在ES9中为对象提供了像数组一样的rest参数和扩展运算符

rest参数在对象中的应用
function connect({host,port,...user}){
  console.log(host)
  console.log(port)
  console.log(user)		// user是包含username和password的对象
}
conect({
  host:'127.0.0.1',
  port:3306,
  username:'root',
  password:'root'
})

• 扩展运算符在对象中的应用
  
  可以将对象展开成key:value，的形式；与展开数组类似
  
  

正则扩展

正则扩展-命名捕获分组

// 传统方式，没用正则扩展
let str = '<a href="http://blog.mdashen.com">yishenBlog</a>'
const reg = /<a href="(.*)">(.*)<\/a>/
console.log(reg.exec(str))	//正则匹配href属性的值，和标签内容内容
// 正则扩展
const reg2 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/	// 类似于给匹配到的内容起一个别名

正则扩展-反向断言

• 正则匹配时，有多个匹配到的内容；可以根据目标前面或后面，来对目标进行唯一性识别

let str = 'Js34342你知道吗555啦啦啦'
const reg = /\d+(?=啦)/	// 匹配后面是'啦'的数值	正向断言
const reg1 = /(?<=吗)\d+/	// 匹配前面是'吗'的数值	反向断言

正则扩展-dotAll模式

• dot . 元字符 除换行符以外的任意单个字符
• const reg = /正则内容/s ，末尾增加s，使’.'可以匹配换行符

ES10新特性

对象扩展方法

Object.fromEntries

• 用来创建一个对象，参数是一个二维数组或者Map对象( 将二维数组或者Map对象转化为对象 )
• 与Object.entries 为逆运算

字符串扩展方法

trimStart、trimEnd

• ES5中有 trim方法用来清除字符串两边的空白字符
• trimStart：清除左侧空白字符，保留右侧空白字符
• trimEnd：清除右侧空白字符，保留左侧空白字符

数组方法扩展

flat、flatMap

flap

• flap：拍打、平

• 将多维数组转化为低维数组 arr.flat(argus) 参数为深度，3维转1维深度为2

flapMap

• 如果arr.map()返回的是一个二维数组，可以使用flapMap代替map，返回一维数组
  
  

Symbol方法扩展

Symbol.prototype.description

• 获取Symbol的字符串描述

let s = Symbol('guozhiqiang')
s.description			// -> guozhiqiang

ES11新特性

私有属性

• 只能在类的内部对其进行修改和访问

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 Personn('小红',18,'45kg')
console.log(girl)	// 正常访问
console.log(girl.#age)	// 在类的外部无法访问私有属性

Promise.allSettled

• 接收一个promise数组，返回promise对象(永远是成功的状态)
  
  
• 返回的值是每一个promise的状态和结果

Promise.all([p1,p2])

• 全部成功，才返回成功，有一个失败就返回失败
• Promise.all 和 Promise.allSettled常用于批量异步任务

Promise.race([p1,p2])

• 返回最先完成的Promise任务

字符串扩展

String.prototype.matchAll

• 用来得到正则批量匹配得到的结果

let str = `
    <ul>
      <li>
        <a>肖申克的救赎</a>
        <p>上映日期：1994-0910</p>
      </li>
      <li>
        <a>阿甘正传</a>
        <p>上映日期：1994-0716</p>
      </li>
    </ul>
    `
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg		// [s](#正则扩展-dotAll模式)
const result = str.matchAll(reg)
// for (let v of result) {	// 与下面...一个功能
//   console.log(v)
// }
console.log([...result])

可选链操作符?.

• 按照操作符之前的属性是否有效，链式读取对象的属性或者使整个对象链返回 undefined

function main(config){
  const dbHost = config && config.db && config.db.host	// config &&判断config是否存在
  console.log(dbHost)								// 当config存在，才能读取config.db
}																		// 不先判断，当config不存在，直接config.db会报错
main({
  db:{
    host:'192.168.0.2',
    username:'root'
  }
})
// 可选链操作符?.
const dbHost = config?.db?.host	// 可以起到上述判断的作用
动态import
当使用到需要导入的模块时，才导入。提升加载效率

const btn = document.getElementById('btn')
btn.onclick = function(){
  import('./hello.js').then(module=>{		// import返回promise对象，module就是导入的对象
    module.hello()		// hello()hello.js中一个普通方法
  })
}

BigInt

• 用于大数值运算

let n = 521n	// 大整型
console.log(n,typeof(n))	// 521n "bigint"
let n1 = 521
BigInt(n1)	// 普通整型转大整型 -> 521n

let max = Number.MAX_SAFE_INTEGER	// 9007199254740991
console.log(max)
console.log(max+1)	// 正常
console.log(max+2)	// 不正常，在向后加，有的正常有的不正常

console.log(BigInt(max))
console.log(BigInt(max)+BigInt(1))	// 正常，BigInt 不能直接与Int运算，要先转成BigInt
console.log(BigInt(max)+BigInt(2))	// 正常

globalThis

• 始终指向全局对象，无论执行环境是什么(浏览器、nodejs)

• 浏览器下指：Window

• nodejs下指：global