ES6/ES11知识点 续二

箭头函数

在 ES6 中,箭头函数(Arrow Functions) 是 JavaScript 的一种新语法,它使得定义函数变得更加简洁且易读。箭头函数不仅在语法上更紧凑,还有一些重要的行为区别,尤其是在 this 的绑定上。下面我们将详细介绍箭头函数的特性。

箭头函数的基本语法

箭头函数的语法使用箭头 => 来分隔参数和函数体,常见的格式如下:

javascript 复制代码
const add = (a, b) => a + b;

示例:这是一个简单的箭头函数,接受两个参数 a 和 b,并返回它们的和。

如果函数体只有一行表达式,可以省略大括号 {} 和 return 关键字,如上所示。如果有多行代码,则需要使用大括号并明确使用 return:

javascript 复制代码
const add = (a, b) => {
    return a + b;
};

箭头函数的特点

简洁的语法

箭头函数让函数的定义变得非常简洁。特别是在传递回调函数时,它比传统的函数表达式更简洁清晰。

  • 省略小括号
javascript 复制代码
let add = n=>{
	return n+n;
}
  • 省略花括号
    当代码体中只有一条语句的时候,可以省略花括号,此时return 必须省略,而且语句的执行结果就是函数返回值
javascript 复制代码
let add= n => n+n;
console.log(add(5))

不绑定 this

传统的函数会根据调用的上下文来绑定 this,而箭头函数不会自己创建 this,它会继承外部作用域的 this。

javascript 复制代码
function Counter() {
    this.num = 0;
    setInterval(function() {
        this.num++; // 这里的 this 指向全局对象,导致错误
        console.log(this.num);
    }, 1000);
}

const counter = new Counter();

在上述代码中,this 会指向全局对象(在浏览器中是 window),导致 this.num++ 无法正确工作。

使用箭头函数改正:

javascript 复制代码
function Counter() {
    this.num = 0;
    setInterval(() => {
        this.num++; // 箭头函数继承外部的 this,指向 Counter 实例
        console.log(this.num);
    }, 1000);
}

const counter = new Counter();

在这个例子中,箭头函数继承了外部 Counter 函数中的 this,因此能够正确访问和修改 this.num。

无法作为构造函数

箭头函数不能用作构造函数,因为它没有自己的 this,也就无法在实例化时正确绑定 this。

示例:

javascript 复制代码
const Person = (name) => {
    this.name = name;
};

const p = new Person("Alice"); // 会抛出错误

上述代码会抛出错误,因为箭头函数没有构造函数的能力。

没有 arguments 对象

箭头函数没有自己的 arguments 对象。如果需要访问函数的参数,可以使用剩余参数(Rest Parameters)。

传统函数:

javascript 复制代码
function example() {
    console.log(arguments);
}
example(1, 2, 3);

箭头函数:

javascript 复制代码
const example = () => {
    console.log(arguments); // ReferenceError: arguments is not defined
};

如果需要使用类似 arguments 的功能,可以使用剩余参数:

javascript 复制代码
const example = (...args) => {
    console.log(args);
};
example(1, 2, 3); // 输出 [1, 2, 3]

箭头函数与传统函数的比较

特性 箭头函数 传统函数
this 绑定 继承外部作用域的 this 根据调用方式决定 this 的值
是否可以作为构造函数 不能作为构造函数 可以作为构造函数
arguments 对象 不提供 arguments 对象 提供 arguments 对象
new 关键字支持 不支持 支持

使用场景

箭头函数适合于this无关的回调,定时器、数组的方法回调

结论

箭头函数是 JavaScript 中非常有用的语法糖,它可以使函数定义更加简洁,尤其在使用回调函数和处理 this 时非常方便。然而,它也有一些限制,例如不能作为构造函数和没有 arguments 对象,因此在某些情况下仍然需要使用传统的函数表达式。

函数参数的默认值设置

在 ES6 中,函数的参数可以为其设置默认值。如果调用函数时没有传递相应的参数,或者传递 undefined,则会使用默认值。这可以帮助简化代码,避免检查 undefined 的情况。接下来,我们将详细介绍如何设置函数参数的默认值。

函数参数的默认值语法

函数参数的默认值通过 = 运算符来设置。例如:

javascript 复制代码
function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet();          // 输出:Hello, Guest!
greet("Alice");   // 输出:Hello, Alice!

在上面的代码中,name 参数有一个默认值 "Guest"。如果调用 greet() 时没有传入 name,则会使用 "Guest" 作为默认值;如果传入了 "Alice",则使用 "Alice"。

默认值与 undefined 的区别

如果函数调用时显式传递了 undefined 作为参数,默认值仍然会生效。因为在 JavaScript 中,undefined 会被视为"缺失的值",所以它会触发默认值的应用。

javascript 复制代码
function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet(undefined); // 输出:Hello, Guest!

但是,如果传递了 null,默认值就不会生效,因为 null 是一个有效的值,不会被视为"缺失的值"。

javascript 复制代码
function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet(null);  // 输出:Hello, null!

默认值可以是表达式

默认值不仅可以是简单的常量,还可以是更复杂的表达式。例如,可以使用函数调用、运算或其他变量作为默认值。

javascript 复制代码
function add(a, b = a + 1) {
    return a + b;
}

console.log(add(5));    // 输出:11
console.log(add(5, 3)); // 输出:8

在这个例子中,b 的默认值是 a + 1,所以如果没有传递 b,则会使用 a + 1 作为默认值。

默认值与剩余参数(Rest Parameters)一起使用

默认值与剩余参数(Rest Parameters)结合使用时,可以为函数的多个参数设置默认值。

javascript 复制代码
function displayInfo(name = "Anonymous", ...hobbies) {
    console.log(`Name: ${name}`);
    console.log(`Hobbies: ${hobbies.join(", ")}`);
}

displayInfo("Alice", "Reading", "Hiking"); // 输出:Name: Alice Hobbies: Reading, Hiking
displayInfo(undefined, "Cooking", "Dancing"); // 输出:Name: Anonymous Hobbies: Cooking, Dancing

在这个例子中,name 参数有默认值 Anonymous,而剩余参数 ...hobbies 可以捕获所有额外传入的参数。

结论

ES6 的函数参数默认值功能非常强大,能够让你在函数参数缺失时提供合理的默认行为,减少了很多代码中的条件检查。无论是简单的常量,还是复杂的表达式,默认值都能够灵活应用,为你的代码带来更多便利。

相关推荐
梦想与想象-广州大智汇26 分钟前
普通 html 项目引入 tailwindcss
前端·html·tailwindcss
lh_12543 小时前
前端 uni-app 初步使用指南
前端·arcgis·uni-app
患得患失9493 小时前
【前端】【面试】在 Nuxt.js SSR/SSG 应用开发的 SEO 优化方面,你采取了哪些具体措施来提高页面在搜索引擎中的排名?
前端·javascript·搜索引擎
ejinxian4 小时前
npm,yarn,pnpm,cnpm,nvm,npx包管理器常用命令
前端·npm·pnpm·yarn·nvm·npx
爱编程的鱼4 小时前
C# 运算符重载深度解析:从基础到高阶实践
前端·算法·c#
大道归简5 小时前
自动化实现web端Google SignUp——selenium
前端·selenium·自动化
普通young man6 小时前
QT | 常用控件
开发语言·前端·qt
想不明白的过度思考者7 小时前
为了结合后端而学习前端的学习日志——【黑洞光标特效】
前端·学习
twodragon&primy7 小时前
CSS布局
开发语言·前端·css·算法·html5