JavaScript基础-函数（完备版）

数据人与超自然意识 · 2024-10-15 16:54:48

函数

函数：是可以被重复利用的代码块。
作用：函数可以把具有雷同或相似逻辑的代码封装起来，有利于代码复用。

根本利用

定义函数（声明函数）：function
调用函数：定义一个函数并不会自动执行它，需要调用函数。
1. //声明函数
2. function 函数名() {
3. 函数体
4. }
5. //调用函数
6. 函数名()
8. //需求：封装一个函数，计算两个数的和
9. function getSum() {
10. let num1 = 1
11. let num2 = 9
12. console.log(num1 + num2)
13. }
14. getSum()
16. //需求：封装函数，计算1~100之间的累加和
17. function getSum100() {
18. let sum = 0
19. for (let i = 1; i <= 100; i++) {
20. sum += i
21. }
22. console.log(sum)
23. }
24. getSum100()
复制代码

函数提升

阐明：
- 函数提升：提升到当前作用域最前面；
- 只提升声明，不提升调用；
- 函数表达式不存在提升的现象，表达式相当于变量；
- 函数提升能够使函数的声明调用更机动

函数参数

形参：声明函数时小括号里的叫形参。
实参：调用函数时小括号里的叫实参。
执行过程：把实参的数据传递给形参，提供给函数内部利用。

function getSum(x,y) {
console.log(x,y) //3 5
return x + y
}
let res = getSum(3,5)
console.log(res) //8

复制代码

  注意：在js中，形参和实参的个数可以不同等。形参过多会自动填上undefined；实参过多，会忽略多余的实参。
  发起：开辟中保持形参和实参的个数同等。
  arguments对象（了解）

arguments：是函数内部内置的伪数组变量，它包罗了调用函数时传入的所有实参，但只存在于函数，外面无法利用。
作用：动态获取函数的实参。
可以通过for循环依次得到传递过来的实参。

剩余参数(重点)

剩余参数: 允许我们将一个不定数量的参数表现为一个数组.
简单理解：用于获取多余的实参，并形成一个真数组
**利用场景：**可以办理形参和实参个数不匹配的题目

<body>
<script>
function fn(a, b, ...c) {//剩余参数只能写在参数的最后面
console.log(a + b, c) //c:真数据（数组）
}
fn(1, 2, 3, 4, 5)
</script>
</body>

复制代码

剩余参数和 arguments 区别：
- ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
- 借助 … 获取的剩余实参，是个真数组
- 箭头函数不支持arguments，但是可以利用剩余参数
- 开辟中，还是提倡多利用剩余参数

睁开运算符(…)

睁开运算符：将一个数组/对象进行睁开

<body>
<script>
//展开运算符
// 数组
const arr = [1, 2, 3]
console.log(...arr)
// 对象
const obj = {
uname: 'niuniu',
age: 18
}
console.log({...obj})
// 应用：数组的展开，求最大值
console.log(Math.max(1, 2, 3, 9))
console.log(Math.max(...arr))
// 合并数组
const arr1 = [4, 5, 6]
const arr2 = ['haha', 'lala', 'xixixi']
const arr3 = [...arr1, ...arr2]
console.log(arr3)
// 合并对象
const obj1 = {
uname: 'niuniu'
}
const obj2 = {
age: 18
}
const obj3 = {
...obj1,
...obj2
}
console.log(obj3)
</script>
</body>

复制代码

逻辑停止

逻辑停止：存在于逻辑运算符 && 和 || 中，左边假如满足肯定条件会停止代码执行，也称为逻辑短路。
作用：办理参数形参传递的题目
解释：

function getSum(x,y) {
//逻辑中断：如果实参没有传递给形参 x 和 y ，则会返回 0，而不是NaN
x = x || 0
y = y || 0
console.log(x,y)
}
getSum(2) //2 0 => 如果没有逻辑中断，则返回 NaN
getSum(3,6) //3 6

复制代码

函数参数-默认参数

默认参数：可以给形参设置默认值。
阐明：默认值只会在 缺少实参传递 或 实参为undefined 才会被执行。
作用：办理参数形参传递的题目。
与逻辑停止的区别：
- 默认参数紧张处理函数形参，比逻辑停止简单；
- 逻辑停止除了参数，还可以处理更多的需求，例如，

function getSum(x = 0,y = 0) {
console.log(x,y)
}
getSum(4,1) //4 1
getSum(4) //4 0

复制代码

函数返回值-return

返回值：把处理结果返回给调用者。
注意：
- 竣事函数：return 会立即竣事当前函数，后面的代码不会被执行。
- 不要换行：在return关键字和被返回的表达式之间不允许利用换行符，否则自动增补分号。
- 默认返回：可以没有return，这时默认返回值为undefined。

作用域(scope)

作用域：变量大概值在代码中可用性的范围.
作用：提高了步伐逻辑的局部性，增强了步伐的可靠性，镌汰了名字辩论。

全局作用域

作用于所有代码执行的环境（整个script标签内部）大概一个独立的 js文件。
变量：全局变量
全局变量 在任何区域都可以访问和修改。

局部作用域

函数作用域：作用于函数内部的代码环境。
块级作用域：{} 大括号内部。
变量：局部变量
局部变量 只能在当前局部内部访问和修改。

注意：

假如函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种环境，函数内部的形参可以看做是局部变量。

变量的访问原则

访问原则：在能够访问的环境下 先局部，局部没有 再找全局，总结：就近原则

//练习1
function f1 () {
let num = 123
function f2 () {
console.log(num) //123
}
f2()
}
let num = 234
f1()
// 练习2.
let a = 1
function fn1() {
let a = 2
let b = '22'
fn2()
function fn2() {
let a = 3
fn3()
function fn3() {
let a = 4
console.log(a) //4
console.log(b) //'22'
}
}
}
fn1()

复制代码

垃圾接纳机制

垃圾接纳机制(Garbage Collection)，简称 GC

JS中内存的分配和接纳都是自动完成的，内存在不利用的时候会被垃圾接纳器自动接纳。

js环境种内存的生命周期：
- 内存分配：当我们声明变量、函数、对象的时候，体系会自动为他们分配内存。
- 内存利用：即读写内存，也就是利用变量、函数等。
- 内存接纳：利用完毕，由垃圾接纳器自动接纳不再利用的内存。
阐明：
- 全局变量一样平常不会接纳(关闭页面接纳)
- 一样平常环境下局部变量的值, 不用了, 会被自动接纳掉
**内存走漏：**步伐中分配的内存由于某种原因步伐未释放或无法释放叫做内存走漏。

闭包

概念：一个函数对周围状态的引用捆绑在一起，闭包让开辟者可以从内部函数访问外部函数的作用域。

简单理解：闭包 = 内层函数 + 外层函数的变量

作用：实现数据的私有，克制全局污染，外层函数有可以访问里层函数变量。
题目：内存走漏

<body>
<script>
// 闭包：内层函数 + 外层函数的变量
// function outer() {
// let a = 1
// function f() {
// console.log(a)
// }
// f()
// }
// outer()
// 案例：统计函数的调用次数
function fn() {
let count = 0
function fun() {
count++
console.log(`fn函数调用了${count}次`)
}
return fun
}
const f = fn()
f()
</script>
</body>

复制代码

匿名函数

函数表达式

函数表达式：将匿名函数赋值给一个变量，而且通过变量名称进行调用。
利用场景：后期web api 阶段会利用。
注意：
- 函数也是一种数据类型；
- 函数表达式必须先定义，后利用；
语法：
1. //定义
2. let fn = function () {
3. //函数体
4. }
6. //调用
7. fn()
复制代码

立即执行函数

场景先容：克制全局变量之间的渲染。
语法：
1. //方法1
2. (匿名函数)();
4. //方法2
5. (匿名函数());
7. //方法1
8. (function () {
9. console.log('niuniu')
10. })();
12. //方法2
13. (function () {
14. console.log('zhuzhu')
15. }());
复制代码

注意：多个立即执行函数要用 ; 隔开，前后都要，否则会报错。
箭头函数

箭头函数比函数表达式更简洁的一种写法
利用场景：箭头函数更实用于那些本来需要匿名函数的地方，写法更简单
用法细节：
- 当箭头函数只有一个参数时，可以省略参数的小括号，其余个数不能省略（没有参数也需要写小括号）
- 当箭头函数的函数体只有一句代码可以省略函数体大括号，这句代码就是返回值（可以不用写return）
- 假如返回的是个对象，则需要把对象用小括号包裹
- 箭头函数里面没有arguments，但是有剩余参数

<body>
<script>
//箭头函数基本写法
// const fn = () => // console.log('我是箭头函数')
// }
// fn()
// 细节写法
// const fn = a => console.log(a)
// fn(1)
// const fn = a => a
// const res = fn('niuniu')
// console.log(res)
// const fn = () => {
// const obj = {
// uname: 'niuniu',
// age: 18
// }
// return obj
// }
// const res = fn()
// console.log(fn())
// const fn = () => ({uname: 'niuniu', age: 18})
// const res = fn()
// console.log(res)
const fn = (...arr) => {
console.log(arr)
}
fn(1, 2, 3)
</script>
</body>

复制代码

箭头函数中的 this (紧张)

以前函数中的this指向是根据怎样调用来确定的。简单理解就是this指向调用者
箭头函数本身没有this,它只会沿用**上一层作用域的this **。

<body>
<button>按钮</button>
<script>
//箭头函数的 this问题
const btn = document.querySelector('button')
// btn.addEventListener('click', () => {
// console.log(this) //箭头函数里的this是指向上一级作用域
// })
//定时器中使用，事件源，推荐使用箭头函数
//需求：点击按钮禁用，三秒后启用
btn.addEventListener('click', function () {
btn.disabled = true
setTimeout(() => {
console.log(this)
btn.disabled = false
}, 3000)
})
</script>
</body>

复制代码

注意：在开辟中【利用箭头函数前需要思量函数中 this 的值】

事件回调函数利用箭头函数时，this 为全局的 window，不太推荐利用箭头函
定时器里面的假如需要this，可以利用箭头函数

ES6对象简写

在对象中，假如属性名和属性值同等，可以简写只写属性名即可。
在对象中，方法（函数）可以简写
1. <body>
2. <script>
3. // ES6对象属性和方法的简写
4. const uname = 'niuniu'
5. const age = 18
6. // 对象属性
7. const obj = {
8. // uname: uname,
9. // age: age
10. uname,
11. age,
12. // 方法简写
13. sing() {
14. console.log('hahahaha')
15. }
16. }
17. console.log(obj)
18. obj.sing()
19. </script>
20. </body>
复制代码

断点调试-进入函数内部

F11 可以进入函数内部调试
可以利用监视，来看数组的变化。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

JavaScript基础-函数（完备版）

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云