JavaScript 基础(二):函数

简介: 在本文中,将专注于在 JavaScript 中定义自己的自定义函数,介绍函数的定义方式、声明、作用域及参数定义。

在本文中,将专注于在 JavaScript 中定义自己的自定义函数,介绍函数的定义方式、声明、作用域及参数定义。

函数定义

一个函数可以看作是包裹在一个变量中的一段代码,它允许一遍又一遍地重用调用那段代码。在本文中,将讨论在 JavaScript 中定义函数的三种不同方式。

第一种方法是将函数定义为值,并将该值赋值给一个变量(就像《JavaScript 基础(一):语法和程序结构》中定义变量的方式一样),而这个变量就成为了一个函数类型。

const square = function (x) {
    return x * x;
};

该函数是使用关键字 function 创建的,它将接受一个参数 x 作为输入。函数还应该有一个主体,可以在其中使用关键字 return 返回输出,或者具有某种副作用。

最后,作为值的函数将被赋值给变量 square,需要使用它来执行/调用此函数,例如:

console.log(square(2));

另外,请记住末尾的英文分号 ; 建议必须输入,如果怕忘记,可以交给代码编辑器自动完成。

一个函数可以有多个参数或根本没有参数,如下:

let sleep = function () {
    console.log(" 3 秒过去了……");
};
var multiply3 = function (x, y, z) {
    return x * y * z;
};

第二种方法稍微简单一些,同样通过使用 function 关键字声明一个函数,并且它不需要在函数末尾使用英文分号;

function square(x) {
    return x * x;
}

此种定义方式允许调用在前(上面第一种方式不可以),定义在后,如下:

console.log(square(2));
function square(x) {
    return x * x;
}

在这里,将函数声明放在调用它们的语句之后,代码仍然有效。这样可以在代码组织的时候将所有的函数放在一块或者一个文件中,对于代码维护来说比较友好。

如果函数只有一个参数,则可以省略参数列表周围的括号(但为了代码的统一性不建议这么做)。而如果函数体中只有一条语句,大括号和 return 关键字也可以省略。

const square = (x) => x * x;

声明和作用域

在深入探讨函数的主题之前,回顾一下函数定义的第一种方法。可能已经注意到,在示例中使用不同的关键字 letconstvar 定义了函数。它们的区别究竟是什么?本文就不细说了,如有兴趣了解可以参阅《细说 javascript 中变量声明 var、let、const 的区别》。

总的来说,letconst 字面上的意思,const 代表常量,意味着一旦使用 const 声明绑定,就无法更改其值(当然数组和对象是有所区别),let 声明的绑定后续是可以改变的。

可选参数

JavaScript 在传递给函数的参数数量方面非常松散,例如,有之前定义的 square() 函数,理论上它应该只接受一个参数。但实际上,看下面代码:

function square(x) {
    return x * x;
}
console.log(square(2, true, "test"));

在调用的时候多传入参数并不会出现什么错误与异常,函数会忽略了额外的参数并计算第一个参数的平方。如果传递的参数太少,那些丢失的参数将被赋值为 undefined 而不是错误。

当然,这样做的缺点是,很容易出现错误。所以,即使它在程序上有效,也不应该依赖它,这可能会给程序带来一些意想不到的结果。因此建议在编写代码的时候还是按照严格的方式,这些现在都可以借助工具来自动检查或者完成。

REST参数

但是,如果不知道需要多少参数怎么办?例如,需要设计一个函数来查找一系列数字中的最大数字,但不知道该系列中有多少个数字,因此需要设计一个接受任意数量参数的函数。有两种方式可以实现,一个是REST参数,一个是 arguments 对象。

REST参数就是在参数面前输入三个点,如下:

function max(...numbers) {
    let result = -Infinity;
    for (const number of numbers) {
        if (number > result) {
            result = number;
        }
    }
    return result;
}
const result = max(1, 2, 3, 4, 5, 6, 7);
console.log(result); // 7

在函数中执行 console.log(typeof numbers) ,输出为 object 。REST参数适用于 ES6 中的箭头函数。

而使用 arguments 对象,在函数定义的时候无需定义变量,如下:

function max() {
    let result = -Infinity;
    const numbers = [...arguments];
    for (const number of numbers) {
        if (number > result) {
            result = number;
        }
    }
    return result;
}
const result = max(1, 2, 3, 4, 5, 6, 7);
console.log(result); // 7

在函数中执行 console.log(typeof arguments) ,输出同样为 object 。对象 arguments  是所有函数中可用的局部变量,可以使用 arguments 对象在函数中引用函数的参数。该对象包含传递给函数的每个参数的条目,这将帮助了解这些参数的数量并使用 arguments 对象访问它们。

对象 arguments 不适用于 ES6 中的箭头函数。


相关文章
|
3天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
13 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
16天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
18天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
27天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
24 4
|
2月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
26天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
15 2
|
29天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
28天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
19 3
|
1月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
17 3