【ES6+】00
【ES6+】00
一、简化对象和函数写法1、概述ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；2、代码示例及相关说明代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
&
【ES6+】00
1、概述
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；
2、代码示例及相关说明
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简化对象写法</title>
</head>
<body>
<script>
// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
// 变量和函数
let name = "訾博";
let change = function(){
cole.log("活着就是为了改变世界！");
}
//创建对象
ct school = {
// 完整写法
// name:name,
// change:change
// 简化写法
name,
change,
// 声明方法的简化
say(){
cole.log("言行一致！");
}
}
();
school.say();
</script>
</body>
</html>1、概述
ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；
2、箭头函数的注意点
- 如果形参只有一个，则小括号可以省略；
- 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；
- 箭头函数 this 指向声明时所在作用域下 this 的值；
- 箭头函数不能作为构造函数实例化；
- 不能使用 arguments；
、特性
- 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；
- 不能作为构造实例化对象；
- 不能使用 arguments 变量；
4、代码演示及相关说明
注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适；
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>箭头函数</title>
</head>
<body>
<script>
// ES6允许使用箭头（=>）定义函数
// 传统写法：无参数
var say = function(){
cole.log("hello！");
}
say();
// ES写法2：无参数
let speak = () => cole.log("hello 哈哈！");
speak();
// 传统写法：一个参数
var hello = function(name){
return "hello " + name;
}
cole.log(hello("訾博"));
// ES6箭头函数：一个参数
let hi = name => "hi " + name;
cole.log(hi("訾博"));
// 传统写法：多个参数
var sum = function(a,b,c){
return a + b + c;
}
cole.log(sum(1,2,));
// ES6箭头函数：多个参数
let he = (a,b,c) => a + b + c;
cole.log(he(1,2,));
// 特性
// 1、箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
ct school = {
name : "大哥",
}
// 传统函数
function getame(){
cole.log("getame：" + );
}
// 箭头函数
getame1 = () => cole.log("getame1：" + );
= "訾博";
// 直接调用
getame();
getame1();
// 使用call调用
(school);
(school);
// 结论：箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值
// 2、不能作为构造实例化对象
// let Persion = (name,age) => {
// = name;
// this.age = age;
// }
// let me = new Persion("訾博",24);
// cole.log(me);
// 报错：Uncaught TypeError: Persion is not a ctructor
// 、不能使用 arguments 变量
// let fn = () => cole.log(arguments);
// fn(1,2,);
// 报错：Uncaught ReferenceError: arguments is not defined
</script>
</body>
</html>5、运行结果
6、箭头函数的实践和应用场景
需求-1：点击 div 2s 后颜变成『粉』
传统写法存在问题：
代码：
代码语言：javascript代码运行次数：0运行复制<!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(){
cole.log(this);
this.style.background = 'pink';
},2000);
// 报错Cannot set property 'background' of undefined
});
</script>
</body>
</html>报错：
传统写法问题解决：
代码语言：javascript代码运行次数：0运行复制<!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(){
cole.log(this);
_this.style.background = 'pink';
},2000);
// 报错Cannot set property 'background' of undefined
});
</script>
</body>
</html>ES6写法：
（从这个案例中就能理解ES6箭头函数的特性了）
代码语言：javascript代码运行次数：0运行复制<!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 从数组中返回偶数的元素
代码语言：javascript代码运行次数：0运行复制<!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 从数组中返回偶数的元素
ct arr = [1, 6, 9, 10, 100, 25];
// ct result = arr.filter(function(item){
// if(item % 2 === 0){
// return true;
// }else{
// return false;
// }
// });
ct result = arr.filter(item => item % 2 === 0);
cole.log(result);
// 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
// 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
</script>
</body>
</html>#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 09:28:28
推荐阅读
| 留言与评论（共有 9 条评论） |
| 本站网友 香港电话 | 18分钟前 发表 |
| 2 | |
| 本站网友 四会二手房出售 | 3分钟前 发表 |
| 24); // cole.log(me); // 报错：Uncaught TypeError | |
| 本站网友 攒肚 | 28分钟前 发表 |
| b | |
| 本站网友 张灿 | 20分钟前 发表 |
| 200px; height | |
| 本站网友 创鸿集团 | 28分钟前 发表 |
| change | |
| 本站网友 脑死亡还有救吗 | 16分钟前 发表 |
| 简化对象和函数写法1 | |
| 本站网友 域名服务器是什么 | 3分钟前 发表 |
| 函数的返回值为该条语句的执行结果； 箭头函数 this 指向声明时所在作用域下 this 的值； 箭头函数不能作为构造函数实例化； 不能使用 arguments； | |
| 本站网友 成都二手房价 | 20分钟前 发表 |
| 200px; background | |