ES6（类 函数 Object 解构赋值 Promise）

CLASS 类的概念

ES5中声明类 用构造函数模拟

//定义一个叫Animal 的类
let Animal = function(type){
 //声明了属性type
 this.type = type
}
//声明了方法walk
  Animal.prototype.walk = function(){
  console.log('i am walk') }
  
//实例化类dog 和 monkey  
let dog = new Animal('dog');
let monkey = new Animal('monkey');
//继承原型链上的walk方法
dog.walk();
monkey.walk(); 
//若只知道实例的时候想要找到原型链可以通过constructor
dog.constructor.prototype.eat=function(){
  console.log("我是通过实例的constructor找到的构造函数 添加的eat方法")
}
dog.eat();
monkey.eat();

ES6中的类的声明专业化 用class 即ES5声明类的语法糖 其本质是一样的

class Animal{
 constructor(type){
    this.type = type
 }
 //属性值写在constructor中  方法写在constructor之外
 walk(){
   console.log('我是通过class创建的方法')
  }
}
//实例化
let dog = new Animal('dog')
let monkey = new Animal('monkey')
dog.walk();
monkey.walk();

console.log(typeof Animal)  //值为function

Setters & Getters

对于类中的属性，可以直接在constructor 中通过this直接定义，还可以直接在类的顶层来定义

class Animal{
 constructor(type,age){
   this.type = type
   this._age = age
  }
  get age(){
   return this._age
  }
  //用get定义的属性只能读取不能修改
  set age(val){
  if(val>7){
    this._age = val
  }
  }
  //用set定义的属性可以有条件的修改
}

let dog = new Animal('dog',5) ;
console.log(dog._age);
console.log(dog.age);
dog.age = 4; //改变不了age 的值 除非满足set中的条件
dog.age = 8;
console.log(dog.age);//由于满足set中的条件所以 打印的值为8

class 的 Static Methods

重点需要区别类的静态方法 和实例对象的方法

ES5中的静态方法的定义

let Animal = function(type){
  this.type = type 
  this.walk = function(){
   console.log("我是实例对象的walk方法")
 }
}
Animal.eat=function(){
 console.log("我是类的静态方法中的eat方法")
}

let dog =  new Animal('dog');
dog.walk();
//dog.eat(); //实例对象上没有eat方法 也就是说在类上定义的静态方法在实例对象上取不到
Animal.eat(); //类上的静态方法的调用

ES6中静态方法的定义

class Animal {
  constructor(type){
    this.type = type ;
    this.walk = function(){
      console.log("我是实例对象上的walk方法")
    }
  }
  static eat () {
    console.log("我是类上的静态方法")
  }
  //ES6中定义静态方法方式
}

let dog = new Animal('dog')
dog.walk();
//dog.eat(); //实例对象上没有eat方法 也就是说在类上定义的静态方法在实例对象上取不到
Animal.eat(); //类上的静态方法的调用

类的继承

ES5中类的继承方式

let Animal = function(type){
   this.type = type 
}
//定义方法
Animal.prototype.walk = function(){ console.log('我是父类原型链上的方法')};
//定义静态方法 
Animal.eat = function(){ cnonsole.log('我是父类的静态方法')}
//定义子类

let Dog = function(name){ 
  Animal.call(this,'dog')
  this.name = name
}

Dog.prototype = Animal.prototype
Dog.prototype.run = function(){console.log("我是子类的run方法")}
let hsq = new Dog("hsq")
console.log(hsq.run());
console.log(hsq.walk());
console.log(hsq.eat()); //静态方法拿不到

ES6中类继承的方式

class Animal{
   constructor(type) {
     this.type = type
  }
  walk(){ console.log('我是父类中的walk方法')}
}

class Dog extends Animal {
    //若子类中没有自己的属性可以省略super()
    constructor(type,name){
      super(type)
      //super中接受的是父类中的参数
      this.name = name 
   }
run(){console.log('我是子类中的run方法')}
}
let hsq = new Dog('dog','hsq');
 
 hsq.walk();
 hsq.run();
 console.log(hsq.type)
 console.log(hsq.name)

函数

ES5中处理参数的默认值

function test(x,y,z) {
  if(y === undefined) {
     y = 10
  }
  if(z === undefined) {
     z = 20
  }
  return x + y + z
}

test(1) ;

ES6中处理参数的默认值

函数参数是从左至右解析,如果没有默认值会被解析成undefined

 function test(x,y=10,z=20){
  return x + y + z
}
test(1);
---------------
//让某个值使用默认值的情况
test(1,undefined,30); //把要使用默认值的参数设置为undefined

判断函数有几个参数

ES5中可以用arguments

function test(a,b=1,c){
  console.log(arguments.length)
}
test(1,2,3) //输出3

ES6中不支持arguments 可以用函数的length属性

function test(a,b=1,c){
  console.log(test.length)
}
test(1,2,3) //输出1 用length只能查询有默认值参数之前的参数个数

拓展运算符 Rest Parameter

不确定参数个数求和运算 ES5中

function sum(){
 let num = 0;
 Array.prototype.forEach.call(arguments,function(item){
   num += item*1
 })
 return num
}
sum(1,2,3)

不确定参数个数求和运算 ES6中

...nums就是一个数组可以直接调用数组的api

function sum(...nums){
 let num = 0;
 nums.forEach(function(item){
    num += item*1
  })
 return num
}
sum(1,2,3)

...nums还可以和其他参数一起用

function sum(base,...nums){
 let num = 0;
 nums.forEach(function(item){
    num += item*1
  })
 return  base*2 + num
}
sum(1,2,3)

知道一个确定数组 里面的每一项是函数参数的对应的实参可以用...传递

//ES5做法
let data = [1,2,3]
function test (a,b,c){
 return a+b + c
}

箭头函数

不带参数的箭头函数

let hello = ()=>{
  console.log('say hello')
}
hello();  //输出say hello

带参数的箭头函数

let hello = name => { console.log('say hello',name)}
hello('kobe'); //输出say hello kobe
//只有一个参数可以省略括号

如果返回值是表达式 可以省略return 和 {}

let pow = x => x*x

如果返回值是字面量对象就需要写用小括号括起来

let person = (name) => ({age:20,addr:'shanghai City'})

箭头函数中的this

在ES5中关于函数中的this 只要的谁调用了该方法那么this就指向谁

let test = { 
  name:"test",
  say:function(){
    console.log(this.name)
  }
}

console.log(test.say()) //test

箭头函数中对this的处理是定义的，this的指向也就是test外层所指向的window 而window没有挂在name所以结果是undefined

let test = {
  name:'test',
  say:() =>{
    console.log(this.name,this)
  }
}
test.say() //undefined  和 window

Object

在ES6周期的Object的属性必须是key-value的形式
ES5的写法

let x = 1,y = 2;
let obj = { x:x , y:y}

ES6的写法 键名和键值定一定变量名一样的时候可以简写

let x = 1,y = 2;
obj = {x,y}

ES6可以使用计算属性

let x = 1,y = 2,z = 3;
let obj = { x,
        y,
        [y+z]:6}

ES6方法的简写

let x = 1,y = 2,z = 3;
let obj = { x,
        y,
        hello(){ console.log("hello")},
        *run(){ console.log("run")} //前面加星号表示异步函数}
    
    obj.hello(); //打印hello
    obj.run();  //run 是异步函数 （generator）

Set

在js里通常使用Array或者Object来存储数据。但是在频繁的操作数据的过程中查找或者统计并需要手动来实现,
并不能简单的直接使用。比如如何保证Array是去重的，如何统计Object的数据总数等。
在ES6为了解决上述痛点,新增加了数据结构Set和Map。它们分别对应传统数据结构的“集合”和“字典”。

生成一个Set实例

let s = new Set()
console.log(s)

在实例化的同时传入默认的数据

let s = new Set([1,2,3,4])
console.log(s)

初始化参数 参数必须是可遍历的，可以是数组或者自定义遍历的数据结构

添加数据

let s = new Set()
 s.add('hello');
 s.add('goodbye');
 //或者s.add('hello').add('goodbye')

Set数据结构不允许数据重复,所以添加重复的数据是无效的

删除数据

删除数据分两种，一种的删除指定的数据，一种是删除全部的数据

//删除指定数据
let s = new Set()
 s.add('hello');
 s.add('goodbye');
 s.delete('hello') // 返回true
 //删除全部数据
 s.clear() 

统计数据

Set可以快速的进行统计数据，如数据是否存在，数据的总数

let s = new Set()
 s.add('hello');
 s.add('goodbye');
 //判断数据是否存在
 s.has('hello') //true
 //计算数据项总数
 s.size //2

查询数据

keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
for...of.:可以直接遍历每个成员

let s = new Set()
 s.add('hello');
 s.add('goodbye');
 s.add(NaN)
 s.add(NaN) //虽然每个NaN都不一样但是不会重复添加
 s.add(undefined)
 s.add(undefined) //undefined 也不会被重复添加
 console.log(s)
console.log(s.keys()); //SetIterator {"hello", "goodbye"}
console.log(s.values()); //SetIterator {"hello", "goodbye"}
console.log(s.entries()); //SetIterator {"hello" => "hello", "goodbye" => "goodbye"}
s.forEach(item=>{ console.log(item)}) //hello//goodbye
for (item of s ) {   
  console.log(item)    //hello//goodbye
}

Map

Map是用来实现字典功能(Object键值对)。

let map = new Map([iterable])

iterable 可以是一个数组或者其他iterable对象其元素为键值对(两个元素的数组，例如[[1,'one'],[2,'two']]) 每个键值对都会添加到新的Map。null会被当作undefined

添加数据

let keyObj = {}
let keyFunc = function(){}
let ketString = 'a string'

//添加键 键的值可以是对象 函数 等 ES5种的object是做不到的
map.set(keyString,'和键'a string'关联的值')
map.set(keyObj,'和键keyObj关联的值')
map.set(keyFunc,'和键keyFunc关联的值')

删除数据

//  删除指定的数据
map.delete(keyObj)
// 删除所有数据
map.clear()

统计数据

//统计所有key-value 的总数
console.log(map.size)
//判断是否有key-value
console.log(map.has(keyObj)) //true

查询数据

get()方法返回某个Map对象种的一个只定元素

keys()返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的key值

values()方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值

entries()方法返回一个新的包含[key,value]键值对的Iterator 。返回的迭代器的迭代顺序与Map对象插入顺序相同

forEach()方法将回以插入顺序对Map对象中的每一个键值对执行一次参数中提供的回调函数

for...of 可以直接遍历每个成员

 console.log(map.get(keyObj))// 和键KeyObj关联的值
 console.log(map.keys())  //Iterator
 console.log(map.values())//Iterator
 console.log(map.entries())//Iterator
 map.forEach(value,key, map) => {
  console.log(value,key,map)
 }
 for( [key,value] of map ){
    console.log(key,value)
  }

Object和Map的区别

键的类型

一个Object只能是一个字符串或者Symbols 但一个Map的键可以是任意值，包括函数、对象、基本类型、

键的顺序

Map中的键值是有序的，而添加到对象中的键则不是。因此，当对它进行遍历的时候，Map
对象是按插入的顺序放回键值。

键值对的统计

你可以通过size属性直接获取以恶Map键值对个数，而Object的键值对个数只能手动计算

键值对的遍历

Map可直接进行迭代，而Object的跌代需要先获取它的键数组然后再进行迭代

性能

Map在涉及频繁增删键值对的场景下会由些性能优势

Object.assign() 只是浅拷贝 (深拷贝浅拷贝的区别)

Object.assign()方法将用于所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象

const target = {a:1,b:2}
const source = {b:4,c:5}
const source1 = {d:5,e:6}
const returnTarget = Object.assign(target,source,source1)

console.log(target)
console.log(returnTarget)

基本语法

Object.assign(target,...soures)

字符串模板语法

在ES5中的场景

1、字符串很长需要换行

字符串很长包括几种情形一个是开发时输入的文本内容，一个是接口数据返回的文本内容。如果对换行符处理不当，就会带来异常

2、字符串中有变量或者表达式

如果字符串不是静态内容，往往是需要加载变量或者表达式，这个也是常见的需求。之前的做法是字符串拼接‘

let a =20
let b =10
let c = 'js'
let str = 'my age is ' +(a+b) + ' and i love ' + c
console.log(str)

3、字符串中有逻辑运算

let retaiPrice = 20
let wholesalePrice = 16
let type = 'retail'
let showTxt = ''
if(type === 'retail'){
  showTxt = '购买的单价是' + retaiPrice
}else{ showTxt = '您此次的批发价是：' +wholesalePrice}

在ES6中的反引号

`string text` 
`string text line 1 
  string text line 2`
` string text ${expression} string text`

在反引号中可以插入变量或者表达式，只需要用${}包起来就好

ES5中对于换行的字符串的处理

console.log('string text line 1\n' + `string text line 2`);
//利用\n起到换行作用

ES6中对于换行的字符串的处理

console.log(`string text line 1 
string text line 2`)

Tag Literals

用于处理复杂逻辑的字符串

function Price(strings,type){
//函数可以接受多个参数第一个参数是字符串模板中片段的数组用索引取值
//函数第二个参数开始是字符串模板中的传递的参数,可以传多个变量
  let s1 = strings[0]
  let retaiPrice = 20
  let wholesalePrice = 16
  let txt = ''
  if(type === 'retail'){
    txt = `购买的单价是:${retaiPrice}`
    //这里用了反引号传递参数 变量可以直接放在${}中 
  }else{ 
    txt = `购买的单价是:${wholesalePrice}`
  }
  return `${s1}${txt}`
  //返回处理后的字符串
}

let showTxt = Price`您此次的${`retail`}`
//这里的Price是函数是操作的字符串模板 传递参数等传递参数的时候里面要加反引号

console.log(showTxt)

结构赋值

在ES5中给将数组中的值放到以些变量里

let arr =['baby','child']
let data1 = arr[0]
let data2 = arr[1]
console.log(`${data1}:${data2}`)

在ES6中的结构赋值

let arr =['baby','child']
let [data1,data2] = arr
console.log(`${data1}:${data2}`)

结构赋值重点是在赋值，赋值的元素是要拷贝出来赋值给变量，赋值的元素本身是不会被更改的

结构赋值最多的就是Object 和Array

数组的解构

1、可以跳过赋值的元素

如果想忽略数组的某个元素对变量进行赋值，可以使用逗号来处理。

let [data1,,data3] = ['child1','child2','child3','child4','child5']
//为了代码可读性可在逗号前面加空格
console.log(`${data1}:${data3}`)

2、赋值的元素可以是任意可遍历的对象

赋值的元素不仅是数组，它可以是任意可遍历的对象

 let [data1,data2,data3] ="abc" 
 console.log(data1+data2+data3)
 
 let[data1,data2,data3] = new Set([1,2,3])
 console.log(data1+data2+data3)

3、左边的变量
被赋值的变量还可以是对象的属性，不局限于单纯的变量

let user = {};
[user.name,user.name2] ="kobe curry".split(' ')
console.log(user.name)

4、循环体
结构赋值在循环体中的应用，可以配合entries使用

let user = { name: 'kobe',age: 40 };
for (let [item,key] of Object.entries(user)) {
  //在遍历对象的时候将配合Object.entries将user对象变成可遍历的 并用结构赋值取除对应的键值
    console.log(`${key}:${item}`)
} 

map对象

let user = new Map()
user.set('name','kobe')
user.set('age','30')

for(let [key,value] of user.entries()){
//entries()是将对象返回成一个有键和值的迭代器
  console.log(`${key}:${value}`)
}

rest 参数

let [name1,name2,...rest] = [1,2,3,4,5,6,7,8,9]
console.log(name1)
console.log(name2)
//rest是将剩下为赋值给变量的值组合成一个数组  不过需要确保rest参数是放在被赋值变量的最后一个位置上
console.log(rest[0])
console.log(rest)

默认值

如果数组的内容少于变量的个数，并不会报错，没有分配到内容的变量会是undefined

let [data1,data2] = []

console.log(data1) //undefined
console.log(data2) //undefined

也可以给变量赋予默认值，防止undefined的情况出现

let [name="kobe",age = 40] = ["curry"]
//赋予默认值
console.log(name)
console.log(age)

对象的解构

let obj = {name:'kobe',age:40}
let {name:name1 ,age:age1} = obj
//对象的结构赋值将  变量名写在键值中 键帽写赋值对象的键帽
console.log(name1) //kobe
console.log(age1)  //40
----------------------------
let obj = {name:'kobe',age:40}
let {name , age} = obj 
//若变量名和赋值对的键帽名一样的话 可以简写
console.log(name) 
console.log(age)

也可以指定默认值

let obj = {age:40}
let {name:name1="curry" ,age:age1} = obj
//可以定义默认值
console.log(name1) //kobe
console.log(age1)  //40
----------------------------
let obj = {age:40}
let {name="curry" , age} = obj 
//可以定义默认值
console.log(name) 
console.log(age)

rest运算符

对于一个对象 只需要取到它的某个值 剩下的需要保存在一个变量中
可以用拓展运算符即将剩余的键值对放在一个对象中

let obj = { name:'kobe',age:40,width:100}
let {name,...rest} = obj
console.log(name)  // kobe
console.log(rest) //  {age: 40, width: 100}

嵌套对象的解构

let obj = {
  size:{
   width:100,
   heigh:200
  },
  items:["cake","Donut"],
  extra:true
}
let { size:{width,heigh},items:[items1,items2],extra} = obj
//复杂的结构赋值
console.log(`${width}、${heigh}、${items1}、${items2}、${extra}`)

ES5中的回调地狱(ES6Promise)

JS 中的异步操作的写法，比如加载一个脚本资源，可以将这个操作封装在一个函数中

function loadScript(src) {
 let script = document.createElement('script')
 script.src = src
 document.head.append(script)
}
//这里的异步操作是加载一个新的脚本。

//loadScript('./script.js')

函数是异步调用的因此操作不是此刻(加载脚本) 完成的，而是放在最后执行

假设加载的脚本中定义了新的函数 想要在脚本加载结束之后调用会发现无法调用

loadScript('./script.js')
//调用script.js中脚本的函数 假设名字是test
test() //会报错 说函数不存在 
//由于加载是异步的test()在它被加载进来之前就已经定义了

要在脚本引入之后执行test 只能利用回调函数

function loadScript(src,callback) {
 let script = document.createElement('script')
 script.src = src
 script.onload = ()=>{ 
    callback()
  }
 document.head.append(script)
}
//这里的异步操作是加载一个新的脚本。
loadScript('./script.js',test())

但是如果异步加载完之后的操作还是要异步加载的话就会造成回调地狱

function loadScript(src,callback) {
 let script = document.createElement('script')
 script.src = src
 script.onload = ()=>{ 
    callback()
  }
 document.head.append(script)
}
//这里的异步操作是加载一个新的脚本。
loadScript('./script.js',loadScript('./script1.js'))
//若一直嵌套 复杂程度可想而知 若某一环发生错误就更不好操作

所以ES6引出了Promise

function loadScript(src){
 return new Promise((resolve,reject)=>{
   let script = document.createElement('script')
   script.src = src
   script.onload = ()=>{ resolve()}
   script.onerror = (err)=>{ reject(err)}
   document.head.append(script)
  })
}

 loadScript('./1.js')
 .then(()=>{
   loadScript('./2.js')
   test1() //假设test()是./1.js中定义的函数
  },(err)=>{console.log(err)})
  .then(()=>{
    loadScript('./3.js')
   test2() //假设test()是./2.js中定义的函数
   })

用定时器模拟一个异步操作展示Promise的效果

  function test(type,timeout){
    return new Promise((resolve,reject)=>{
       setTimeout(() => {
        resolve(type)
       }, timeout); 
    })
   }
 test(1,1000).then((type)=>{
     console.log(type)
     return test(2,2000)
 }).then((type)=>{
     console.log(type)
     return test(3,3000)
 }).then((type)=>{
     console.log(type)
     console.log('不调了 不调了 下班')
 })
//会依次输出1，2，3 ,不调了 不调了 下班

用promise 实现一个AJAX

 function getURL(URL){

    return new Promise((resolve,reject)=>{
        let req = new XMLHttpRequest()
        req.open('GET',URL,true)
        req.onload = function(){
           if(req.status === 200){
               resovle(req.responseText)
           }else{
               reject(new Error(req.statusText))
           }
        }
        req.onerror = ()=>{
            reject(new Error(req.statusText))
        }
        req.send()
    })
 }

 let URL = 'http://httpbin.org/get'

 getURL(URL).then((data)=>{
     console.log(data)
 },(err)=>{
     console.log(err)
 })

Promise.prototype.then()的用法

let promise = new Promise((resolve,reject)=>{
       resolve('传递给then的值')
       reject('传递给error的值')
  })
  promise.then((value)=>{
    console.log(value)
  },(error) =>{ cnonsole.log(error)})

Promise.resolve()

一般情况下我们都会使用new Promise()来创建Promise对象，但是除此之外也可用其他方法。
静态方法Promise.resolve(value) 可以认为是new Promise() 方法的快捷方式

比如Promise.resolve(42) 可以认为是以下代码的语法糖

new Promise(function(resolve){
  resolve(42)
})

在这段代码中的resolve(42) 会让这个Promise对象立即进入确定(即resolved)状态，并将42传递给
后面的then里所指定的onFullied函数。
方法Promise.resovle(value)的返回值也是一个Promise对象，所以可以直接调用then

Promise.resolve(42).then(function(value){
  console.log(value)
})

Promise.reject()

Promise.reject(error)是和Promise.resolve(value)类似的静态方法，是new Promise() 方法的快捷方式

Promise.reject(new Error('出错了')) 是以下代码的语法糖

 new Promise(function(){resolve,reject}{
   reject(new Error('出错了'))
  })

代码的功能是调用该Promise对象通过指定then指定的onRejected函数，并将错误(Error)对象
传递给这个onRejected函数

Promise.reject(new Error('BOOM'))

Promise.prototype.catch()

function test(){
  return new Promise((resolve,reject)=>{
   reject(new Error('es'))
  })
}

test().catch((e) =>{
  console.log(e.message)
})
 

Promise.all()

Promise.all()

示例

 let p1 = Promise.resolve(1)
 let p2 = Promise.resolve(2)
 let p3 = Promise.resolve(3)
Promise.all([p1,p2,p3]).then((res)=>{
  console.log(res) //[1,2,3]
 })
 // p1 p2 p3 分别是三个异步请求
 //当三个Promise的状态都是resolve的时候 该方法才会返回对应的值
 // 将三个异步请求到的数据放到一个res中 是一个数组 可以分别取出处理
--------------------------------
 let p1 = Promise.resolve(1)
 let p2 = Promise.resolve(2)
 let p3 = Promise.reject(new Error('错误消息'))
Promise.all([p1,p2,p3]).then((res)=>{
  console.log(res) //[1,2,3]
 }).catch((err)=>{console.log(err)})
 //当三个Promise的状态都是resolve的时候 有一个请求不成功就处理不了 该方法才会返回对应的值

Promise.race()

let p1 = Promise.resolve(1) 
let p2 = Promise.resolve(2)
let p3 = Promise.resolve(3)
Promise.race([p1,p2,p3]).then((res)=>{
  console.log(res)
})
//三个异步请求 哪个快用哪个 场景就是相同的资源放在不同的服务器上