JavaScript的函数解析(一)

简介: JavaScript的函数今天和大家说一下js中一个比较重要的内容,函数。 JavaScript 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 JavaScript 函数是被设计为执行特定任务的代码块。 JavaScript 函数会在某代码调用它时被执行。 JavaScript 函数由 function 声明。 JavaScript 函数声明后需要被调用才会执行。1.无参函数 // 声明函数 function func1(){ console.log("这是一个无参函数"); }

JavaScript的函数




今天和大家说一下js中一个比较重要的内容,函数。


   JavaScript 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。


   JavaScript 函数是被设计为执行特定任务的代码块。


   JavaScript 函数会在某代码调用它时被执行。


   JavaScript 函数由 function 声明。


   JavaScript 函数声明后需要被调用才会执行。


1.无参函数


 

// 声明函数functionfunc1(){
console.log("这是一个无参函数");
    }
// 调用函数   方法名+()func1();
// 被事件驱动document.getElementById("btn").onclick=func1;

注意:函数声明后,被调用才能执行,一种是直接调用,另一种是被事件驱动。


2.传参函数


// 声明函数functionfunc2(x){//相当于声明变量为xconsole.log(x);
    }
// 调用函数func2(1);//给变量x赋值为 1func2("hello");//给变量x赋值为 "hello"func2([1,2,3,4,5]);//给变量x赋值为 [1,2,3,4,5]functionfunc3(x,y){
console.log(x%y);//数据类型的强制转换    }
func3("1","2");

注意:在调用函数时,可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数,由逗号 (,) 分隔。


上面的内容将js函数按照有无参数进行分类,会分为无参函数和传参函数。接下来,我们可以按照js是否命名分为明明函数和匿名函数。


3.命名函数


// function 关键字声明函数// 1.命名函数    functionfunc1(){
// 执行代码console.log("命名函数");
    }
// 命名函数可以多次重复调用func1();
func1();
func1();

4.匿名函数

// 2.匿名函数   // 使用事件驱动 匿名函数window.onclick=function(){
// 执行代码console.log("匿名函数");
    }
// 3.使用变量储存匿名函数varfunc2=function(){
// 执行代码console.log("变量储存匿名函数");
    }
// 这时可以像调用命名函数一样调用func2();
func2();
// 4.匿名函数传参varfunc3=function(x,y,z){
console.log(x+y+z);
    }
func3();//NaN   数字类型   not a number  console.log(typeofNaN);
func3(1,2,3);//6func3("1",2,3);//123    "1"+2+3 

注意:匿名函数传参,只有当匿名函数使用变量储存时才可以传参。

 

5.自执行函数


 

// 4.自执行函数   匿名函数    (function(){
// 执行代码consloe.log("自执行函数1");
    }())
// 另一种形式    (function(){
// 执行代码consloe.log("自执行函数1");
    })()

自执行函数也是你匿名函数,只是函数在创建的同时就已经执行了。同时要知道,在 function 前面包着的()代表制操作符,只有有了操作符,浏览器在解析时才不会报错。


6.带返回值的参数


   有时,我们会希望函数将值返回调用它的地方。

   通过使用 return 语句就可以实现。

   在使用 return 语句时,函数会停止执行,并返回指定的值。



functionfunc1(x,y){
returnx+y    }
varres=func1(1,2);
console.log(res);//3functionfunc2(){
varm=10;
returnm;
    }
console.log(func2());//10// return会使函数停止执行functionfunc3(){
console.log(1);
return;
console.log(2);//本行代码不执行    }
func3();//1


视频讲解链接:
1.https://www.bilibili.com/video/BV1J54y1D753/

相关文章
|
23天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
23天前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
11 0
|
23天前
|
JavaScript
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
写一个函数将N组<>(包含开始和结束),进行组合,并输出组合结果 (js)
9 0
|
3天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停/恢复功能的特殊函数,利用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。例如,一个简单的Generator函数可以这样表示: ```javascript function* generator() { yield 'Hello'; yield 'World'; } ``` 创建实例后,通过`.next()`逐次输出"Hello"和"World",展示其暂停和恢复的特性。
13 0
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
4天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
9天前
|
缓存 JavaScript 前端开发
js的入口函数,入口函数的作用
js的入口函数,入口函数的作用
15 4
|
25天前
|
存储 前端开发 JavaScript
JavaScript如何封装一些常见的函数来提高工作效率
通过封装这些常见函数,你可以在项目中重复使用,提高代码的复用性和工作效率。这些函数包括获取元素、发起Ajax请求、处理本地存储、日期格式化、定时器等功能,可以在不同场景中减少重复的代码编写。
7 0
JavaScript如何封装一些常见的函数来提高工作效率
|
29天前
|
C语言
字符函数和字符串函数解析及模拟实现
字符函数和字符串函数解析及模拟实现
48 0
|
1天前
|
XML 人工智能 Java
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)

推荐镜像

更多