js第四天学习整理（es6）

let/const

    let
        1、用于声明变量
        2、不能重复声明
        3、不会进行预处理,不存在变量提升
        4、循环遍历加监听   =>趋向于java的严格模式。


   const
       1、常量不容许进行修改
       2、声明变量大家默认的大写
       3、let/const都一样都是先声明后使用。
       4、在 {} 内 是存在块级作用域
       

变量的解构赋值

         大白话:解析赋值双方结构,进行赋值

    //对象的解析赋值
    let{n,a} = {n:'tianze',a:18}
    左边想要的数据需要 右边对象存在的属性，没有就返回undefined
        1、当后台返回大量数据时,就可以通过解析赋值获取自己需要的数据
        obj={name:'tianze',age:19}
        let{age} = obj
        console.lig(age)//18
        
    //数组的解构赋值
    let [a,b] = [1,'tianze']
    let arr = [1,3,5,'age','haha']
    let[,,a,b] = arr
    console.log(a,b)//5 age
    
    
    实例:
    let student = {name:'tianze',age:18,id:987,sex:'男'}
    
    function studentInfo({name,age}){
        console.log(name,age)
    }
    studentInfo(obj)

模板字符串

  1、模板字符串使用 ``将字符串和变量包裹
  2、变量用${xxx}包裹使用
  let obj = {name:'tianze',age:18}
  let   info = `我的名字叫做${obj.name},我今年${obj.age}岁,我是一个前端小白请大家多多关照`
  console.log(info)//我的名字叫做tianze,我今年${obj.age}岁,我是一个前端小白请大家多多关照

简化的对象写法

let username = 'tianze'
let age = 18
let obj = {
    username:username, //同名属性可以省略不写,(作用域链条的问题,去访问外面的username???)
    age,
    getName(){     // 可以省略:function
        return this.name
    }
}
obj.getname()//tianze

箭头函数

    //字面量声明
    let fun = function(){
        console.log('我是字面量函数')
    }
    
    //箭头函数声明
    //1、没有形参()不可以省略
    let fun1 = () => console.log('我是箭头函数')
    //2、只有一个形参时()可以省略
     let fun2 = x => console.log(x);//2
     fun2(2)
     //3、存在对了形参时不可以省略()
     
     箭头函数{}的情况
     let fun4 = (x,y) => x+y  //在没有{}的情况下会自动求职返回(只有一条语句)
     console.log(fun4(4,6))//10
     let fun5 = (x,y) => {return x+y} //加上大括号只能使用return 的方式返回(只有一条语句)
     
     2、=>后加上 {} 就以为这你切换至手动挡,须自己return 返回值 =>没有指定返回值就返回undefined
     ......
 
 箭头函数的特点:
     (1)箭头函数没有自己的this,箭头函数的this不是调用时候决定的,而是在定义的时候处在的对象
     就是他的this
     (2)箭头函数的this看最外层是否有函数
        如果有外层函数的this就是箭头函数的this
        如果没有this则是window
        
    let obj = {
        name :'箭头函数',
        getName: function(){   // => getName:()=>  函数的作用域来确定this执行的指向{}没有涉及
            btn.onclick = () =>{
                console.log(this)
            }
        }
    }
     obj.getname()  //obj  // =>window

...运算符

            rest(可变参数)
            用来取代arguments,但比 arguments灵活的,只能时最后部分形参参数
            function fun(...value){
                console.log(value)
                value.forEach(function(item,index){
                    console.log(item)
                })
            }
            fun(1,2,3)
            
            扩展
            指定位置扩展数组
            arr = [1,6]
            arr2 = [2,3,4,5] //将arr2插入数组arr[1-6直接]输出1-6
            arr = [1,...arr,6]  ==>传入参数时，...必须在参数末尾
            console.log(arr) //1,2,3,4,5,6
            console.log(...arr) //1,2,3,4,5,6
            

形参默认值

            function Point(x=0,y=0){
                this.x = x
                this.y = y
            }
          let point1 = new Point(25,78); 
          let point2 = new Point();
          console.log(point1)      //{x=25,y=78}
           console.log(point2)     //{x=0,y=0}  明白的覆盖
       

Promise对象(待续涉及到ajax哎长叹一声.....)

         promise对象:代表未来某个将来要发生的事情()一般指异步操作
         1、他可以将异步操作一同步的方式表达出来，从而避免层层的回调
         使用:
              (1)Promise 是一个构造函数,用来生成prmise对象
              (2)
              

Symbol

             出现 :es5中的属性名都是字符串,容易出现重名,污染环境
             优点 :es6添加了原始数据类型 symbol
                 (1)Symbol属性值对应的是唯一的值,解决命名冲突的问题
                 (2)Symbol值不能与其他数据进行计算,包括同字符串拼接
                 (3)for in  for of 遍历时不会遍历到Symbol属性
                 
       

    //创建Symbol属性值
    
    let symbol = Symbol();
    console.log(symbol)
    let obj = {username:'tianze',age:18}
    //给obj添加 symbol属性 =>obj[] ==>属性选择器
    
    obj[symbol] = 'hello'
    
    console.log(boj.symbol) //hello
    //Symbol();传入参数用于标识symbol
    let symbol1 = Symbol(one);
    let symbol2 = Symbol(two);
    console.log(symbol1==symbol2) //false
     console.log(symbol1,symbol2) 
    

iterator遍历器:

        iterator 是一种接口机制，为不同的数据结构提供统一的访问机制
        
        作用:
            (1)为各种数据结构提供一个统一的、简化的接口使用
            (2)使得数据结构成员可以按照某种方式排列
            (3) es6提供一种新的遍历命令for of 循环 iterator接口主要供 for of消费
        工作原理:
             1、创建一个指针对象(遍历器对象),指向数据结构的起始位置
             2、第一次调用next方法,指针自动指向数据结构的第一个成员
             3、接下来每一次调用next方法,指针会一直向后移动,知道一直最后一个成员
             4、每次调用next方法都会返回一个包含value 和 done的对象{value:当前元素的值,dom 布尔值}
             5、value 表示当前遍历的值 dom布尔值表示是否遍历至最后一个元素。
             
        扩展理解:
             1、当数据结构部署了Symbol.iterator接口，该数据就可以使用for of 遍历
             2、使用 for of 去遍历目标数据的时候,该数据会自动的去找Symbol.iterator属性
             3、Symbol.iterator属性指向对象的默认的遍历器方法
             
             1、Array
             2、arguments
             3、set容器
             4、map容器
             

自定义一个iterator接口

function myIterator(arr){
        let nextIndex = 0  //记录指针的位置
        return:{  //遍历器对象
            next:function(){
       return:nextIndex <arr.length?{value:arr[arrIndex++],done:false}:{value:'udefined',done:true}
            }
        }
        
}
//准备的数据
let arr = ['ab','shuaige','tianze',123,987]
let iteratorObj = myIterator(arr)
console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())
console.log(iteratorObj.next())

for of

    //将iteration 接口部署到指定的数据类型上,可以使用 for of循环去遍历
    //数组 字符串 arguments set容器 map容器
    //普通对象没有内置iterator方法,所以没法使用 for of
    使用方式和for in类似
    arr['tianze','shuige','meizi']
    for(let i of arr){
        console.log(i)//tianze shuige meizi 
    }
   let str 'zxcv'
   for(i of str){
       console.log(str)// z x c v
   }
   function fun(){
       console.log('hahaha')
       for(i of arguments){
           console.log(i) //2 ,3,5,6
       }
   }
   
   fun(2,3,5,6)