ES6-----箭头函数的实践与应用场景

最新推荐文章于 2025-08-16 21:57:41 发布
原创 最新推荐文章于 2025-08-16 21:57:41 发布 · 133 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#es6 #前端 #ecmascript

博客探讨了JavaScript中this关键字指向window导致访问对象属性出错的问题，以及两种解决方案：一是使用作用域修复，二是利用箭头函数。此外，还介绍了如何通过普通函数和箭头函数从数组中过滤并返回偶数元素，提供了代码示例和优化后的简洁实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 错误写法实例

因为this 是指向window的，没有style，所以background属性，所以报错

2.解决上面的问题（第一种）

 

 3.解决上面的问题（第二种箭头函数实现）

 

4.从数组里面返回偶数元素

1》第一种普通函数

 

 2》箭头函数

 最简化

总结：

 

 

ES6新特性_ES6箭头函数的实践以及应用场景---JavaScript_ECMAScript_ES6-ES11新特性工作笔记010
添柴程序猿的专栏
01-28 347
然后我们再去看,这个箭头函数的一些应用 右边有块区域我们点击div以后实现2s以后,我们变成粉色 我们去实现 声明一个let ad得到这div对象 然后给这对象添加事件监听,可以看到这里,添加了一个click事件, 然后用定时器,setTimeout把this.style.background='pink'; 设置了粉色. 然后我们去执行,可以看到报错了,原因是拿不到这个this,然后我们console.log(this),把这个this打印出来看看 可以看到这个this,指向.
什么时候不该使用es6箭头函数
weixin_33890526的博客
10-05 770
从开始接触es6到在项目中使用已经有一段时间了，es6有很多优秀的新特性，其中最有价值的特性之一就是箭头函数，他简洁的语法以及更好理解的this值都非常的吸引我。但是新事物也是有两面性的，箭头函数有他的便捷有他的优点，但是他也有缺点，他的优点是代码简洁，this提前定义，但他的缺点也是这些，比如代码太过简洁，导致不好阅读，this提前定义...
ES6函数
sdfsjhgh5324324的博客
04-24 179
函数 函数参数的扩展，箭头函数 参数的扩展：默认参数，不定参数 默认参数 基本用法： 不定参数 不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。 基本用法 箭头有函数 箭头函数提供了一种更加简洁的函数书写方式 基本语法：参数 => 函数体 基本用法： 当箭头函数没有参数或者有多个参数，要用 () 括...
【ES6】箭头函数的适用场景
在热爱技术的路上一直前行。
04-25 617
1.箭头函数适合：与this无关的回调，eg、定时器、数组的方法的回调 （1）定时器回调 （2）数组的方法的回调 let array = [11,23,24,34,44,500]; // 过滤出数组中是偶数的元素，组成新的数组 let result = array.filter(item => item % 2 === 0) console.log(result); 2.箭头函数不适合：与this有关的回调，eg、事件的回
ES6箭头函数(三)-应用场景
金刚
08-15 459
直接作为事件handler document.addEventListener('click', ev => { console.log(ev) }) 作为数组排序回调 var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => { if (a - b > 0 ) { return 1 } else ...
【JavaScript进阶之旅 ES6篇 第七章】箭头函数的实质、箭头函数this指向、箭头函数的使用场景
马云
06-24 395
2、剩余参数 3、箭头函数的this指向 箭头函数的this指向根据外层函数或全局函数的作用域来决定 箭头函数的使用场景 箭头函数内部是没有this机制的，this指向是固化的，只能够通过父级作用域来获取this，闭包的this 箭头函数不能作为构造函数来使用：call、apply、bind 没有arguments对象、用rest运算符替代 在generator函数当中yield命令不会生效 二、箭头函数的使用场景 1、箭头函数不是所有场景都适用 普通函数实现： 使用
ES6-7【箭头函数的实质、箭头函数的使用场景】
小管打天下的博客
04-10 1051
一、箭头函数的实质 this由外层的函数作用域来决定(箭头函数的作用域是父级的作用域，不是父级) =>不能作为构造函数来使用（因为没有this） call、apply、bind无效（因为没有this） 没有arguments对象，用rest（拓展运算符）替代（因为与function不是同一种） yield 命令不能生效，在generator函数中（因为没有this） function foo(){ console.log(this) return (a) =>{
ES6-箭头函数的实践与应用场景
Aaron_杀死庸碌的博客
05-28 252
ES6-箭头函数的实践与应用场景： 1. 箭头函数 this 是静态的，它是在申明时，指向的 this 作用域下的值。指向当前方法/函数下的this，以前的函数，指向的 this 是全局的，window 下的this。以前要使用必须 let that=this 2. 箭头函数适合： 1）适合与 this 无关的回调，定时器，数组方法回调。 3. 箭头函数不适合： 1）不适合与 this 有关的回调，事件回调，对象方法回调。
Cesium ES6-navigation 修改版
11-19
ES6，即ECMAScript 2015，是JavaScript语言的一个重要更新，引入了许多新特性，如类（Class）、模块（Module）、箭头函数（Arrow Function）和Promise等。将Cesium与ES6结合，可以利用这些新特性提高代码的可读性...
ES6-Hands-On:ES6 上手
05-31
箭头函数的语法简洁明了，它的形式为`(参数列表) => 表达式`。它没有自己的`this`值，会继承父级作用域的`this`，这对于回调函数和事件处理非常方便。 ### 3. 类与对象 ES6引入了类的概念，提供了更面向对象的编程...
node-es6-demo：ebuild cli的节点es6模板
02-11
2. **箭头函数**：ES6的箭头函数改变了函数的定义方式，语法简洁且能更好地处理`this`指向。在Node.js的命令行工具中，箭头函数可用于简化回调函数，提高代码可读性。 3. **类与继承**：ES6的`class`关键字和`...
es6-presentation:es6功能介绍
05-09
本演示旨在详细介绍ES6的关键知识点，帮助开发者更好地理解和应用这一版本的JavaScript。** ### 1. **变量声明与赋值：let、const** 在ES6之前，我们主要使用`var`关键字来声明变量，但存在作用域和提升等问题。ES6...
ES6新特性箭头函数语法、如何正确使用箭头函数
热门推荐
qq_32614411的博客
07-03 8万+
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。 基础语法 通常函数的定义方法 var fn1 = function(a, b) { return a + b } function fn2(a, b) { return a + b } 使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数...
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景
weixin_34347651的博客
03-21 653
箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API，大部分同学却对它的了解程度还是不够深... 普通函数和箭头函数的区别： 箭头函数的this指向规则： 1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this let a = () =>{}; console.log(a.prototype...
ES6+内置进制转换方法
gzzeason的博客
08-15 243
【代码】ES6+内置进制转换方法。
23. CommonJS 和 ES6 Module 区别
最新发布
weixin_64684095的博客
08-16 411
CommonJS是 Node.js 中使用的模块化规范，适用于服务端。是 ECMAScript 2015 引入的官方模块化标准，适用于浏览器和现代 Node.js 环境。主要区别如下：加载时机不同：CommonJS 是运行时加载，ES6 Module 是编译时加载。输出方式不同：CommonJS 输出值的拷贝，ES6 Module 输出值的引用。使用语法不同：CommonJS 使用require和，ES6 Module 使用import和export。
现代 JavaScript 基础精要：ES6+ 核心特性完全解析
在0与1的裂缝里，种出AI的未来。
08-13 926
ES6+ 带来的变革不仅仅是语法上的更新，更是 JavaScript 在开发理念、工程化能力和表达能力上的巨大飞跃。熟练掌握let/const、解构、箭头函数、模板字符串、默认参数、等基础特性，能显著提升日常开发的效率和代码质量。深刻理解Promise和，是征服异步编程世界的核心钥匙。模块化 () 则是构建大型、可维护应用的基石。class提供了更优雅的面向对象表达方式，但不忘其基于原型的本质。而Map和Set作为标准化的集合数据结构，在处理特定问题时比传统的Object或数组更加专业和高效。
electron进程间通信- 从渲染进程到主进程
唐璜Taro的博客
08-13 1063
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 1284
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值