JavaScript的函数基础

最新推荐文章于 2024-10-08 13:51:35 发布

yz_518 Nemo

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量1.1k

点赞数 18

分类专栏：关于前端学习文章标签： javascript 开发语言学习

本文链接：https://blog.csdn.net/yz_518/article/details/137508346

版权

关于前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

3.4块级作用域（let 和 const 关键字）:

前言:

在前面我们已经学习了关于JavaScript的流程控制语句的初始JavaScript的内容今天开始我们就将要开始学习一下关于JavaScript的函数基础,这些都是我个人在学习过程中的学习笔记或许会有所遗漏欢迎大家的指正和指点.

1.函数是什么:

函数（function）是一段可以重复使用的代码块，它执行一个特定的任务。在编程中，当我们发现有一段代码经常需要在多个地方重复使用，或者为了使代码更加模块化和易于管理，我们可以将这段代码封装成一个函数。

在JavaScript中，函数可以通过关键字function来定义。例如：

function greet(name) { 
console.log('Hello, ' + name + '!');
 }

在这个例子中，我们定义了一个名为greet的函数，它接受一个参数name，并在控制台上打印出一条问候消息。当我们需要向某人打招呼时，只需调用这个函数并传入相应的名字即可，例如：

function greet(name) { 
console.log('Hello, ' + name + '!'); 
}

JavaScript还提供了许多内置函数，如console.log()用于在控制台输出信息，alert()用于显示一个警告框等。这些内置函数为我们提供了丰富的功能，使我们能够更轻松地编写JavaScript代码。

总结来说，函数在编程中扮演着非常重要的角色，它们允许我们重用代码、提高代码的可读性和可维护性，并使我们的程序更加模块化和易于扩展。

2.函数的基本使用:

2.1 定义函数:

在JavaScript中，函数可以通过function关键字进行定义，后跟函数名和一对圆括号。函数体包含在大括号中，其中包含了函数应执行的代码。

function fun() {  
    alert('多喝热水');  
}

这个例子中，fun是函数的名称，而alert('多喝热水');是函数被调用时要执行的代码。

2.2. 调用函数

调用函数非常简单，只需使用函数名后跟一对圆括号即可。

fun(); // 调用函数，将显示一个警告框，内容为“多喝热水”

如果函数有返回值，可以通过输出语句或将其赋值给变量来使用这个返回值。

console.log(fun()); // 如果fun()有返回值，这里会打印出来  
  
let result = fun(); // 如果fun()有返回值，该值将被赋给result变量

函数没有明确的返回值，因此调用fun()时将返回undefined。如果想让函数返回一个值，可以这样做：

function getMessage() {  
    return '多喝热水';  
}  
  
console.log(getMessage()); // 输出：“多喝热水”

2.3函数命名规范:

2.3.1由数字、字母、下划线组成：

这意味着函数名可以包含这些字符，但不能包含空格、特殊字符或其他非法字符。

2.3.2区分大小写：

在JavaScript中，变量和函数名是区分大小写的。因此，Fun和fun是两个不同的函数名。

2.3.3不能数字开头，也不能是关键字：

函数名不能以数字开头，因为这可能会导致解析错误。同时，函数名也不能是JavaScript的保留关键字，如if、for、while等。

2.3.4自定义函数纯小写：

这是一种常见的编码约定，用于区分自定义函数和JavaScript内置的函数或对象方法。内置的函数或方法通常使用驼峰命名法（camelCase），而自定义函数则通常全部使用小写字母。

2.3.5见名知意：

函数名应尽可能地描述函数的功能或目的，这样其他开发者在阅读代码时能够更容易地理解函数的用途。例如，一个用于计算平均值的函数可以命名为calculateAverage。

2.4返回值（`return`）的应用:

在JavaScript函数中，return语句用于指定函数返回的值。当函数被调用时，会执行函数体内的代码，直到遇到return语句，此时函数会立即停止执行，并返回指定的值。

function add(a, b) {  
    let sum = a + b;  
    return sum; // 返回a和b的和  
}  
  
let result = add(5, 3); // 调用函数，并将返回值存储在result变量中  
console.log(result); // 输出：8

2.4.1函数、函数代码和函数返回值:

2.4.1.1函数：

代表了一个可以被调用的代码块，它执行一个特定的任务。

2.4.1.2函数代码：

是执行任务的具体过程，描述了如何完成这个任务。

2.4.1.3函数返回值：

是函数执行后产生的结果，可以通过return语句来指定。

2.4.2函数内的数据和返回值:

如果函数内的数据仅通过输出语句（如console.log）打印出来，那么这些数据只能被查看，但不能被函数外部的代码所使用。

如果使用return语句返回数据，则这些数据可以被其他函数或变量所使用，因为它们成为了函数的返回值。

2.4.3默认返回值:

如果在函数中没有明确设置return语句，或者return后面没有跟任何值，那么函数的返回值默认为undefined。

例如:

function noReturn() {  
    // 没有return语句  
}  
  
let value = noReturn(); // value将是undefined，因为没有返回值  
console.log(value); // 输出：undefined

2.5函数参数的使用:

2.5.1函数参数:

适当的使用函数参数可以使得里面的数据更加灵活因为里面的数据不是固定的而是可以随时改变的。

2.5.1.1形参（形式参数）：

在函数定义时声明的参数，它们没有具体的值，只是占位符。当函数被调用时，形参会接收传入的实参值。

2.5.1.2实参（实际参数）：

在函数调用时传递给函数的实际值，这些值会替换形参并执行函数。

2.5.2必备参数:

对于必备参数，函数在定义时指定了需要传递的参数数量和类型。在调用函数时，必须提供与形参数量相匹配的实参，否则函数可能无法正常工作或产生错误。

function fun2(name, age) {  
    console.log(`你好，我叫${name}，我今年${age}岁`);  
}  
fun2('麒麟', 28); // 正确调用，提供了两个必备参数

如果调用fun2时只提供了一个参数，那么第二个参数age将会是undefined，除非在函数内部有相应的处理逻辑。

2.5.3默认参数:

默认参数允许在函数定义时为形参设置默认值。当函数调用时没有提供该形参的实参时，将使用这个默认值。这可以使函数调用更加灵活，并减少因缺少参数而导致的错误。

例如：

function fun3(name, age = 18) {  
    console.log(`你好，我叫${name}，我今年${age}岁`);  
}  
fun3('玫玫'); // 正确调用，只提供了一个参数，age使用默认值18

在这个例子中，如果调用fun3时没有提供age参数，那么age将默认为18。需要注意的是，如果有多个默认参数，它们只能从右到左赋值，也就是说，默认参数必须位于参数列表的末尾。

2.6匿名函数的使用:

匿名函数（也称为自执行函数或立即执行函数表达式，IIFE - Immediately Invoked Function Expression）在JavaScript中常常用于创建一个独立的作用域，以避免变量污染全局命名空间。这种函数定义后立即执行，且只执行一次。

2.6.1匿名函数的特点：

2.6.1.1只执行一次：

匿名函数在定义后会立即执行，而且只执行一次。

2.6.1.2自动执行：

无需外部调用，定义后即自动运行。

2.6.1.3独立作用域：

匿名函数内部声明的变量不会泄漏到全局作用域，有助于防止全局命名空间的污染。

2.6.2语法和用法：

通常，匿名函数采用以下形式：

!(function(参数) {  
    // 函数代码  
})(实参);

这里的!或括号()的作用是将函数声明转变为函数表达式，从而能够立即执行。在JavaScript中，函数声明和函数表达式是不同的。函数声明不能立即执行，而函数表达式可以。通过在匿名函数前面加上!、+、-、~等一元操作符，或者将匿名函数包裹在括号内，都可以将其转变为函数表达式。

示例：

下面是一个简单的匿名函数示例：

!(function(greeting) { 
console.log(greeting + ', this is an immediately-invoked function expression!'); 
})
('Hello');

注意点：

匿名函数通常用于封装代码块，以避免全局变量的污染。
匿名函数可以接收参数，并在其内部使用这些参数。
匿名函数内部的变量不会泄露到全局作用域中。
在实际开发中，匿名函数常用于插件开发、模块化代码等场景。

3.拓展知识:

3.1作用域:

在JavaScript中，作用域指的是一个变量或数据的可访问范围。理解作用域是编写可靠和可维护代码的关键部分。let和var的关键字确实与作用域紧密相关，它们在声明变量时具有不同的作用域行为

3.2全局作用域:

全局作用域中的变量在整个代码中都是可见的。在浏览器环境中，全局作用域通常是window对象。

var globalVar = 'I am global'; // 声明在全局作用域

3.3局部作用域（函数作用域）

在函数内部声明的变量具有局部作用域，它们只能在该函数内部被访问。

function myFunction() {  
  var localVar = 'I am local'; // 声明在局部（函数）作用域  
}

3.4块级作用域（`let` 和 `const` 关键字）:

let 和 const 关键字在ES6中被引入，它们提供了块级作用域，这意味着它们声明的变量只在声明它们的代码块（{} 内）中可见。

if (true) {  
  let blockScopedVar = 'I am block-scoped'; // 声明在块级作用域  
  console.log(blockScopedVar); // 可以访问  
}  
console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

`3.5let` 与 `var` 的主要区别:

3.5.1作用域：

var 具有函数作用域，而 let（和 const）具有块级作用域。

3.5.2重声明：

在同一个作用域内，var 允许你重新声明同一个变量，而 let 不允许这样做。

3.5.3提升：

var 声明的变量会发生变量提升（hoisting），意味着变量可以在声明之前被使用（但值为 undefined）。而 let 声明的变量虽然也存在提升，但是在声明之前的访问会导致一个错误（暂时性死区）。

// var 的作用域和重声明示例  
function varExample() {  
  if (true) {  
    var x = 10;  
    console.log(x); // 输出 10  
  }  
  console.log(x); // 输出 10，因为 var 具有函数作用域  
  var x = 20; // 可以重新声明  
  console.log(x); // 输出 20  
}  
  
// let 的作用域和重声明示例  
function letExample() {  
  if (true) {  
    let y = 10;  
    console.log(y); // 输出 10  
  }  
  console.log(y); // ReferenceError: y is not defined，因为 let 具有块级作用域  
  let y = 20; // SyntaxError: Identifier 'y' has already been declared，不能重新声明  
}

结语:

好了,关于今天的函数学习我们就先学习到这里了,总的来说，JavaScript的函数是编程中不可或缺的一部分，它们通过封装、重用、模块化和提高可读性等方式，使得代码更加高效、可维护和易于理解。今天先简单的介绍了一下关于函数的知识,这些其实都只是我个人的一些学习的笔记和总结,难免会有所遗漏,所以欢迎各位在评论区留言,也欢迎大家指正我的文章,同时也希望大家多多支持一下小编。