一、ES简介

• ECMAScript，欧洲计算机制造商协会

• ES是一种标准，而JS是ES的一种实现

• 每年的ES版本中都会引入新特性

NRM是切换源的工具

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
   }

2. 遍历输出结果不同

   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
   }

3. 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]);

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

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                                        // 是否可以枚举
})

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，使’.'可以匹配换行符

对象扩展方法

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

私有属性

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

  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 = /

• .?(.?)<\/a>.?

  (.?)<\/p>/sg // s
  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