news 2026/7/8 13:35:53

JS函数语法(重点)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JS函数语法(重点)
函数声明(命名函数)

语法:function 函数名(参数) { 函数体; return 返回值 }

// 求和函数 function sum(a, b) { return a + b; // 返回值,无 return 则返回 undefined } // 调用函数 let result = sum(1, 2); console.log(result); // 3
函数表达式(匿名函数 / 具名函数)
// 匿名函数表达式 let sum = function(a, b) { return a + b; }; console.log(sum(3, 4)); // 7 // 具名函数表达式(便于调试) let sum2 = function fn(a, b) { return a + b; };
箭头函数(ES6+)
// 基础写法 let sum = (a, b) => { return a + b; }; // 简写:单返回语句可省略 {} 和 return let sum2 = (a, b) => a + b; // 单参数可省略 () let double = n => n * 2;

函数参数

形参和实参
  • 形参:函数声明时的参数(占位符)。
  • 实参:函数调用时传入的参数(实际值)。

⚠️ JS 允许实参和形参数量不一致:

  • 实参少 → 形参为undefined
  • 实参多 → 多余参数被忽略(可通过arguments或剩余参数获取)。
默认参数(ES6+)

给形参设置默认值,实参未传时使用。

function sayHi(name = '游客') { console.log(`你好,${name}`); } sayHi(); // 你好,游客 sayHi('张三'); // 你好,张三
剩余参数(ES6+)

语法:...变量名,接收剩余的所有实参(转为数组)。

function sum(...nums) { return nums.reduce((total, n) => total + n, 0); } console.log(sum(1, 2, 3)); // 6 console.log(sum(1, 2, 3, 4)); // 10
展开运算符(ES6+)

语法:...数组/对象,将数组 / 对象展开为单个值。

let arr = [1, 2, 3]; console.log(...arr); // 1 2 3 // 传参时展开 function sum(a, b, c) { return a + b + c; } console.log(sum(...arr)); // 6

作用域与闭包

作用域
  • 全局作用域:代码全程可见(如全局变量)。
  • 函数作用域:仅函数内部可见(var声明的变量)。
  • 块级作用域:仅{}内部可见(let/const声明的变量)。
闭包

定义:内层函数访问外层函数的变量,形成闭包(外层函数执行后,变量不被销毁)。

用途:私有化变量、缓存数据、防抖节流。

风险:内存泄漏(闭包引用的变量不会被垃圾回收,需手动释放)。

function outer() { let num = 10; // 外层变量 // 内层函数访问外层变量,形成闭包 return function inner() { console.log(num); }; } let fn = outer(); fn(); // 10(outer 执行后,num 未被销毁)

核心数组方法(高频)

方法作用是否修改原数组返回值
push()末尾添加元素新长度
pop()末尾删除元素删除的元素
unshift()开头添加元素新长度
shift()开头删除元素删除的元素
splice()增删改(万能方法)删除的元素数组
slice()截取数组(start, end)新数组(不包含 end)
concat()合并数组新数组
join()转为字符串(指定分隔符)字符串
forEach()遍历数组(无返回值)undefined
map()遍历数组,返回新数组新数组(每个元素处理后)
filter()过滤数组符合条件的新数组
reduce()累加 / 归并最终累加值
find()找第一个符合条件的元素元素 /undefined
findIndex()找第一个符合条件的索引索引 /-1
includes()判断是否包含元素true/false
sort()排序排序后的数组(默认字符序
let arr = [1, 2, 3]; // 增删改 arr.push(4); // [1,2,3,4] arr.pop(); // [1,2,3] arr.splice(1, 1, 10); // 从索引1删1个,加10 → [1,10,3] // 遍历/处理 arr.forEach(item => console.log(item)); // 1,10,3 let newArr = arr.map(item => item * 2); // [2,20,6] let filterArr = arr.filter(item => item > 5); // [10] // 归并(求和) let total = arr.reduce((sum, item) => sum + item, 0); // 14 // 查找 console.log(arr.find(item => item > 5)); // 10 console.log(arr.includes(10)); // true // 排序(注意:默认字符序,需传回调) let numArr = [10, 2, 5]; numArr.sort((a, b) => a - b); // 升序 [2,5,10] numArr.sort((a, b) => b - a); // 降序 [10,5,2]

对象

对象是键值对的集合,键(属性名)为字符串,值(属性值)可为任意类型,是 JS 面向对象的基础。

// 字面量(推荐) let user = { name: '张三', // 属性 age: 20, sayHi: function() { // 方法 console.log('你好'); } }; // 构造函数 let user2 = new Object(); user2.name = '李四'; user2.age = 21;
// 点语法(推荐,属性名合法) console.log(user.name); // 张三 // 方括号(属性名含特殊字符/变量) console.log(user['age']); // 20 let key = 'sayHi'; user[key](); // 你好
增删改属性
// 新增 user.gender = '男'; // 修改 user.age = 22; // 删除 delete user.gender;

日期

// 创建日期对象 let date = new Date(); console.log(date.getFullYear()); // 年 console.log(date.getMonth() + 1); // 月(0-11,需+1) console.log(date.getDate()); // 日 console.log(date.getHours()); // 时 console.log(date.getMinutes()); // 分 console.log(date.getSeconds()); // 秒 // 格式化日期 function formatDate() { let d = new Date(); let year = d.getFullYear(); let month = String(d.getMonth() + 1).padStart(2, '0'); let day = String(d.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } console.log(formatDate()); // 2025-12-14
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/6 23:20:18

AI 数字孪生工厂:西门子与中信特钢的实践,如何降本 11%?

一、行业痛点:特钢制造的降本困局钢铁行业作为重工业支柱,长期面临 "三高两低" 的发展瓶颈:高能耗、高排放、高成本与低效率、低附加值。中信特钢作为全球特钢领军企业,其生产流程涵盖冶炼、连铸、轧制等十余个核心环节…

作者头像 李华
网站建设 2026/7/8 22:39:18

Spring IoC的实现机制是什么?

大家好,我是锋哥。今天分享关于【Spring IoC的实现机制是什么?】面试题。希望对大家有帮助; Spring IoC的实现机制是什么? 超硬核AI学习资料,现在永久免费了! Spring IoC(Inversion of Contro…

作者头像 李华
网站建设 2026/7/7 21:04:34

耐用折叠屏手机推荐:三星Galaxy Z TriFold如何破解“折痕与耐用”难题?

当折叠屏手机从概念产品走向大众市场,消费者最关心的问题之一就是耐用性。毕竟,折叠屏设备多出了复杂的机械结构和柔性屏幕,这些部件在日常使用中面临更多挑战。那么,如今的折叠屏手机在耐用性方面达到了什么水平?三星…

作者头像 李华
网站建设 2026/7/6 11:54:05

前端技术风险防控:以防为主,防控结合

前端技术风险防控:以防为主,防控结合 1. 核心理念:防与控的辩证关系 防:在风险发生前,通过技术手段、流程规范、架构设计等主动预防,从根源上减少风险发生的概率。 控:当风险不可避免地发生时&a…

作者头像 李华
网站建设 2026/7/8 7:36:12

入门大模型必知的100个基础问题(附简明答案)

写在前面 这篇内容将图片中的要点按顺序整理为「100 个基础问题 简明答案」。你可以把它当作查阅清单:从概念、结构、训练、评估到优化与应用,快速过一遍大模型(LLM)最常见的知识点。 100个基础问题什么是大模型? 答案…

作者头像 李华