本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
JavaScript- 1.1 行内、内部、外部三种引用方式
JavaScript- 1.2 ECMA基本语法和控制流
JavaScript- 1.3 DOM对页面内容进行操作
JavaScript- 1.4 BOM对浏览器进行操作
JavaScript- 1.5 数据类型+变量+运算符
JavaScript- 1.6 基本控制流
JavaScript- 2.1 系统函数和自定义函数
JavaScript- 2.2 内置对象MATH
JavaScript- 2.3 内置对象String
JavaScript- 2.4 内置对象Date
JavaScript- 2.5 内置对象ARRAY
JavaScript- 2.6 数组应用
JavaScript- 2.7 二维数组
JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval
JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面
JavaScript- 4.1 DOM-document对象
JavaScript- 4.2 DOM--定位元素
JavaScript- 4.3 轮播图实现指南
目录
系列文章目录
前言
一、系统函数与自定义函数
1、JavaScript 函数概述
2、系统函数（内置函数）
1. 常用系统函数
eval()
parseInt() 和 parseFloat()
isNaN()
isNaN()
Number(), String(), Boolean()
encodeURIComponent() 和 decodeURIComponent()
2. Math 对象的方法
3、自定义函数
1. 函数定义方式
函数声明
函数表达式
箭头函数 (ES6)
使用 Function 构造函数
2. 函数参数
默认参数 (ES6)
剩余参数 (Rest Parameters)
3. 函数返回值
4. 函数作为一等公民
5. 高阶函数示例
4、函数的作用域和闭包
1. 作用域
2. 闭包
5、立即调用函数表达式 (IIFE)
6、生成器函数 (ES6)
7、总结
二、实战代码
1、系统函数
2、自定义函数
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、系统函数与自定义函数
1、JavaScript 函数概述
函数是 JavaScript 中的基本构建块之一，它是一段可重复使用的代码块，用于执行特定任务或计算值。JavaScript 中的函数主要分为两类：系统函数（内置函数）和自定义函数。
2、系统函数（内置函数）
JavaScript 提供了一系列内置函数，也称为全局函数，可以直接使用而无需定义。
1. 常用系统函数
eval()
执行字符串形式的 JavaScript 代码示例：
eval('console.log("Hello")'); // 输出 "Hello"
parseInt() 和 parseFloat()
将字符串转换为整数或浮点数示例： parseInt("10"); // 10
parseFloat("3.14"); // 3.14
isNaN()
检查值是否为 NaN (Not a Number)示例：
javascript
isNaN(123); // false
isNaN("hello"); // true
isNaN()
将值转换为布尔值示例：
javascript
Boolean(1); // true
Boolean(0); // false
Number(), String(), Boolean()
类型转换函数示例：
javascript
Number("123"); // 123
String(123); // "123"
Boolean(1); // true
encodeURIComponent() 和 decodeURIComponent()
编码和解码 URI 组件示例：
javascript
encodeURIComponent("https://example.com/测试");
decodeURIComponent("https%3A%2F%2Fexample.com%2F%E6%B5%8B%E8%AF%95");
2. Math 对象的方法
虽然 Math 是对象而非函数，但它提供了许多有用的数学函数：
javascript
Math.abs(-10); // 10 - 绝对值
Math.round(3.6); // 4 - 四舍五入
Math.floor(3.6); // 3 - 向下取整
Math.ceil(3.2); // 4 - 向上取整
Math.random(); // 0-1之间的随机数
Math.max(1, 2, 3); // 3 - 最大值
Math.min(1, 2, 3); // 1 - 最小值
3、自定义函数
开发者可以自己定义的函数，用于封装特定功能。
1. 函数定义方式
函数声明
javascript
function greet(name) {
return `Hello, ${name}!`;
}
函数表达式
javascript
const greet = function(name) {
return `Hello, ${name}!`;
};
箭头函数 (ES6)
javascript
const greet = (name) => `Hello, ${name}!`;
使用 Function 构造函数
javascript
const greet = new Function('name', 'return `Hello, ${name}!`');
2. 函数参数
默认参数 (ES6)
javascript
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
剩余参数 (Rest Parameters)
javascript
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
3. 函数返回值
函数可以返回一个值，如果没有 return 语句或 return 后没有值，则返回 undefined。
javascript
function add(a, b) {
return a + b;
}
function noReturn() {
// 没有 return 语句
}
4. 函数作为一等公民
在 JavaScript 中，函数是一等公民，可以：
被赋值给变量作为参数传递作为返回值
javascript
// 函数作为参数
function process(callback) {
const result = callback();
console.log(result);
}
// 函数作为返回值
function createMultiplier(multiplier) {
return function(x) {
return x * multiplier;
};
}
5. 高阶函数示例
javascript
// 数组的 map 方法（高阶函数）
const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
// 自定义高阶函数
function twice(fn, value) {
return fn(fn(value));
}
const result = twice(x => x * 3, 2); // 18 (3*(3*2))
4、函数的作用域和闭包
1. 作用域
javascript
function outer() {
const outerVar = "I'm outside!";
function inner() {
console.log(outerVar); // 可以访问 outerVar
}
inner();
}
outer();
// console.log(outerVar); // 报错，outerVar 未定义
2. 闭包
javascript
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
5、立即调用函数表达式 (IIFE)
javascript
(function() {
console.log("This runs immediately");
})();
// 带参数的 IIFE
(function(message) {
console.log(message);
})("Hello from IIFE");
6、生成器函数 (ES6)
javascript
function* numberGenerator() {
let num = 1;
while (true) {
yield num++;
}
}
const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
7、总结
系统函数：JavaScript 内置的全局函数，如 parseInt(), eval(), isNaN() 等，以及 Math 对象的方法。自定义函数：开发者定义的函数，可以通过多种方式声明，支持默认参数、剩余参数等特性。函数特性：JavaScript 函数是一等公民，支持高阶函数、闭包等高级特性。应用场景：从简单的代码复用到复杂的异步编程模式，函数都是 JavaScript 编程的核心。
掌握 JavaScript 函数的使用是成为熟练开发者的关键，建议多实践各种函数定义方式和使用场景。
二、实战代码
1、系统函数
2、自定义函数
总结
以上就是今天要讲的内容，本文简单记录了系统函数和自定义函数，仅作为一份简单的笔记使用，大家根据注释理解