function 函数

news2025/1/27 12:08:22

一、函数的基本注意事项

function函数名字也是一个标识符,通过关键字function申明一个函数

function 函数名(){ 代码块 }

二、函数基本用法

1、形参与实参

1、形参与实参可以有无数个,实参按照顺序赋值给形参;

2、实参个数不一定要与实参个数相同,没有实参赋值形参默认数值为undefined

3、arguments能够获取到实参列表的数据,也能够更改数据;

4、形参数据类型是由实参的数据类型决定;

<script>
        function func(x,y){
            console.log(arguments) //调用函数传进来的实参列表
            arguments[0]='啊这'
            console.log(arguments[0])
            console.log("我是"+x+",我今年"+y+"岁")
        }
        func('学生',18)
        func('老师',30) 
        func('小张')
        func('小李',19,23222) //23222被忽略
</script>

2、不定参数实现重载的功能

可以使用arguments.length获取实参列表的参数个数

<script>
        function nums(){
            switch(arguments.length){
                case 1:
                    console.log(arguments[0])
                    break
                case 2:
                    console.log(arguments[0]+arguments[1])
                    break
                case 3:
                    console.log(arguments[2]-arguments[1]-arguments[0])
            }
        }
        nums(1)
        nums(1,2)
        nums(1,2,10)
</script>

3、函数的返回值

函数可以写多个return,但是只有一个return可以执行;

函数可以作为参数使用

<script>
        function func(num1,num2){
            return (num1+num2);
        }
        var result = func(func(10,20),30); //函数作为参数,结果为60
        console.log(result)
</script>

4、函数的申明与函数表达式

函数申明

函数申明一定是有名函数

<script>
        function func(a,b){
            return a;
        }
</script>

函数申明中的函数提升

<script>
        console.log(sum(10,10)) //20

        function sum(a,b){ //函数提升到前面申明
            return (a+b)
        }
</script>

function虽然写在后面,但是会先在前面进行申明,所以代码正常运行,输出20

函数表达式

函数表达式大部分是匿名函数,也可以写成有名函数

<script>
        var num1 = function func(){
            console.log("有名函数")
        } 
        var num2 = function(){
            console.log("匿名函数")
        }
</script>

有名函数表达式名字(func)只能在函数中使用,不能在函数外使用; 

函数表达式中的函数提升

<script>
        console.log(sum(10,10)) //20

        var func = function sum(a,b){ //var func;提升在前面定义,但是函数还是在后面才申明
            return (a+b)
        }
</script>

使用函数表达式的方式会报错,因为提升的是变量的提升,函数仍然是在后面才赋值变量func

三、函数进阶用法

1、IIFE 即时调用函数表达式

本质就是将函数转换为表达式,大多使用匿名函数

可以使用括号()将函数转换为表达式,实现在定义的时候直接调用它;除了括号,还可以使用+、-、~、!等其他符号实现即时调用的功能;

<script>
        //方法一
        (function (a,b){
            console.log(a+b);
        })(10,20);

        //方法二
        (function (a,b){
            console.log(a+b);
        }(10,20))

        //方法三
        + function (a,b){
            console.log(a+b);
        }(10,20);

        //方法四
        - function (a,b){
            console.log(a+b);
        }(10,20);

        //方法五
        ~ function (a,b){
            console.log(a+b);
        }(10,20);

        //方法六
        ! function (a,b){
            console.log(a+b);
        }(10,20);
</script>

IIFE的作用:封闭一个独立的作用域

2、函数作用域

作用域:变量有效作用的范围;

全局作用域

所有在script标签中的代码都处在全局作用域中,在页面开启时创建全局对象GO(Global Object),在页面关闭时销毁GO对象,全局作用域的变量是GO对象的属性名变量的值是GO的属性值

函数作用域:

编写在函数中的代码都处在函数作用域中,函数执行时创建AO(Active Object)对象,函数执行结束时销毁AO对象,函数作用域中的变量AO对象的属性变量的值AO对象属性的值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407734.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

web前端面试高频考点——Vue原理(理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM)

系列文章目录 内容参考链接Vue基本使用Vue的基本使用&#xff08;一文掌握Vue最基础的知识点&#xff09;Vue通信和高级特性Vue组件间的通信及高级特性&#xff08;多种组件间的通信、自定义v-model、nextTick、插槽&#xff09;Vue高级特性Vue的高级特性&#xff08;动态组件…

axios发post请求,后端接收不到参数的原因及解决

做分页数据时&#xff0c;使用vue3 axios发post请求&#xff0c;后端服务调用成功但数据没有根据参数动态变化&#xff0c;换为js ajax也是同样错误。 后来是后端没有接收到参数。 网上看了资料&#xff0c;原因&#xff1a; 使⽤axios请求数据时&#xff0c;我们的 …

Module Federation在vue3中使用vue2的组件

前言&#xff1a; 备注&#xff1a;本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本&#xff0c;如Vue2的组件时在Vue2中使用&#xff0c;但我为什么会在Vue3项目中去使用Vue2的组件呢&#xff0c;其实是因为历史原因。好…

点击《el-table》让选中的行变色,亲测实用

前期回顾 Vue项目实战 —— 哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩 项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2&#xff0c;技术栈有axios、Vh等&#xff0c;下班过来敲哈哈https://blog.csdn.net/m0_5790…

vite+vue3+ts 手把手教你创建一个vue3项目

使用vite 创建一个vue3项目&#xff0c;基本全程cv。 安装router&#xff0c;less / scss&#xff0c;pinia&#xff0c;axios&#xff0c; element / Ant Design Vue&#xff0c;Echarts 以及如何配置别名&#xff0c;自定义组件&#xff0c;vue-devtools插件。 目录 1、创建…

vue设置cookie和路由守卫

vue项目中登录页面用户登录成功后&#xff0c;会把用户信息存储到cookie中&#xff0c;然后跳转进入首页&#xff0c;当用户没有登录时&#xff0c;直接输入页面地址会经过路由守卫检测cookie中是否存在用户信息&#xff0c;如果不存在&#xff0c;重定向到登录页让用户进行登录…

使用idea运行VUE项目

1.电脑先安装好node.js并配置好环境变量&#xff0c; 安装方法参考windows mac 2.使用管理员身份运行idea&#xff0c;把项目拉取下来&#xff0c; 并给idea安装vue的插件 安装方法参考链接 3.删除“node_modules”文件夹和“package-lock.json” 将项目里的“node_modules”…

简单的Java web项目代码(8个)

引言&#xff1a;Java web项目主要采用mvc的的设计思想&#xff0c;系统主要采用javajspservletmysqleclipse实现&#xff0c;具有登陆、分页、导出excel&#xff0c;增删改查等功能,适合初学者&#xff0c;满足基本的实训需求&#xff0c;以下是推荐的几款&#xff0c;总有适合…

uniapp及uniCloud开发中经常会出现的问题汇总

一、manifest.json内未配置Appld,请重新获取后再 uniCloud本地调试服务启动失败&#xff0c;错误信息为:manifest.json内未配置Appld,请重新获取后再试 新建uniapp项目会出现以下报错&#xff0c;说明还没有创建APPID。 解决办法&#xff1a; 打开DCloud开发者中心&#xff…

Vite基础配置之 - 分包

Vite基础配置之 - 分包 什么是分包呢&#xff1f;它有什么好处呢&#xff1f; 还是举个例子&#xff0c;来回忆一下吧&#xff0c;什么呢&#xff1f; 比如说&#xff0c;我使用了 loadsh.js 的东西&#xff0c;那么我们在打包的时候&#xff0c;就会把 loadsh 相关资源也会打…

AJAX跨域问题及解决方案

文章目录跨域哪些方式可以进行跨域部署服务器部署模块ajax1ajax2测试跨域解决方案方案1&#xff1a;设置响应头方案2&#xff1a;jsonp深入一下jsonp方案3&#xff1a;代理机制&#xff08;httpclient&#xff09;第一种方案&#xff1a;使用JDK内置的API第二种方案&#xff1a…

Vite 打包性能优化

Vite 打包性能优化开始一个 Vite ts 项目分包策略gzip 压缩cdn 加速开始一个 Vite ts 项目 这里我们开始了一个 Vite ts 的项目&#xff0c;其中关于 ts 的配置直接看内容注释即可 npm init -y npm i vite -D npm vite-plugin-checker -D #用来强制提示ts报错<!-- inde…

反射时竟然NoSuchMethodException了!看这篇超详细的解决方案吧

前几天九哥在讲Servlet时&#xff0c;为了灵活地使用同一个Servlet来处理对同一张表的业务操作请求&#xff0c;我给学生讲解了BaseServlet工具类的封装&#xff0c;基本实现思路有如下几个步骤。 一. 反射封装BaseServlet工具类 使用反射封装BaseServlet工具类&#xff0c;无…

uview常用组件案例操作及详解(一) 选择器 picker

uview常用组件案例操作及详解&#xff08;一&#xff09; 选择器 picker 1.图片示例 2.使用方法 *为简便代码不提供样式 <view><view><text>行业性质</text><text>*</text></view><view><text v-if"!text.industry…

echarts中的legend属性

legend: {orient: "vertical",right: "0%",top: "15%",icon: "circle", //小圆点itemWidth: 8,itemHeight: 8,itemGap: 15, //间隔formatter: function (params) {let tip1 "";let tip "";let le params.leng…

【uni-app】swiper的使用

最近在学习小程序的开发&#xff0c;其中有用到swiper&#xff0c;在这里记录一下我的学习历程 有一些人&#xff0c;他刚开始并不会开发小程序&#xff0c;但是在任务面前&#xff0c;没有什么是不可以学的… 刚开始接触到swiper的时候&#xff0c;是在uni-app的官方文档里&am…

Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节

文章目录Pinia状态管理Pinia和Vuex的对比Pinia基本使用&#x1f364;创建Pinia&#x1f364;创建StorePinia核心概念State&#x1f35f;state基本使用&#x1f35f;state其他操作Pinia核心Getters&#x1f355;getters基本使用&#x1f355;getters其他操作Pinia核心Actions&am…

React -- useState 的使用及注意事项

一、基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数&#xff0c;基本语法如下&#xff1a; const [count, setCount] useState(initialCount)它返回一个状态和一个修改状态的方法&#xff0c;状态需要通过这个方法来进行修改&#xff1b;initialCount 是我…

Vue3+Vite实现动态路由

项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import {createRouter,createWebHashHistory } from "vue-router";import store from ../store/index.jsconst routes [{path: "/login",component: () …

jsjiami.com V6版本,js解密的方法。

我们在爬内容&#xff0c;抓取页面的时候&#xff0c;总会遇到sojson v5&#xff0c;jsjiami.com的v6加密。 jsjiami v6 &#xff1a; JS加密,JS不可逆加密,JS混淆,JS混淆加密,JS压缩加密 - [JavaScript加密] 我看了下这个js完全有效。废话不多说。直接上代码。 (function (…