箭头函数传统和箭头函数this指向箭头函数简写字符串模板数据解构对象简化写法

最新推荐文章于 2024-08-03 17:05:14 发布

等雪落江南

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量287

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qaq99625/article/details/124173835

版权

箭头函数

this指向性不变的使用箭头函数

function函数与箭头函数的区别

1.传统的function定义函数 this指向性不明确,随之使用环境的变化发生改变

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

传统this指向

function show(){
		    console.log(this)
}
show()//this指向window

<button id="bt1"></button>

function show(){
	 console.log(this)
}

bt1.onclick=show//this指向事件源bt1

封装到对象的方法里

 let obj={
	name:"wangyi",
	show:show//他有一个show方法等于show函数
}
obj.show()//this指向obj

箭头函数this指向

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

2.传统function定义有默认的提升功能，箭头函数没有

//传统function
show();//可以调用
function show(){
	console.log(this)
}

//箭头函数
show();//报错
let show=()=>{
	 console.log(this)
}

3.传统function 可以作为构造函数，箭头函数不可以

因为箭头函数的this永远指向window，所以没有办法作为构造函数

4.传统function 函数中具有arguments参数集合，箭头函数没有

根据用户传入的参数的个数来决定时，可以使用argumrnts，实参决定内容

argumrnts与形参没有关系，他永远都是实参的集合

function sum(a,b,c){//形参
		//arguments集合
		console.log(arguments) //实参的集合
		let s=0
		for(let n=0;n<arguments.length;n++){
			  s+=n
		}
			return s
}
// 实参
console.log(sum(1,2,3,4,5,6,7))//21

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

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

let show=(a,b,...args)=>{
		console.log(args)
}
show(1,2,3,4)//2[3,4]

箭头函数应用场景

</div>
</body>

原本解决办法


 <script>
        //点击后3s 背景色变成蓝色
        let box=document.getElementsByClassName("box")[0]
        box.onclick=function(){
            //延时定时器:异步操作 统一在window进行
			// 先用变量储存this，否则会出现this指向跟随调用环境改变的问题
            let that=this
            setTimeout(function(){
                console.log(that)
                that.style.backgroundColor="blue"
            },3000)
       
    </script>

箭头函数解决方法

 let box=document.getElementsByClassName("box")[0]
 box.onclick=function(){
     setTimeout(()=>{
			   // 箭头函数 this永远指向他所创建的环境，所有指向事件源
               this.style.backgroundColor="blue"
      },3000)
 }

箭头函数简写

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返回一个大于20的真布尔值

字符串模板

防止使用大量变量出现的问题

字符串模块，快速字符串和变量拼接

let area = 100
console.log("面积为"+area+"平方米")//面积为100平方米

使用字符串模板进行拼接 `` 里面的变量放到${变量名}

反引号时Tab上方的那个键位

let area = 100
console.log(`面积为${area}平方米`)//面积为100平方米

数据解构

解构：将复杂结构中的内容解构成简单结构

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

解构语法：左右结构相同，左侧和右侧的key相同

let {name,age}=user
console.log(name)//wang
console.log(age)//21

数组也可以解构

let arr=[1,10,100]
let [a,b,c]=arr
console.log(a)//1
console.log(b)//10
console.log(c)//100

解构做交互变量

let a=20
let b=30;//注意！一定要加分号，
		 //否则下一行代码会和这一行代码合并，并且会先运行下一行
[a,b]=[b,a]
console.log(a)//30
console.log(b)//20

对象简化写法

let name="wangyi"
let age=21
let obj={
		name,//obj有name属性并且name属性等于当前的name变量
		age,//obj有age属性并且age属性等于当前的age变量
		//eat方法 简化了function
		eat(){
		
		 }
}