首页 > 编程语言 >【15.0】JavaScript之函数

【15.0】JavaScript之函数

时间：2024-02-27 10:01:10浏览次数：22  
标签：15.0 function console 函数 city JavaScript var log

【一】函数

  • 函数function，也叫做功能，方法 ，函数可以将一段代码封装起来，函数就具备了特定的功能

  • 函数的作用就是封装一段代码，将来可以重复使用

  • 在Python中定义函数需要用 def

  • 在JavaScript中定义函数需要用 function

【二】函数声明

【1】先声明再调用

  • 函数必须先声明，才能使用

【2】函数声明的语法

function 函数名 （参数） ｛代码体｝

function 函数名(形参,形参,形参，形参...){
    函数体代码
}
  • 函数声明的时候函数不会立即执行，只有调用的时候才会执行

【三】函数调用

  • 函数名加（）
  • 函数调用时，会立即执行，代码体里面的代码
  • 可以多次调用，每次调用是独立不相关的
  • 函数的执行跟定义位置无关，只与调用的位置有关

【1】无参函数

// 无参函数
function func1(){
    console.log("我是无参函数")
}

func1()

【2】有参函数

// 有参函数
function func2(a,b){
    console.log(a,b)
};

func2(1,2)

function func2(a,b){
    console.log(a,b)
};

func2(1,2)
// VM3577:2 1 2

func2(1,2,3,4,5,6,7)
// VM3577:2 1 2

func2(1)
//VM3577:2 1 undefined
  • 在js中传多了只拿对应的数据
  • 在js中传少了也不会报错

【四】函数的参数

【1】接口

  • 函数预留了一个接口，专门用于用户自定义内容，让函数的执行结果发生变化
  • 接口：指的就是函数的参数

【2】参数类型

  • 函数的阐述可以没有，可以是多个，多个参数 之间用逗号分隔
  • 函数的参数根据书写位置的不同，名称也不同

（1）形式参数

  • 是定义在函数参数体力的参数

（2）实际参数

  • 在函数调用的时候传入的参数

【3】小结

  • 实际参数跟形式参数会有一个参数传递的过程
  • 形参与实参的个数可以不一样

【五】函数的返回值

【1】返回值机制

  • 在JavaScript中，函数的主要作用之一就是处理和传递信息。
  • 函数内部通过return语句可以将计算结果或特定值返回给调用者。
function addNumbers(a, b) {
    return a + b;
}

let result = addNumbers(3, 5); // result 的值为 8，因为函数返回了 a + b 的计算结果
console.log(result);

【2】终止函数执行

  • return除了用于返回值外，还可以用来提前结束函数的执行流程。
  • 当return被执行后，函数会立即停止剩余的代码执行，并直接返回指定的值。
function stopExecution() {
    if (false) { // 假设某个条件不成立
        return; // 结束函数执行
    }
    console.log('This line will not be executed');
}
stopExecution(); // 不输出任何内容，函数直接结束

【3】默认返回值为 undefined

  • 如果函数没有显式地使用return语句给出一个值，那么它的默认返回值是undefined。
function emptyFunction() {} // 没有return语句
let returnedValue = emptyFunction();
console.log(returnedValue); // 输出：undefined

【4】函数返回值的应用

  • 函数的返回值不仅可以用作其他变量的赋值，还可以作为其他函数的参数。
  • 例如，在排序算法中，我们可以创建一个比较函数并将其作为Array.prototype.sort()方法的参数，利用其返回值来决定数组元素的排列顺序
function compareNumbers(a, b) {
    return a - b; // 返回a与b的差值，sort()会根据这个差值决定元素的顺序
}

const numbers = [5, 2, 9, 1, 5, 6];
numbers.sort(compareNumbers); // 排序后的数组：[1, 2, 5, 5, 6, 9]

【六】函数表达式

【1】概述

  • 函数表达式是函数定义的另一种形式，就是将函数的定义，匿名函数赋值给一个变量
  • 函数定义赋值给一个变量，相当于将函数的整体矮化成了一个表达式
  • 调用函数表达式方法是给变量名加（）执行，不能使用函数名（）执行
  • 通常函数表达式都会使用匿名函数

【2】示例

let multiplyByTwo = function(x) {
    return x * 2;
};

console.log(multiplyByTwo(4)); // 输出: 8
  • 当我们将上面的函数赋值给变量 multiplyByTwo 后
  • 我们可以通过该变量名 multiplyByTwo() 来调用这个匿名函数
  • 而不能直接使用 function(x) 这样的函数名来调用。

【七】函数的数据类型

【1】概述

  • 函数是一种数据类型Function
  • 由于函数是一种数据类型，可以参与其他程序
  • 可以把函数作为另一个函数的参数，也可以把函数作为返回值

【2】示例

  • 函数可以与其他数据类型一样进行赋值、比较和传递等操作
function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

let greet = sayHello; // greet 变量现在引用了 sayHello 函数
greet("Alice"); // 输出: Hello, Alice!

// 函数作为参数传递
function executeFunction(func, arg) {
    func(arg);
}

executeFunction(sayHello, "Bob"); // 输出: Hello, Bob!
  • 函数还可以作为其他函数的返回值，从而实现更高阶函数的功能。例如，一个工厂函数可以生成特定类型的函数
function createAdder(n) {
    return function(x) {
        return x + n;
    };
}

let addFive = createAdder(5);
console.log(addFive(3)); // 输出: 8

【八】arguments对象

【1】概述

  • js中arguments对象是一个特殊的对象，实际上是当前函数的一个内置属性
  • arguments对象会接收所有的实参
  • length属性可以获取参数的个数

【2】示例

function func3(a,b,c){
    console.log(arguments)
    console.log(a,b,c)
};

func3(1,2,3,4,5,6,7)

/*
VM3668:2 Arguments(7) [1, 2, 3, 4, 5, 6, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM3668:3 1 2 3
*/
  • 能够获取到函数接收到的所有参数

【3】用途

function func4(a,b,c){
    if (arguments.length > 3){
        console.log("传多了")
    }else if (arguments.length < 3){
        console.log("传少了")
    }else{
        console.log(a,b,c)
    }
};

【4】扩展

function sum(...args) {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出: 15
  • 在这个例子中，arguments 就是一个包含了所有传入参数的数组-like 对象，其 length 属性表示参数的实际数量。
  • 需要注意的是，虽然 arguments 在语法上看起来像一个数组，但它并不是真正的数组类型，因此不支持数组的所有方法。
  • 如果我们需要像数组那样操作参数，可以将其转换为真实的数组（如 Array.from(arguments) 或者使用扩展运算符 ...）。

【九】函数的递归

  • 函数的内部可以调用函数自己本身，这种做法称为递归
  • 函数递归需要考虑好结束递归的条件，不然会出现死递归导致程序崩溃，内存溢出
  • 递归一般是解决数学中的问题

【十】作用域

  • 变量起作用的范围
  • 函数内部是一个作用域
  • 作用域也可以用一对大括号包裹起来，在es6以前是没有块级作用域这个概念，在后续es6中补充
  • 变量退出作用域会自动销毁，全局变量只有关闭浏览器才会销毁

【十一】参数和函数的作用域

  • 函数的参数是局部变量，只能在函数内部使用
  • 函数内部的变量也是局部变量
  • 可以理解为函数体本身是一个独立的作用域

【十二】作用域链与遮蔽效应

【1】作用链

作用域链.drawio

【2】遮蔽效应

  • 程序在遇到一个变量时，使用时作用域查找顺序，不同层次的函数内都有可能定义相同名字的变量名，会优先从自己所在的层查找，如果没有查找到会依次往上找。
  • 整个过程中会发生内层变量遮蔽外层变量的效果叫做遮蔽效应

【3】补充

  • 例如： a=2 不写var声明会被转化成全局变量，可以理解为这个是个js的bug
  • 建议定义变量时必须使用声明关键字

【4】小结

  • 把变量的声明提升到最前面，只会提升声明，不会提升赋值
  • 把函数的生命提升到当前作用域的最前面，只会提升声明，不会提升调用
  • 先提升var，再提升function
  • 在预解析后，根据新的代码顺序，从上往下按照既定的规律执行

【十三】函数的全局变量与局部变量

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？

  • 输出结果是："ShenZhen"。

  • 在函数 inner 内部，变量 city 的值被赋为 "ShenZhen"

    • 因此 console.log(city) 会输出 "ShenZhen"。

  • 由于函数 inner 是在函数 f 中定义的，并且在函数 f 中调用了 inner

    • 所以同样的规则适用于函数 f。

  • 即使在函数 f 内部有一个与全局变量 city 同名的局部变量 city

    • 但在执行 console.log(city) 时，它将访问最内层的局部变量 city 的值
    • 也就是 "ShenZhen"。
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？

  • 在你提供的代码中，输出结果将是："BeiJing"。

  • 首先，全局变量 city 被赋值为 "BeiJing"。

  • 然后，在函数 f 内部定义了一个名为 city 的局部变量，将其值设置为 "ShangHai"。

  • 接下来，f 函数返回了函数 Bar 的引用。

  • 在执行 var ret = f() 后，ret 变量被赋值为 Bar 函数的引用

    • 即 ret 现在指向函数 Bar。

  • 最后，执行 ret()

    此时由于 ret 指向 Bar 函数

    • 所以会执行 Bar 函数，并打印当前作用域内的变量 city 的值，即输出 "BeiJing"。

  • 注意，这是因为 Bar 函数在执行时访问的是其定义时所处的作用域，即全局作用域，而非 f 函数内部的作用域。

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

  • 输出结果将是："ShangHai"。

  • 首先，全局变量 city 被赋值为 "BeiJing"。

    • 然后，在函数 f 内部定义了一个名为 city 的局部变量，将其值设置为 "ShangHai"。
    • 接下来，f 函数返回了函数 inner 的引用。

  • 在执行 var ret = f() 后，

    • ret 变量被赋值为 inner 函数的引用
    • 即 ret 现在指向函数 inner。

  • 最后，执行 ret()

    • 此时由于 ret 指向 inner 函数，所以会执行 inner 函数，并打印当前作用域内的变量 city 的值，即输出 "ShangHai"。

  • 注意，这是因为 inner 函数在执行时访问的是其定义时所处的作用域，即函数 f 内部的作用域。在该作用域中，变量 city 的值为 "ShangHai"。

【补充】匿名函数

【0】匿名函数介绍

  • 匿名函数，也称为无名函数或者lambda表达式，是一种没有名称的JavaScript函数定义形式。
  • 它们在编程中广泛用于一次性使用的简单计算、事件处理、高阶函数等场景，因为它们不需要被赋给特定变量或者作为对象的方法来使用。

【1】基本语法

（1）基本形式

function() { /* 函数体 */ }

（2）自动执行的匿名函数

(function() {
  console.log("This is an anonymous function.");
})();

（3）将匿名函数赋值给变量

var a = function() {
  console.log("Variable 'a' holds an anonymous function.");
}();

（4）通过立即调用表达式

  • IIFE, Immediately Invoked Function Expression
var b = (function() {
  console.log("Variable 'b' holds an immediately invoked anonymous function.");
})();

【2】特点与用途

  • 无名/临时作用域：由于匿名函数没有名字，它们的变量和参数只在其所在的作用域内有效，不会污染全局命名空间，适用于一些短暂或局部需求的场合。

  • 闭包：当匿名函数作为另一个函数的参数传递或返回时，它可以访问到外部函数的局部变量和参数，形成闭包。这对于实现数据封装、模块化编程以及实现私有变量等功能非常有用。

  • 简便的函数创建：在某些情况下，如高阶函数应用、事件处理器等，使用匿名函数可以避免额外的声明和赋值操作，使得代码更加简洁高效。

  • 立即执行：通过使用立即调用表达式(IIFE)，匿名函数可以在定义的同时就被执行，比如初始化数据、防止变量污染全局命名空间等场景。

【补充】箭头函数

【0】什么是箭头函数

  • 箭头函数（Arrow Function）是JavaScript ES6引入的一种新的函数定义语法，相比于传统函数表达式，它具有更简洁和易读的特点。

【1】基本语法

（1）单个参数

  • 箭头函数用于表示接受一个参数并直接返回该参数值的情况
// 使用 =>
var func1 = (v) => v;
// 或者等价的传统写法
var func1 = function(v) {
  return v;
};
  • 当只有一个参数时，可以省略括号(), 但为了代码可读性，推荐保留。

（2）多个参数

  • 如果需要处理多个参数，括号()不能省略，参数之间用逗号,分隔，返回值后面同样跟=>
// 处理两个参数
var func2 = (args1, args2) => args1 + args2;
// 或者等价的传统写法
var func2 = function(args1, args2) {
  return args1 + args2;
};

【2】特殊情况

（1）没有参数

  • 如果函数体为空或为 return 关键字后的表达式，可以省略花括号{} 和 return 关键字。

    // 没有参数，返回 undefined
var func3 = () => {};

// 没有参数，返回一个简单的值
var func4 = () => "Hello World";

（2）只有一条语句

  • 如果函数体只包含一条语句且不涉及复杂逻辑，可以将这条语句后的分号;去掉，并使用=代替return关键字，使表达式更加紧凑。

    // 返回数字10
var func5 = value => value * 10;

// 相当于
var func5 = value => value * 10; // 注意这里去掉了分号

（3）this绑定

  • 在箭头函数中，this的值是在创建函数的时候确定的，而不是在调用时动态绑定，通常指向定义函数的对象（即上下文环境）。
  • 这意味着，箭头函数不会像普通函数那样拥有的this值，这在处理事件回调、类方法等情况时需要注意区别。

标签：15.0,function,console,函数,city,JavaScript,var,log
From： https://www.cnblogs.com/dream-ze/p/18036249

相关文章

  • 【14.0】JavaScript之数组
    【一】什么是数组数组是一组有序的数据集合，数组内部可以存放多个数据，不限制数据类型，数组的长度可以动态调整数组类似于Python当中的列表【二】创建数组创建数据的最简单方式是通过字面量vararr=[]也可以通过数组对象去创建vararr=newArray()存放多个......
  • 【18.0】JavaScript之JS事件案例
    【一】开关灯示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.c1{height:400px;width:40......
  • 【17.0】JavaScript之DOM
    【一】什么是DOM/BOM文档对象模型（DocumentObjectModel,简称DOM）浏览器对象模型（BrowserObjectModel,简称BOM）是JavaScript与网页内容及浏览器环境进行交互的两种核心概念。【1】DOM（1）概述文档对象模型（DOM）是一个编程接口，它以树状结构来表示HTML或XML文档。在D......
  • ssts-hospital-web-master项目实战记录二十六：项目迁移-Hook函数（useDialog.ts）
    记录时间：2024-02-27【使用“文心一言”搜索】指令：Vue项目使用tssetup语法，实现页面遮幕弹框，封装Hook函数，包含ShowAlert、ShowConfirm、ShowPrompt、ShowMsg、ShowError、HideMsg、PageLoading、PageLoaded、MenuUnableUse 在Vue3项目中，结合CompositionAPI和TypeScript......
  • JavaScript 实现JSON 对象数组以某个属性进行分组处理
    JavaScript实现JSON对象数组以某个属性进行分组处理要在JavaScript中对JSON对象数组的某个属性进行分组处理，你可以使用一个对象来存储分组后的结果。下面是一个简单的示例，演示了如何对JSON对象数组中的某个属性进行分组处理：假设我们有一个JSON对象数组，每个对象都有ca......
  • ssts-hospital-web-master项目实战记录二十四：项目迁移-Hook函数（useCountdown）
    记录时间：2024-02-26 【使用“文心一言”搜索】指令：Vue项目使用tssetup语法，实现页面倒计时，封装Hook函数，包含start、reset、stop在Vue3中，你可以使用<scriptsetup>语法和CompositionAPI来封装一个倒计时Hook函数，该函数包含start、reset和stop等方法。下面是如何实现这个倒......
  • 【10.0】JavaScript之引入
    【一】JavaScript介绍【1】什么是jsjs也是一门编程语言，他可以写后端代码【2】什么是node.js前端由于非常受制于后端,所以有一些人异想天开想要通过js来编写后端代码一统江湖由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)但是并不能完美的实现【3】JavaScript......
  • Python numpy.full函数方法的使用
    ​ NumPy（NumericalPython的缩写）是一个开源的Python科学计算库。使用NumPy，就可以很自然地使用数组和矩阵。NumPy包含很多实用的数学函数，涵盖线性代数运算、傅里叶变换和随机数生成等功能。本文主要介绍一下NumPy中full方法的使用。参考文档：Pythonnumpy.full函数方法的使用-CJ......
  • Python|statistics 数学统计函数模块
    方法描述statistics.harmonic_mean()计算给定数据集的调和平均值。是总体内各个变量值倒数1/x的算术平均数的倒数。statistics.mean()计算数据集的平均值statistics.median()计算数据集的中位数statistics.median_grouped()计算给定分组数据集的分组中位数......
  • 掌握字符与字符串：C语言中的神奇函数解析(一）
    ✨✨欢迎大家来到贝蒂大讲堂✨✨......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99