ES6(let\const\箭头指向

目录

var与let 和const的区别

        

目录

var与let 和const的区别

一、新增了块级作用域

 二、var定义的变量，变量有默认提升功能，let const则不会有提升变量问题

 三、var 可以重复定义变量（变量名一致，取最近一次），let const 不允许重复定义

四、var定义的变量默认挂载到window对象上,let和const不会

  五、let和const 存在 暂时性死区问题

let与const的区别

字符串模板

数据结构方法

二、解构做交互变量

对象简化写法

箭头函数

function定义与箭头函数的区别

传统this指向

箭头函数

arguments

箭头函数应用场景

点击变色

箭头函数简写

---

---

一、新增了块级作用域

要查找li标签中对应的索引值0.1.2.3

<ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

</ul>

var x=20 //两个作用域：全局 局部:函数内部才叫局部
var lis=document.getElementsByTagName("li")
for(var n=0;n<lis.length;n++){ //全局中的n=4
         lis[n].οnclick=function(){
             console.log(n) //输出结果为4 
         }
    } 
//用var方法，因为var没有块级作用域，所以只能去全局中寻找，跳出for循环后的结果都为4

var x=20 
var lis=document.getElementsByTagName("li")
for(let n=0;n<lis.length;n++){ //全局中的n=4
         lis[n].οnclick=function(){
             console.log(n) //输出结果为0,,1,2,3
         }
    } 

 2、 if(true){

        var x=20

}

console.log(x)  //输出结果为20，定义为全局变量

if(true){

        let x=20

}

console.log(x)  输出结果为 not difinde 因为let定义局部变量 调用后销毁 （只在局部作用域生效）

 二、var定义的变量，变量有默认提升功能，let const则不会有提升变量问题

举例：console.log(x)

            var x=20;  //输出结果为undifinde  因为 变量提升var  所以不报错 只会找不到

        

        console.log(x)  //let无法提升变量，输出结果报错

           let x=20;

 三、var 可以重复定义变量（变量名一致，取最近一次），let const 不允许重复定义

var x=20

var x=30

console.log(x)  //30为新值也是最近的 所以输出结果为30

let x=20

let x=30

console.log(x) //输出报错  let已定义，不能重复定义

四、var定义的变量默认挂载到window对象上,let和const不会

举例

var x=20   

console.log(window.x)  //输出结果为20，var定义的变量默认挂在window对象上

let x=20   

console.log(window.x)  //  undefined let 不会把变量挂载到window对象上

  五、let和const 存在 暂时性死区问题

var a=20
 if(true){
     a=40
     console.log(a)//40
     let a=30
}       
//let
let a=20
 if(true){
     a=40
     console.log(a)  //输出结果 报错
     let a=30
}

//只要在作用域中 用let定义了变量，就必须在定义后使用 ，哪怕全局有 也不能用 
 

let与const的区别

const是定义常量，定义之后不能进行更改

let 是定义变量，可以更改存储内容

             const y = 30
             y = 40  在①位置
             console.log(y)  //报错 无法更改

             y = 40   在②位置时
             let x = 20
             x = 30
             console.log(x) //结果为30 

在①位置时候

在②位置时候

 更改变量放在console.log下面  后面的才可以输出 否则只有报错

字符串模板

 防止因使用大量变量出现的各种小问题

//字符串模块 快速字符串和变量拼接
let area=100
面积为 area 平方米
 console.log("面积为"+area+"平方米")
//使用字符串模板进行
//`` 里面的变量放到${变量名}
console.log(`面积为"${area}"平方米`)

反引号为tap键上面那个英文输入模式键位
 

数据结构方法

一、解构：顾名思义就是将复杂结构中的内容，解构为简单的对象或者数组

let user={ name:"w", age:21, uimg:"123.png" }

解构的语法:左右结构相同、左侧和右侧的key相对应

解构对象
let {name,age}=user
console.log(name)// 输出结果为w
console.log(age)// 输出结果为21
//解构数组
let arr=[1,23,4]
let [a,b,c]=arr
console.log(a)  //1
console.log(b)  //23
console.log(c)  //7
 

二、解构做交互变量

变量的定义最后执行

let a=20

let b=30;//一定加分号否则下一行会与这一行代码合并，并且下一行会先于这一行代码先运行。 [a,b]=[b,a]

console.log(a)

console.log(b)

对象简化写法

function简化    值=属性=变量

let name="wangyi"

let age=21

let obj={

name：name,  //name属性等于当前的name变量  所以可以省略 直接 name，

age=age,   //age属性等于当前的age变量  所以可以省略 直接 age，

//eat方法 eat(){

        }

}

箭头函数

function定义与箭头函数的区别

1、传统的function定义函数 this指向性并不明确，会随着使用环境的变化而发生变化

箭头函数得到this指向性明确，且永远指向生产环境

传统this指向

//this指向
 function show(){
       console.log(this)// show()//window
}
bt1.οnclick=show //   this指向 bt1
//封装到对象的方法里
let obj={
   name:"wangyi",
   show:show；
}        
obj.show()  //  this指向obj
 

箭头函数

let show=()=>{

console.log(this) }

show()//   this指向window

bt1.οnclick=show

let obj={

        name:"wangyi", show:show

}

obj.show() //this依然指向window

传统的function定义有默认提升功能，箭头函数没有（箭头函数是let语句，没有提升功能）

举例

//传统的function
show();//可以调用
 function show(){
       console.log(this)// show()//window
}
//箭头函数，因为是let语句，没有提升功能，所以无法调用
let obj={
   name:"wangyi",
   show:show
}
obj.show()  

传统function函数中具有arguments参数集合，箭头函数乜有rest参数

arguments

根据用户所传入的个数来定义形参（实参决定内容）

function sum（a，b，c，）{

        console.log(argumengts)

}

       consol.log(sum(1,2,3,4,5,6,7))  

输出为数组argumengts代表着实参的集合  跟形参没有关系 就算定义了形参 他也是所有实参集合

箭头函数没有arguments 然后用rest来代替

let show=（a,b...args）=>{

        console.log(arguments)

}

show(1,2,3,4) //输出结果  2 [3,4]

输出为数组   rest参数 抛出形参外所有实参

前者是输出集合，后者是输出数组

箭头函数应用场景

点击变色

<style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
 </style>
 <body>
     <div class="box">
 </body>
 <script>
 let box=document.getElementsByClassName("box")[0]
 box.οnclick=function(){
      //延时定时器:异步操作 统一在window进行
      //原本解决方式（voe 或者小程序)
      // let that=this // 先用变量存一下this 否则就会出现this指向跟随调用环境改变的问题
      // setTimeout(function(){
      //     console.log(that)
      //     that.style.backgroundColor="blue"  //this指向已经随着调用环境发生变化指向了window
      // },3000) 

      //箭头函数操作方式           
      setTimeout(()=>{
         this.style.backgroundColor="blue"//箭头函数 this永远指向事件源
      },3000)
}
 </script>

箭头函数简写

1、如果箭头函数中有且只有一个参数，则可以省略（）

2、如果箭头函数中有且只有一行语句，并且是return语句，则可以省略{}和return

  let pow=(n)=>{return n*n}//原始写法
  let pow=n=>{return n*n}//只有一个参数，那么可以省略()
  let pow= n=>n*n//有且只有一行语句，并且是return语句的话 可以省略{}和return
 //  let a= item=>item>50 //传入一个item 返回一个大于50的真  布尔值