ES6~ES11

1、let和const

  let a   /  let a,b,c,d  /  let a=10
  特点:
  1、变量不能重复声明
  2、作用域为块级作用域(块级,全局,函数,eval)
  3、不存在变量提升
  4、不影响作用域链
  const a='hello'
  特点:
  1、要赋予初始值
  2、通常大写(小写也行)
  3、常量的值不能修改
  4、块级作用域
  5、对于数组和对象的元素进行修改不会报错(不算对常量进行修改)
  

2、解构赋值

  1、数组结构
  const array = ['云间月','林间雪','心上人']
  let [a,b,c] = array  //a:云间月,b:林间雪,c:心上人
  2、对象结构
  const ruleForm = {
    page:20,
    size:10,
    total:100,
    fun:function(){
      console.log('页码20,每页10条,总数100')
    }
  }
  let {page,size,total,fun} = ruleForm //20,10,100,和fun这个函数
  fun();//可以直接调用

3、模板字符串

  引入字符串的方式 `` (反引号)
  特点:
  1、内容中可以直接出现换行符(单引号或者双引号则不行)
  2、变量拼接
  let a = '魏海量'
  console.log(`${a}一杯就倒`) //魏海量一杯就倒
  必须使用${}的形式

4、简化对象的写法

  ES6允许在大括号里面直接写入变量和函数,作为对象的属性和方法--更加简洁
  let time= '12:00'
  let date = function(){
    return new Date()
  }
  const TEMP = {time,date,};//12:00,当前时间
  等同于 
  const TEMP = {
    time:time,
    date:date
  }
  函数简化:
  let fun = function(a,b){
    console.log(a,b) 
  }
  等同于
  fun(a,b){
    console.log(a,b)
  }

5、箭头函数及其声明特点

  使用 => 定义函数
  原始声明:
  let fun = function(a,b){console.log(a+b)}
  原始调用 fun(1,2);//3
  ES6声明:
  let fun = (a,b) =>{console.log(a+b)}
  ES6调用 fun(1,2);//3
  特点:
  1、this是静态的,始终指向函数声明时所在作用域下的this的值
    2、不能作为构造函数实例化对象
    let fun  = (a,b) =>{
      console.log(a+b)
    }
    let funs = new fun(1+2);//报错
  3、不能使用arguments变量
  let fun = () =>{console.log(arguments)}
  fun(1,2,3);//报错 argements未定义
  4、箭头函数的简写
    01、省略小括号,当形参有且又有一个的时候可简写
    例:let fun = (a) =>{console.log(a)}
    等同于 let fun= a =>{console.log(a)}
    调用:fun(1);//1
    02、省略花括号,当代码体只有一条语句的时候,此时return必须省略,且语句的执行结果就是函数的返回值
    例:let fun = a =>{return a+a};
    等同于 let fun = a => a+a
    调用:console.log(fun(1));//2
  5、使用场景:
    01、适合与this无关的回调、定时器、数组的方法回调
    02、不适合与this有关的回调,事件的回调,对象的方法等

6、允许给函数的参数(形参)赋予初始值

  原始:function add(a,b,c){return a+b+c}
  add(1,2);//undefined
  ES6:function add(a,b,c=3){return a+b+c}
  add(1,2);//6
  特点:
  1、形参初始值,具有默认值的参数,一般放到后面
  2、可以与解构赋值相结合
    例:
    function fun({name='王朱',age}){return name+'年龄'+age}
    fun({age:10});//王朱年龄10

7、rest参数(用于代替arguments)

  用于获取函数的实参是ES6获取实参的方式
  原始:
    function fun(){console.log(arguments)}
    fun('周米粒,暖树,景清');//{0:‘周米粒’,1:'暖树',2:'景清'} 是一个对象
  ES6:
  function(...params){console.log(params)}
  fun('周米粒,暖树,景清');//['周米粒,暖树,景清'] 是一个数组,可以使用数组的方法
  限制:当有多个参数时,rest参数必须放到最后
  例:function fun(a,b,...params){console.log(a,b,params)}
  fun(1,2,3,4,5,6,7);//1,2,[3,4,5,6,7]

8、扩展运算符 ...

  扩展运算符能将数组转化为逗号分割的参数序列
  let params = [1,2,3]
  function fun(){console.log(arguments)}
  原始:fun(params);// {0:[1,2,3]} 是一个对象,只有一个参数
  扩展运算符:fun(...params);//[[1,2,3]] 是一个数组,有多个参数
  运用:
      例:const arr = ['aa','bb']
      例:const arr2 = ['dd','ee']
    1、数组合并
      原始:arr.concat(arr2);//['aa','bb','dd','ee']
      扩展运算符 [...arr,...arr2];//['aa','bb','dd','ee']
    2、数组的克隆
      let arr3 = [...arr];//['aa','bb'] 如果只是值类型,则可以创建一个新的数组,如果有引用类型的话,则只是浅拷贝。
    3、将伪数组转化为真正的数组(假如有三个div)
      const arr = document.querySelectAll('div');//对象类型
      let arrs = [...arr];//数组类型
      例:转化arguments

9、Symbol(用得少)

  Symbol是ES6引入的一种新的原始数据类型,表示独一无二的值;是js的第七种数据类型,类似字符串的数据类型。
  特点:
    1、Symbol的值是唯一的,用来解决命名冲突的问题;
    2、Symbol值不能与其它数据类型进行运算;
    3、Symbol定义的对象属性不能使用for...in循环遍历,但是可以使用Reflect.ownkeys获取对象的所有键名。
  Symbol创建的几种方式:
    1、let Sy1 = Symbol();//Symbol()
    2、let Sy2 = Symbol('temp1');//Symbol('temp1')
    3、let Sy3 =Symbol('temp1');//Symbol('temp1)
       console.log(SY2===Sy3);//false 两个是不一样的,在内部会做区别,外部无法获知
    4、let Sy4 = Symbol.for('temp2');//Symbol('tamp2')
       let Sy5 = Symbol.for('temp2');//Symbol('tamp2')
       console.log(SY2===Sy3);//true这样创建是一样的
  Symbol的使用场景:向对象中添加属性和方法
    1、方法1
      let obj = {
        add:()=>{},
        minus:()=>{}
      }
      let methods = {
        add:Symbol('add'),
        minus:Symbol('minus')
      }
      obj[methods.add] = (a)=>{return a+a}
      obj[methods.minus] = (a)=>{return a+a}
    2、方法2
      let obj= {
         name:'temp',
        [Symbol('fun')]:a=>return a+a
      }
  Symbol 还有十一个内置属性
  js的数据类型:USONB
    u:undefined
    s:String Symbol
    o:Object
    n:null Number
    b:Boolean

10迭代器(用得少)

  迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署interrator接口(interrator接口是对象的一个属性:Symbol.interator),就可以完成遍历操作
  Es6创造一种新的遍历命令for...of循环,interator主要提供for..of循环
  具备interator接口的数据(可用for...of循环遍历)
    1、Array;
    2、arguments;
    3、Set;
    4、Map;
    5、String;
    6、TypeArray;
    7、NodeList;
  例:
    const arr = ['景清','暖树']
    for(let i of arr){
      console.log(i);//景清,暖树
    }
    可打印数组,在得到的数据中找到Symbol.interator这个函数  console.log(arr)
    调用这个函数,然后打印返回值,可以找到next()方法  let temp = arr[Symbol.interator]()
    之后可以调用next()方法  temp.next()
  工作原理:
    1、创建一个指针对象,指向当前结构的起始位置
    2、第一次调用对象的next()方法,指针自动指向数据结构的第一个成员
    3、接下来不断调用next()方法,指针一直往后移动,直到指向最后一个成员=
    4、每次调用next()方法返回一个包含value和done 的属性的对象

11、生成器

 是一种特殊的函数,是一种异步编程的解决方案
 声明方式:函数和函数名之间加 * 号
   function * fun(){console.log('hello')}
   let interator = fun()
   console.log(interator);//返回值是一个迭代器对象
   调用:interator.next();//hello 调用的是里面的next()方法
 yield语句
   function * fun(){
     console.log('111');
     yield '第二次调用';
     console.log('222');
     yield '第三次调用';
     console.log('333');
   }
   let interator = fun()
   interator.next();//111
   interator.next();//222
   interator.next();//333
 生成器函数参数
   function * fun(parmas){
     console.log(params);
     let first = yield 1
     console.log(first)
     let second  = yield 2
     console.log(second)
   }
   let interator = fun('A');//获取迭代器对象
   interator.next();//A {value:1,done:false}
   //在调用时可以传入实参,实参作为yield语句的返回结果(第二次调用传入的实参会作为第一个yield语句的返回结果)
   interator.next();//A {value:1,done:false}
   //同样;第三次调用的参数会作为第二个yield语句的返回结果,以此类推

 实例:
   1、回调地狱函数:
     function fun1(){
       console.log(111)
       function fun2(){
         console.log(222)
         function fun3(){
           console.log(333)
           //...
         }
       }
     }
   2、生成器函数
     function fun1(){
       console.log(111)
       interator.next();//可传参数,作为第一个yield语句的返回值
     }
     function fun2(){
       console.log(222)
       interator.next()
     }
     function fun3(){
       console.log(333)
       interator.next()
     }
     function * fn(){
       yield fun1()
       yield fun2()
       yield fun3()
     }
     let interator = fn()
     interator.next()

12、Promise(重要)

ES6引入的异步编程的解决方案,语法上是一个构造函数,用来封装异步操作,并可以获取成功或失败的结果
  基本语法:
  //实例化一个Promise对象,里面的参数可以是一个异步函数(例:要封装的请求),函数有两个参数,可以随便,通常是resove和reject
  const prom = new Promise(functiong(resove,reject){
    function fun(){
      let res = '返回结果(成功)'
      resove(res)
      let res2 = ‘返回结果(失败)’
      reject(res2)
    }
  })
  //回调Promise的then()方法,then()有两个参数,都是函数,函数有实参,分别是resove()返回的成功数据,和reject返回的失败数据
  prom.then((res)=>{
    console.log(res)
  },(err)=>{
    console.log(err)
  })
  then()方法的返回结果是一个Promise对象,对象状态由函数的执行结果决定:
  1、如果回调函数中返回的结果是非Promise类型的属性,状态为成功,返回值为对象的成功的值
  2、如果回调函数中返回的结果是Promise类型,则状态跟随返回的Promise的状态
  then()方法可以链式调用(解决回调地狱)
  catch()方法返回错误信息 
  例:prom.ctach(res=>{return '正确' }).catch(err=>{console.log('失败')})

13、Set

Es6提供新的数据结构Set(集合),类似于数组,但是成员都是唯一的;集合实现了interator接口,可使用扩展运算符(...)和for...of进行编辑
  1、集合的属性和方法
    01、size  返回集合的元素个数
    02、add  添加一个元素,返回当前的集合
    03、delete  删除元素,返回Boolean值
    04、has  检测集合是否包含某个元素,返回Boolean值
    05、clear 清空集合
  2、声明方式
    let s =  new Set();//typeof=>Object
  3、使用
    let arr = [5,10,5,15]
    let s2 = new Set(arr);//{5,10,15}
    s2.size ;//3
    s2.add(20);//{5,10,15,20}
    s2.delete(2);//{10,15,20}
    s2.has(5);//false
    s2.clear();//{}
    for(let s of s2){
      console.log(s);//可获得里面的每个值
    }
  4、数组去重(常用)
    let arr = [1,4,3,3,2,2,3,]
    let arr2 = [...new Set(arr)];//[1,4,2,3]

14、Map

Map数据结构,类似于对象,是键值对的集合,但是键的范围不限于字符串,各种类型的值都可以当做键。Map实现了interator接口,可使用扩展运算符和for...of循环遍历
  Map的属性和方法
    01、size  返回元素个数
    02、set  添加新的元素,返回当前Map
    03、get  返回键名对象的键值
    04、has  检测map中是否含有某个元素,返回Boolean值
    05、清空集合,返回Map(0){}
声明方式:
  let m = new Map()
使用:
  m.set('name','周米粒');// {'name'=>'周米粒'}
  m.set('fun',function(){});// {'fun'=>function(){}}
  m.size;//2
  m.delete('name');//{'fun'=>function(){}}
  m.get('fun');//function(){}
  m.clear();//map(0){}
  for(let i of  m){console.log(i)};//数组的形式[键,值],[键,值]

15、class

更接近传统语言的写法;通过class关键字=可以定义类,可看作是一个语法糖,大部分功能ES5可以实现,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法
//TODO 有点虚,下次还得再看看

16、数值扩展

一些方法
  01、Number.isFinite();检测一个数值是否为有限数,例:
    Number.isFinite(100);//返回Boolean值
  02、Number.isNaN();//检测一个数是否为数字,例:
    Number.isNaN(22);//返回Boolean值
  03、Number.paseInt()提取整数,例:
    Number.parseInt('521亲爱的姑娘');//521
  04、Number.parseFloat提取浮点数,例:
    Number.parseFloat('3211.1多瓦');//3211.1
  05、Number.isInteger();检测一个数是否为整数,例:
    Number.isInteger(6.6);//false 返回boolean值
  06、Math.trunc();将数字的小数部门抹掉
    Math.trunc(6.6);//6,返回抹去小数后的整数
  07、Math.sign();判断一个数是正数,负数,零
    Math.sign(66);//1,正数
    Math.sign(-66);//-1,负数
    Math.sign(0);//0,零

17、对象方法的扩展

1、Object.is() 判断两个值是否相等
    Object.is(66,66);//true
    Object.is(66,61);//false
    Object.is(NaN,NaN);//true,特殊
2、Object.assign()对象的合并
  let Obj1 = {}
  let Obj2 = {}
  Object.assign(Obj1,Obj2);//对象2会把对象1覆盖,返回合并后的新对象
3、Object.setPrototypeof()设置原型对象;Object.getPrototypeof();获取原型对象
  const obj1 = {name:'周米粒'}
  const obj2 = {work:'巡山',address:'落魄山'}
  Object.setPrototype(obj1,obj2);设置原型对象
    输出结果:{name:'周米粒',
    __proto__:{
      work:'巡山',
      address:'落魄山'
    }}
  Object.getPrototypeof(obj1);//获取原型对象

18、模块化

将一个大的程序文件,拆分成许多小的程序文件,然后将小文件组合起来
1、好处:
  01、防止命名冲突
  02、代码复用
  03、更容易维护
2、模块化规范产品
  1、CommonJS => NodeJS  Browserify
  2、AMD => requireJS
  3、CMD => sealJS
3、 ES6模块化语法(在浏览器中无法直接使用,我们需要在引入模块的 
                    
                    

你可能感兴趣的:(ES6~ES11)