JavaScript--初识函数

一、概念

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

二、优点

1、函数可以在同一程序或其他程序中反复使用(通过函数名调用)。
2、使程序变得更简短而清晰,提高可读性。
3、有利于程序维护。

三、分类

函数可分为三类:系统函数,内置函数,自定义函数。

1、系统函数

window对象里的所有函数都属于系统函数(注重使用)。

2、内置函数

所有内置对象里函数都属于内置函数(注重使用)。

3、自定义函数

程序员自己定义编写的函数(注重定义和使用)。

四、自定义函数的定义与使用

1、定义

1)使用function关键字定义匿名函数

(function(){
console.log('匿名函数')
})()

2)使用function关键字定义具名函数

function sayHi(name, message) { 
 console.log("Hello " + name + ", " + message); 
}

3)使用new Function方式

var 函数名 = new Function('形参,形参1','函数体')

2、调用

通过函数名来调用函数,要传给函数的参数放在括号里(如果有多个参数,则用逗号隔开)。

sayHi("Nicholas", "how are you today?");

五、return关键字

任何函数在任何时间都可以使用 return 语句来返回函数的值,用法是后跟要返回的值。

function sum(num1, num2) { 
 return num1 + num2; 
}

只要碰到 return 语句,函数就会立即停止执行并退出。因此,return 语句后面的代码不会被执行。

function sum(num1, num2) { 
 return num1 + num2; 
 console.log("Hello world"); // 不会执行
}

一个函数里也可以有多个 return 语句,像这样:

function diff(num1, num2) { 
 if (num1 < num2) { 
 return num2 - num1; 
 } else { 
 return num1 - num2; 
 } 
}

return 语句也可以不带返回值。这时候,函数会立即停止执行并返回 undefined。

function sayHi(name, message) { 
 return; 
 console.log("Hello " + name + ", " + message); // 不会执行
}

六、函数作用域与作用域链

1、在函数内定义的变量不能在函数之外的任何地方访问,因为变量仅仅在该函数的域的内部有定义。相对应的,一个函数可以访问定义在其范围内的任何变量和函数。
2、定义在全局域中的函数可以访问所有定义在全局域中的变量。在另一个函数中定义的函数也可以访问在其父函数中定义的所有变量和父函数有权访问的任何其他变量。
3、当前的作用域内没有找到对应的变量就会向上去寻找,而这个过程构成的链式结构称为作用域链

七、函数参数数组

1、函数的参数在内部表现为一个数组。函数被调用时总会接收一个数组,但函数并不关心这个数组中包含什么。如果数组中什么也没有,那没问题;如果数组的元素超出了要求,那也没问题。
2、事实上,在使用 function 关键字定义(非箭头)函数时,可以在函数内部访问 arguments 对象,从中取得传进来的每个参数值。
3、arguments 对象是一个类数组对象,因此可以使用中括号语法访问其中的元素(第一个参数是 arguments[0],第二个参数是arguments[1])。而要确定传进来多少个参数,可以访问 arguments.length 属性。

function sum(){ //不清楚参数个数(无参)
// arguments 可以接收里面所有的参数
//获取里面传递的所有的参数 arguments 长度length
//下标索引是从0开始的
var result = 0
//遍历对应的arguments里面的所有的参数
for(var i=0;i<arguments.length;i++){
result += arguments[i] //取出里面的参数进行求和
}
return result
}

八、函数的嵌套

1、函数的嵌套: 函数内部可以再包含其他函数;
2、函数之间允许相互调用,也允许向外调用, 但是不可以调用同级函数的嵌套函数;

function fn1(){
console.log('函数1');
function fn2(){
console.log('函数2');
// fn1() 没有结束就是死循环
}
function fn3(){
console.log('函数3');
//调用函数2
fn2()
}
fn2()
fn3()
}
fn1() //函数1 函数2 函数3 函数2

九、DOM的简单操作

1.获取对应的标签 (通过id获取)

document.getElementById('id的属性值')

2.input框的值获取 value属性

document.getElementById('input框的id').value //得到input框内的值

3.点击事件 onclick

element.onclick = function(){
//相关操作
}

实例

//通过输入框输入数值判断对应的奇偶并打印
<input id="number" type="text">
<button id="btn">判断奇偶</button>
<script>
function handlerClick(){
//拿到input框里面的内容 获取到input框
var inputValue = document.getElementById('number').value //string类型
// console.log(typeof inputValue); 如果是+法操作必须要先转类型
//判断奇偶的操作
if(inputValue%2==0){
console.log('当前为偶数');
}else{
console.log('当前为奇数');
}
}
//首先需要点击按钮 获取按键 加点击事件
//事件触发自动调用对应的函数 (事件驱动)
document.getElementById('btn').onclick = handlerClick
</script>

十、递归算法

1、递归

一个函数可以指向并调用自身。

2、要素

1)找出变化规律。
2)找出临界值(没有规律的值)。(return)
3)调用自己。(在函数内部调用自身)

3、实例
//2 4 6 8 10 第100的值是什么
function fn(n){ //一般情况都会有参数 n表示为位数
if(n==1){//没规律的(一般在前面或者后面)
return 2 //返回具体的值
}else{ //有规律的 返回对应的规律的公式
return fn(n-1)+2
}
}
console.log(fn(100))
posted @ 2022-10-28 19:52  蒜泥捣莓  阅读(34)  评论(0编辑  收藏  举报