【ES6+】003-ES6新特性：简化对象和函数写法、箭头函数

最新推荐文章于 2022-06-15 17:28:15 发布
最新推荐文章于 2022-06-15 17:28:15 发布
阅读量326 收藏 1
点赞数 1
分类专栏： Web 文章标签： js javascript es6 箭头函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/111309713
版权

目录

一、简化对象和函数写法

1、概述

2、代码示例及相关说明

二、箭头函数

1、概述

2、箭头函数的注意点

3、特性

4、代码演示及相关说明

5、运行结果

6、箭头函数的实践和应用场景

需求-1：点击 div 2s 后颜色变成『粉色』

需求-2  从数组中返回偶数的元素

一、简化对象和函数写法

1、概述

 

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；

 

2、代码示例及相关说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简化对象写法</title>
	</head>
	<body>
		<script>
			// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
			// 变量和函数
			let name = "訾博";
			let change = function(){
				console.log("活着就是为了改变世界！");
			}
			//创建对象
			const school = {
				// 完整写法
				// name:name,
				// change:change
				// 简化写法
				name,
				change,
				// 声明方法的简化
				say(){
					console.log("言行一致！");
				}
			}
			school.change();
			school.say();
		</script>
	</body>
</html>

 

二、箭头函数

1、概述

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

 

2、箭头函数的注意点

  1. 如果形参只有一个，则小括号可以省略；

  2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；

  3. 箭头函数 this 指向声明时所在作用域下 this 的值；

  4. 箭头函数不能作为构造函数实例化；

  5. 不能使用 arguments；

 

3、特性

  1. 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；

  2. 不能作为构造实例化对象；

  3. 不能使用 arguments 变量；

 

4、代码演示及相关说明

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数</title>
	</head>
	<body>
		<script>
			// ES6允许使用箭头（=>）定义函数
			// 传统写法：无参数
			var say = function(){
				console.log("hello！");
			}
			say();
			// ES写法2：无参数
			let speak = () => console.log("hello 哈哈！");
			speak();
			// 传统写法：一个参数
			var hello = function(name){
				return "hello " + name;
			}
			console.log(hello("訾博"));
			// ES6箭头函数：一个参数
			let hi = name => "hi " + name;
			console.log(hi("訾博"));
			// 传统写法：多个参数
			var sum = function(a,b,c){
				return a + b + c;
			}
			console.log(sum(1,2,3));
			// ES6箭头函数：多个参数
			let he = (a,b,c) => a + b + c;
			console.log(he(1,2,3));
			
			// 特性
			// 1、箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
			const school = {
				name : "大哥",
			}
			// 传统函数
			function getName(){
				console.log("getName：" + this.name);
			}
			// 箭头函数
			getName1 = () => console.log("getName1：" + this.name);
			window.name = "訾博";
			// 直接调用
			getName();
			getName1();
			// 使用call调用
			getName.call(school);
			getName1.call(school);
			// 结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
			// 2、不能作为构造实例化对象
			// let Persion = (name,age) => {
			// 	this.name = name;
			// 	this.age = age;
			// }
			// let me = new Persion("訾博",24);
			// console.log(me);
			// 报错：Uncaught TypeError: Persion is not a constructor
			// 3、不能使用 arguments 变量
			// let fn = () => console.log(arguments);
			// fn(1,2,3);
			// 报错：Uncaught ReferenceError: arguments is not defined
		</script>
	</body>
</html>

 

5、运行结果

 

6、箭头函数的实践和应用场景

需求-1：点击 div 2s 后颜色变成『粉色』

传统写法存在问题：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数的实践和应用场景</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background: #58a;
			}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script>
			// 需求-1  点击 div 2s 后颜色变成『粉色』
			// 获取元素
			let ad = document.getElementById('ad');
			// 绑定事件
			ad.addEventListener("click", function(){
				// 传统写法
				// 定时器：参数1：回调函数；参数2：时间；
				setTimeout(function(){
					console.log(this);
					this.style.background = 'pink';
				},2000);
				// 报错Cannot set property 'background' of undefined
			});
</script>
	</body>
</html>

报错：

传统写法问题解决：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数的实践和应用场景</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background: #58a;
			}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script>
			// 需求-1  点击 div 2s 后颜色变成『粉色』
			// 获取元素
			let ad = document.getElementById('ad');
			// 绑定事件
			ad.addEventListener("click", function(){
				// 传统写法
				// 保存 this 的值
				let _this = this;
				// 定时器：参数1：回调函数；参数2：时间；
				setTimeout(function(){
					console.log(this);
					_this.style.background = 'pink';
				},2000);
				// 报错Cannot set property 'background' of undefined
			});
</script>
	</body>
</html>

 

ES6写法：

（从这个案例中就能理解ES6箭头函数的特性了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数的实践和应用场景</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background: #58a;
			}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script>
			// 需求-1  点击 div 2s 后颜色变成『粉色』
			// 获取元素
			let ad = document.getElementById('ad');
			// 绑定事件：这也是错误写法，这里的this还是window
			// ad.addEventListener("click", () => {
			// 	// ES6写法
			// 	// 定时器：参数1：回调函数；参数2：时间；
			// 	setTimeout(() => this.style.background = 'pink',2000);
			// 	}
			// )
			// 绑定事件
			ad.addEventListener("click", function(){
				// ES6写法
				// 定时器：参数1：回调函数；参数2：时间；
				// 这个this才是ad
				setTimeout(() => this.style.background = 'pink',2000);
				}
			)
		</script>
	</body>
</html>

 

需求-2  从数组中返回偶数的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>箭头函数的实践和应用场景</title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background: #58a;
			}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script>
			// 需求-1  点击 div 2s 后颜色变成『粉色』
			// 获取元素
			let ad = document.getElementById('ad');
			// 绑定事件：这也是错误写法，这里的this还是window
			// ad.addEventListener("click", () => {
			// 	// ES6写法
			// 	// 定时器：参数1：回调函数；参数2：时间；
			// 	setTimeout(() => this.style.background = 'pink',2000);
			// 	}
			// )
			// 绑定事件
			ad.addEventListener("click", function() {
				// ES6写法
				// 定时器：参数1：回调函数；参数2：时间；
				// 这个this才是ad
				setTimeout(() => this.style.background = 'pink', 2000);
			})
			//需求-2  从数组中返回偶数的元素
			const arr = [1, 6, 9, 10, 100, 25];
			// const result = arr.filter(function(item){
			//     if(item % 2 === 0){
			//         return true;
			//     }else{
			//         return false;
			//     }
			// });
			const result = arr.filter(item => item % 2 === 0);
			console.log(result);
			// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
			// 箭头函数不适合与 this 有关的回调.  事件回调, 对象的方法
		</script>
	</body>
</html>

 

 

 

 

 

訾博ZiBo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
整理es6-es12新特性
然后不二
02-24 632
es6-es12所有新特性
ES6学习（四）：简化对象写法和箭头函数
激洪的博客
04-15 394
ES6之简化对象写法和箭头函数
es6 对象简化写法-函数
weixin_34092455的博客
08-17 359
表达式还可以用于定义方法名。 let obj = { ['h' + 'ello']() { return 'hi'; } }; obj.hello() // hi  
【ES6】对象方法简化写法、箭头函数、参数默认值、rest参数
Errol's Blog
04-21 854
文章目录简化对象和函数写法箭头函数参数默认值rest 参数 简化对象和函数写法 【介绍】 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁 let name = "张三"; let talk = function () { console.log("你好，很高兴见到你"); } //创建对象 const person = { // 完整写法 // name:name, //
ES6对象方法声明对象时，箭头函数this的指向问题
Teemo_shape的博客
04-16 291
基础 没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' const foo = { value: '小红', getValue: ...
es6 对象方法简写 与 箭头函数区别
她的猿的博客
07-27 956
// 箭头函数 this 指向上一层对象 wx.chooseLocation({ success: (res) =&gt; { this.lng = res.longitude this.lat = res.latitude this.address = res.address } }) // 简写方式，this 指向当前对象，报错 wx.chooseLocati...
SK37-WJS-App：天气JavaScript ：（参考：ModernJavaScriptLearning-Part05）-使用（ES6 +-提取-异步函数）
03-04
首先，ES6是ECMAScript 2015的简称，是JavaScript语言的一个重要更新，引入了许多新的特性和语法糖，极大地提升了开发效率和代码可读性。其中，我们关注的是“异步函数”这一特性。 1. **箭头函数**：ES6引入了箭头...
深入浅出ES6新特性之函数默认参数和箭头函数
09-01
**深入浅出ES6新特性：函数默认参数与箭头函数** 在JavaScript的ES6版本中，引入了许多新的特性，极大地提升了开发效率和代码的可读性。其中，函数默认参数和箭头函数是两个非常实用且重要的特性。本文将详细讲解这...
ES6+ 新特性与箭头函数的使用技巧
# 第一章节：介绍ES6和箭头函数 ## 1.1 ES6的概述与背景 ES6，全称为ECMAScript 6，是JavaScript语言的一种新标准。它在2015年发布，引入了许多新特性和语法糖，使得JavaScript语言更加现代化和强大。ES6的出现，...
ES6中新增函数新特性
qq_52908359的博客
06-15 247
使用箭头函数的作用： 💬 简化回调函数的写法： 💬 箭头函数中的this是函数声明时所在的对象；
ES6新特性之对象的简化写法
m0_47354578的博客
07-29 357
ES6中对象的简化写法 ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法 let name = '罗志祥' let famous = function() { console.log('时间管理大师') } const star = { name, famous } // 相当于 // const star = { // name: name, // famous: famous // } ES6还允许在对象中写函数时，去掉:和function c
ES6 对象的简化写法
HelloWord176的博客
06-04 264
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法 前提是对象的属性必须和变量的名字是一样的 let name = '你好' let famous = function() { console.log('时间管理大师') } const star = { name, famous } // 相当于 // const star = { // name: name, // famous: famous // } ES6还允许在对象中写函数时，去掉:
es6—变量、常量、解构、对象、数组的使用
m0_48180834的博客
08-15 299
一、变量 es5中使用var来声明一个变量,var的特性与常规的编程语言都不太相同，因此，es6中，提供了与常规语言类似的声明变量的方法。 let与var不同之处在于： 变量声明不会被提升，即在变量声明之前无法使用该变量 例如： console.log(a); let a=1; 结果会出错，let声明不能提升 2.具有局部作用域，即let声明的变量只能在对应代码块中使用 例如： { let a=1; } console.log(a); 被一个大括号包起来的块是一...
常见的几种ES6的简写
头名字W的博客
03-07 6364
对象字面量对象字面量是指以{}形式直接表示的对象，如下面这样：var book = {  name: 'ES6',}ES6 为对象字面量的语法带来了一些改进：包括属性/方法的简洁表示，可计算的属性名等等.属性的简洁表示法var events = { listen: listen } ==&gt; var events = { listen }可计算的属性名var expertise = 'jour...
ES6对象方法声明时箭头函数this的指向
zou__qi的博客
06-02 421
一、基础 ES6 将箭头函数纳入标准，很多人都知道一些基本的特性，比如下面的： 没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可改变 this 的绑定 不支持 arguments 不支持重复命名参数（无论是严格模式还是非严格模式） 上面的列表时《深入理解ES6》中zakas列出的。 二、问题 最近遇到一个小疑问，也不算是我自己遇到的，看到别人提出的问题： 示例一： // 示例一 lastName
ES6 对象内函数的两种写法
岁月静好
11-22 6532
&lt;script&gt; // 写法1 var person1 = { name: "p1", sayThis() { console.log(this); } }; // 写法2 var person2 = { name: "p2", sayThis:()=&gt; { console.log(this); }...
js函数常见的写法以及调用方法
热门推荐
OBKoro1前端分享
04-01 1万+
写在前面：本文详细的介绍了5中js函数常见的写法以及调用的方法，平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的，找了点资料，做了个总结，需要的小伙伴可以看看，做个参考。 1.常规写法（最常见的那种） //函数的写法 function run () { alert('常规写法');//这里是你函数的内容 } // 调用 run();
ES6箭头函数：简化编程与减少错误
ES6标准引入了箭头函数（Arrow Function），这是一个旨在提供代码简洁性和灵活性的重要特性。在JavaScript的早期版本中，传统函数的定义需要冗长的`function()`语法，这可能导致输入错误，并且编写和阅读代码时较为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值