ES6相关

一、新增let和const变量声明关键词

var关键词在函数外创建的变量是全局变量，放在window对象

let的特点：

1. let是一个块级作用域变量，只作用于代码块，不会作为window对象的属性

2. let创建变量不存在变量提升，变量必须先声明在使用

3. let 创建变量不能重复声明，可以赋值操作

const的特点：

1. const 创建一个只读常量，创建的变量不能重新赋值，声明之后变量不能修改

2. const创建的引用数据类型的值是可以修改属性

二、解构赋值

1. 数组模式：数组结构赋值，左右两边的结构相等，就可以自动结构赋值，右边结构小于左边，变量默认为underfined

let [a,b,c] = ["a1","b1","c1"] ===>a1,b1,c1
let [a1,b1,c1] = ["a1","b1"] ===>a1,b1,underfined

2. ...b：把剩余的值都赋值给b变量

let [a,b] =["a1","b1","c1","d1"] ===>a1 ["b1","c1","d1"]

3. 对象模式解构： 对象的属性名和属性值一致，可以简写为一个，也可以给默认值

4. 函数的参数解构：

function f1([a,b,c]){ //参数按数组结构
    console.log(a,b,c) 
}
f1(["a1","b1","c1"]) ===>a1,b1,c1
​
function f2({name,age}){
    console.log(name,age)
}
f2({name:"zhang san",age:18}) ===>zhangsan ,18

1. 字符串结构：结构为单个字符:

let [a,b] ="hello";
console.log(a,b) ===>he

三、字符串相关

1. 模板字符串：`` 包裹的是字符串模板，变量可以放入在${}

let [name,age,address] = ["zhangsan",12,"xx省xx市"]
let str=`姓名:${name}年龄:${age}地址:${address}`
console.log(str) //姓名:zhangsan年龄:12地址:"xx省xx市

2. includes(str) 返回的是一个bool值，表示是否包含str参数字符串

3. trimStart() 去掉头部的空格， trimEnd() 去掉尾部空格 ，trim()去掉前后空格

4. matchAll(str) 查询字符串所有参数str的字符，返回的是一个迭代器(迭代器需要用next()取结果，取一个结果，迭代器就少一个字符，要取完所有的字符，就需要一直next)

5. replaceAll() 替换所有的字符串

6. at(index) index是字符索引号，返回对应索引位置的字符，整数是从左往右，负数是从右往左

四、 数值扩展

1. Number.isFinite(number) 检测一个值是否为有限值(有限值就是js能表示的数字)，如果传入的不是一个数值类型或者无法表示的数字则返回false

2. isNaN() 判断数值是否是NaN，只有NaN数据才会返回true，其他都是返回false

3. parseInt() 和parseFloat() 移到了Number对象上(ES5是在window对象上，现在window对象上还保留着这两个方法)

五、 Math 对象的扩展

1. Math.trunc() 返回去除小数的整数部分(理解为直接去掉小数点后面)

2. Mach.sign() 判断正负数，其他非数值型返回NaN

console.log(Math.sign(-4))  //-4
console.log(Math.sign(5))   //5
console.log(Math.sign(-0))  //-0
console.log(Math.sign(0))   //0
console.log(Math.sign("a")) //NaN

六、bigInt 大整数

js的数值表示最大的数字是2的1023次方

console.log(Math.pow(2,1023))

创建大整数在数字后面加一个n即可

let num=23n
console.log(typeof num) //bigInt 

把普通数字转为大整数，可以把数字传入bigInt方法

let num1=BigInt(2**1023)
num1=num1*2n

或者直接用大整数计算

 console.log(2n**1028n)

七、函数的扩展

1. rest 参数 ：类似于函数的arguments，是一个数组，表示函数的所有参数，(和arguments的区别:arguments是一个类似数组对象，rest是一个标准的数组)

function f1(...params) {
    console.log(params.arguments)
}
f1("a1","a2","a3")

2. 箭头函数:是对普通函数的简化，箭头函数如果只有单行表达式则会返回单行表达式的结果。箭头函数只能用表达式的方式创建(把函数赋值给一个变量)

​

let f1= (a,b) =>a+b console.log(f1(1,3)) //自动返回a+b的结果 3

3. 如果箭头函数是多行js表达式添加{}表示代码块，则需要手动加上return

let f2=(a,b)=>{
    let c=10
    return a+b+c
}
console.log(f2(2,3)) //15

4. 如果函数直接返回一个对象，需要用()包裹，如果不用()包裹会解析为代码块

5. 箭头函数是为了简化函数写法，比较适合直接返回一个结果的场景，如果函数的计算比价复杂，就不要使用箭头函数

6. 箭头函数内部没有this，(普通函数内部的this谁调用就指向谁)，箭头函数的this是父级的this

八、数组扩展

1、数组扩展符：

1. ... 扩展符 ：可以自动展开数组的所有元素(可以理解为直接去掉数组的中括号，只保留元素)

2. ... 可以用于合并多个数组

3. ... 可以进行数组的深拷贝

2、from():可以把类似数组对象转为真正的数组

let o={
    0:"a1",
    1:"b1",
    2:"c3",
    length：3
}
console.log(Array.from(o)) //把类似数组对象o转为数组 

3、of(): 把一组值转为数组，可以用来创建数组

let arr=Array.of('a','b','c')
console.log(arr)

4、 find((item)=>bool) :主要用于查询符合条件的参数成员，返回true则找到该元素并且返回该元素，停止后面的查找

5、findIndex((item)=>bool) 和find用法一致

let arr=[{name:"a",age:11},{name:"a",age:18},{name:"a",age:12},{name:"a",age:7}]
console.log(arr.find((item)=>item.age===12)) //查询age为12的元素
​
console.log(arr.findIndex((item)=>item.age===12 )) //返回age为12的元素的下标

6. keys() 遍历数组的下标，values()遍历数组的元素，返回的是一个迭代器(迭代器可以用let of 遍历 )

实际开发中遍历还是以forEach和for循环为主

​

let arr=[{name:"a",age:11},{name:"a",age:18},{name:"a",age:12},{name:"a",age:7}]
let keys=arr.keys()
for(let item of keys){
    console.log(item)   //返回的是遍历每个元素的下标
}
​
let values=arr.values()
for(let item of values){
    console.log(item)   //返回的是遍历的每个元素
}

7、includes(item) 查询数组是否包含某个元素，包含返回true反之false

8、 flat() 把二维数组拉平(把二维数组变为一维数组)

let arr= ['a','b',['c','d']]
console.log(arr.flat()) //返回 ['a','b','c','d']

九、对象扩展

1. 对象的属性可以用[ ]表达式

let o={}
o.key="key1"
let name="x1"
o[name]="xxxx"
console.log(o)  //输出 { key:"key1",x1:"xxxx"}

2. 对象属性的简洁表示：当属性和属性值变量一致，可以简写为一个

3. ... 扩展符：可以自动把对象的所有属性展开，和数组扩展符用法一致

//深拷贝对象
let o1= {name :"a1",age:11}
let o2={ ...o1 } //把o1的所有属性展开到了o2的对象(类似实现了一层数据的深拷贝)
​
//合并对个对象
let o3={address:'xxxx',money:333}
let o4= {...o1,...o3} 
console.log(o4) //{name :"a1",age:11,address:'xxxx',money:333}

4. Object.assign(target,source) 把source对象合并到target对象

let o1= {name :"a1",age:11}
let o3={address:'xxxx',money:333}
console.log(Object.assign(o3,o1)) //{name :"a1",age:11,address:'xxxx',money:333}

5. Object.keys() 返回对象的key作为一个数组，values返回对象的value作为一个数组

let o3={address:'xxxx',money:333}
console.log(Object.keys(o3)) // ['address','money']
console.log(Oject.values(o3)) //['xxxx','333' ]

6. entires() 把对象转为一个二维数组

let o3={address:'xxxx',money:333}
console.log(Oject.entires(o3)) //[['address','xxxx''],['money','333']]

十、Symbol es6新增的数据类型，返回一个独一无二的值（唯一值

let s=Symbol() //一个唯一值
console.log(s) //symbal
let peo={
    [s]:"aaa"
}
console.log(peo[s]) //aaa

十一、Set数据结构：和数组类似，Set内部的数据不会重复，如果有重复数据会自动去除

set 实际运用：可以用于数组的去重，Set(Array) set构造函数接受一个数组作为参数，可以把数组转为set数据，并去除重复的数据

let s=newSet([1,1,2,2,2,3,3,3,4,4,4])
console.log(s) //{1,2,3,4}
//set 数据转为数组
console.log([...s]) // ...扩展运算符可以自动展开set数据成员，就转为了数组
console.log(Array.from(s)) //from 方法可以把set数据转为数组

// 1. 创建set数据结构
let s1=newSet()
​
//2. add() 向set数据结构添加数据
s1.add('a1')
s1.add('a2')
s1.add('a3')
s1.add('a3') //重复的会被去除
console.log(s1) //{'a1','a2','a3'}
​
//3. forEach((item)=>{}) 可以遍历set里面的元素
s1.forEach((item)=>{
    console.log(item) 
})
​
//4. size 属性可以查看set数据结构里面的成员数量
console.log(s1.size) //3
​
//5.delete() 删除成员
s1.delete('a1')
console.log(s1) //{'a2','a3'}
​
//6. has() 判断数据结构里是否含有某个成员，有true，无false
console.log(s1.has('a3'))
​
// 7.  clear() 清除set数据结构内的所有成员
s1.clear() 

十二 、Map ES6新增数据结构，是一种键值对，键可以是任意数据类型，主要是弥补Object对象的属性只能是字符串的缺陷

1. 创建map数据

let map=new Map()

2. set（key，value）设置map数据，第一个key是map的键，value是map的值，size可以查看键值对的数量

map.set(o,'test1')
let a1=['a','b']
map.set(a1,[1,2])
console.log(map) // key是['a','b'] value是[1,2]
console.log(map.size) // 2

3. forEach() 遍历map数据成员

map.forEach(function(item){
    console.log(item) //item 是map数据的value值
})

4. get（key）可以读取map对应的value值，如果key是引用数据类型，要保证key的内存地址是同一个

console.log(map.get(o)) //test1
console.log(map.get(a1)) //[1,2]

5. Map()构造函数接受一个二维数组作为参数，转为map数据结构（二维数组的第一个元素是key，第二个元素是value）也是二维数组转map的方法

6. 变量的map数据结构一般用let of

let map1=new Map([['name','zhangsan'],[o,'testo'],[a1,['1','2']]])
console.log(map1)
​
​
for(let [key ,value]  of map1){ //key是map数据的键，value是map数据的值
    console.log(key,value)
}

7. has() 判断map数据里面某个键是否存在，存在返回true，反之false

console.log(map1.has('name')) //true
console.log(map.has(o))  //true

8. delete(key) 删除某个 键

9. clear( ) 清除map数据里面的所有键值

十三、 Proxy（object，{set（），get（）}）对象代理：为目标对象设置一层拦截，一般很多第三方框架会给内部的对象添加一层代理

let peo= {name:'张三',age:15}
peo=new Proxy(peo,{
    //target 是当前对象，key是添加或修改的键，value是对应的值
    set(target,key,value){
        console.log(target,key,value)
         //set方法可以对对象赋值做一些判断操作，如age只能是number类型
        if(typeof(value)!=="number"&&key==="age"){
            throw new Error("age 只能是number类型")
        }
        //需要在set方法里面去给当前的key添加值才能在target对象中添加或修改成功
        target[key]=value
    }，
    get(target,key){ //target是当前对象，key是读取的属性名，返回的是value值，当读取对象属性触发get函数 
    console.log(target,key)
    //需要用return返回值
    return target[key] +'岁'
    
}
    
})
peo.age=17
peo.address="xxx"
console.log(peo)
console.log(peo.age)

十四、异步编程

1. 同步模式(阻塞模式)：前面的js代码运行完成后才会执行后面的js代码(效率不太高，顺序可控)

2. 异步编程(非阻塞模式):前面代码不影响后面的代码，两个代码可以同时执行(运行速度快，不可控顺序)

回调函数是一种异步模式

定时器就是一个异步模式

3. Promise 对象：是一个js异步编程的解决方案。语法：

1.Promise(function(resolve,reject){}) 构造函数可以实例化用Promise对象，构造函数的参数是一个函数，该参数有两个参数函数，resolve表示执行成功的函数，reject函数表示执行失败

2.Promise对象内部有一个标识用于记录内部的回调函数是否执行完成，当调用resolve方法则会把标识改完成功，调用reject会把标识标记为失败

  //创建Promise对象，创建的Promise对象默认状态是pending,表示内部的函数没有执行完成
  let promise=new Promise(function(resolve,reject){
      let age=12
      if(age>10){
          //当执行函数成功调动resolve方法(会把resolve方法接收一个参数)，会把promise读写状态改为fulfilled 标识为成功
          resolve('age 大于10')
      }else{
          //reject一般表示函数执行有错
          reject('年龄不能小于10')
      }
  })
  // 获取promise对象的resolve方法的参数值需要用then()方法，获取reject方法的参数需要用catch()方法
  //promise对象一般用链式操作
  //resolve方法调用，会触发then里面函数执行，res参数则是resolve的参数
  //reject方法调用，会触发catch里面函数执行，err参数则是reject函数的参数
  //不管是resolve调用还是reject调用都会触发finally方法，finally方法可以省略，then和catch不能省略
  promise.then(function(res){console.log(res)}).catch(function(err){console.log(err)}).finally(function(){console.log('finally')})

应用：一般会把ajax请求放入promise对象里面

ajax请求是一个异步编程，ajax发送请求以后，要等待后端返回数据，在等待的同时会执行后面的js代码

let promise=new Promise(function(resolve,reject){
      // 用setimeout模拟ajax请求过程
      setTimeout(function(){
        var data= {name:"张三",age:11,success:false,message:"请求参数不正确"}
        if(data.success){
          resolve(data)
        } else {
          reject(data.message)
        }
      },1000)
    })
    promise.then(function(res){
      console.log(res)
    }).catch(function(err){
      console.log(err)
    })

由于promise对象是异步编程，不能控制里面代码执行的顺序，有时需要同时拿到多个promise对象的结果

Promise.all([promise1,promise2]) all()方法接受一个promise对象数组作为参数，该方法会等数组的所有promise对象的状态为非pending状态后统一返回结果

function Ajax(time){
      return new Promise(function(resolve,reject){
        setTimeout(function(){
            var data= {name:"张三",age:11,success:true,message:"请求参数不正确",time}
            if(data.success){
              resolve(data)
            } else {
              reject(data.message)
            }
        },time)
      })
    }
    let promise1=Ajax(2000)
    let promise2=Ajax(4000)
    Promise.all([promise1,promise2]).then(function(arr){
      // arr是两个promise对象resolve的结果数组
      console.log(arr)
    }).catch(function(errArr){
      // errArr是多个promise对象内部reject函数执行传递的参数
      console.log(errArr)
    })

十五、async 函数(异步函数)：

异步函数返回的是一个promise对象，如果函数内部用了return，会把return 的值作为promise对象的值。

async function f1(){
      return"ccc"
    }
    let promise1=f1()
    console.log(promise1) //返回一个promise对象，结果在promiseResult里
//由于它是个promise对象，所以可以用then方法获取异步函数返回的结果
    promise1.then(function(res){console.log(res)}).catch(function(){})//ccc

await 关键词,只能用在异步函数里面，await可以等promise对象内部的状态为非pending状态后再执行后面代码(可以把promise对象变为一个同步编程，这样就可以控制顺序)

  function Ajax(time){
      return new Promise(function(resolve,reject){
        setTimeout(function(){
            vardata= {name:"张三",age:11,success:true,message:"请求参数不正确",time}
            if(data.success){
              resolve(data)
            } else {
              reject(data.message)
            }
        },time)
      })
    }
​
    async function f2(){
      // 等待Ajax返回的promise对象的结果再执行后面的代码，该函数内部的代码是同步执行
      let result1=await Ajax(2000)
      console.log(result1)
      let result2=await Ajax(4000)
      console.log(result2)
    }
    f2()

十六、迭代器：

迭代器是一个特殊对象，迭代器自带一个next()方法，该方法返回一个对象{value:'迭代元素’，done：false} 并且把对象conf迭代器里面删除，done为false则表示迭代器还有元素，done为true表示迭代器没有元素了

遍历迭代器用let of

ES6里面用Generator生成器可以返回一个迭代器，生成器就是普通函数前面添加一个*

function *creatInerator(){
    yield'a1'//迭代器的元素需要添加一个yield关键词
    yield'a1'
    yield'a1'
}