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

一时失言乱红尘 2023-10-05 16:02 28阅读 0赞

**目录**

一、简化对象和函数写法

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、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

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

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

**传统写法存在问题：**

**代码：**

**报错：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

**传统写法问题解决：**

**ES6写法：**

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

### 需求-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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201217102243398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201217102554177.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70