JS:ES6-4 简化对象与箭头函数

小白目

已于 2022-08-08 20:25:49 修改

阅读量530

点赞数 1

分类专栏： ES6 -- 11 文章标签： javascript 前端开发语言 es6

于 2021-12-23 09:47:47 首次发布

本文链接：https://blog.csdn.net/qq_37974755/article/details/122099844

版权

ES6 -- 11 专栏收录该内容

17 篇文章 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>

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

一、箭头函数形式简洁：

如果没有参数，就直接写一个小括号即可
如果形参只有一个，则小括号可以省略；
如果函数体只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；
如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字

最常见的就是调用一个函数：let fn = () => void doesNotReturn();

二、箭头函数注意点：

1. 箭头函数没有自己的this：

其 this 继承自声明时所在作用域下 this 的值；

箭头函数继承来的this指向永远不会改变（call()、apply()、bind()等方法不能改变箭头函数中this的指向）

2. 箭头函数不能作为构造函数实例化，因为没有prototype；

3. 不能使用 arguments；

4. 箭头函数不能用作Generator函数，不能使用yeild关键字

代码演示及相关说明：

<!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>

练习：

<!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>