首页 > 网络编程 > JavaScript > javascript技巧 > 前端js内置函数

前端开发常用的js内置函数总结大全(查漏补缺)

2026-04-13 10:17:25 作者：~欲买桂花同载酒~

javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助,这篇文章主要介绍了前端开发常用的js内置函数总结大全的相关资料,需要的朋友可以参考下

一、数组 (Array) 相关内置函数

数组是前端处理数据最常用的结构，这些函数几乎每天都会用到：

1. forEach () - 遍历数组

功能：遍历数组的每一个元素，并对每个元素执行指定的回调函数（无返回值）。
语法：array.forEach((item, index, arr) => { ... })
- item：当前遍历的元素
- index：当前元素的索引（可选）
- arr：原数组（可选）
示例：

const fruits = ['苹果', '香蕉', '橙子'];
// 遍历并打印每个水果
fruits.forEach((fruit, index) => {
  console.log(`第${index+1}个水果：${fruit}`);
});
// 输出：
// 第1个水果：苹果
// 第2个水果：香蕉
// 第3个水果：橙子

应用场景：批量渲染列表、批量处理数组元素（如修改样式、绑定事件）。

2. map () - 数组映射（返回新数组）

功能：遍历数组，对每个元素执行回调函数，返回由回调结果组成的新数组（不改变原数组）。
语法：const newArr = array.map((item, index, arr) => { return 处理后的值 })
示例：

const nums = [1, 2, 3];
// 将每个数字翻倍，返回新数组
const doubleNums = nums.map(num => num * 2);
console.log(doubleNums); // [2,4,6]
console.log(nums); // [1,2,3]（原数组不变）

应用场景：数据格式转换（如接口返回数据映射为页面需要的格式）、列表渲染前的数据处理。

3. filter () - 数组过滤（返回新数组）

功能：遍历数组，筛选出满足回调函数条件的元素，返回新数组（不改变原数组）。
语法：const newArr = array.filter((item, index, arr) => { return 条件表达式 })
示例：

const scores = [85, 60, 90, 55];
// 筛选出及格（≥60）的分数
const passScores = scores.filter(score => score >= 60);
console.log(passScores); // [85,90,60]

应用场景：数据筛选（如搜索结果过滤、条件筛选列表）。

4. find () /findIndex () - 查找数组元素

功能：
- find()：返回数组中第一个满足条件的元素（无则返回 undefined）；
- findIndex()：返回数组中第一个满足条件的元素的索引（无则返回 -1）。
语法：

const targetItem = array.find((item, index, arr) => { return 条件 });
const targetIndex = array.findIndex((item, index, arr) => { return 条件 });

示例：

const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
];
// 查找id为2的用户
const targetUser = users.find(user => user.id === 2);
console.log(targetUser); // { id: 2, name: '李四' }
// 查找id为3的用户的索引
const targetIdx = users.findIndex(user => user.id === 3);
console.log(targetIdx); // 2

应用场景：根据唯一标识（如 id）查找列表中的某条数据。

5. reduce () - 数组归并（聚合计算）

功能：遍历数组，将每个元素与前一次的计算结果累加 / 聚合，最终返回一个单一值（用途极广）。
语法：array.reduce((prev, curr, index, arr) => { return 计算逻辑 }, initialValue)
- prev：上一次回调的返回值（初始值为 initialValue）；
- curr：当前遍历的元素；
- initialValue：初始值（可选，不传则默认用数组第一个元素）。
示例：

// 1. 数组求和
const nums = [1, 2, 3, 4];
const sum = nums.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 10
// 2. 统计数组中元素出现次数
const fruits = ['苹果', '香蕉', '苹果', '橙子', '香蕉', '苹果'];
const countObj = fruits.reduce((prev, curr) => {
  prev[curr] = (prev[curr] || 0) + 1;
  return prev;
}, {});
console.log(countObj); // { 苹果: 3, 香蕉: 2, 橙子: 1 }

应用场景：求和 / 求平均值、数组去重、对象数组聚合、扁平嵌套数组等。

6. includes () - 判断数组是否包含某元素

功能：判断数组是否包含指定元素，返回 true/false（比 indexOf 更直观）。
语法：array.includes(item, startIndex)
- startIndex：起始查找位置（可选，默认 0）。
示例：

const colors = ['red', 'green', 'blue'];
console.log(colors.includes('green')); // true
console.log(colors.includes('yellow')); // false

应用场景：权限判断、条件校验（如判断用户是否在白名单中）。

二、字符串 (String) 相关内置函数

前端处理文本（如用户输入、接口返回字符串）时必备：

1. trim () /trimStart () /trimEnd () - 去除空格

功能：
- trim()：去除字符串首尾的空格（包括换行、制表符）；
- trimStart()：仅去除开头空格；
- trimEnd()：仅去除结尾空格。
语法：str.trim()
示例：

const inputStr = '  用户名  ';
const cleanStr = inputStr.trim();
console.log(cleanStr); // '用户名'（首尾空格被去除）

应用场景：处理用户输入（如表单提交前去除首尾空格）、清理接口返回的无效空格。

2. split () - 字符串分割为数组

功能：按指定分隔符将字符串分割成数组（常用於处理分隔符分隔的文本）。
语法：str.split(separator, limit)
- separator：分隔符（字符串 / 正则）；
- limit：返回数组的最大长度（可选）。
示例：

const str = '苹果,香蕉,橙子';
const fruitArr = str.split(',');
console.log(fruitArr); // ['苹果','香蕉','橙子']
// 分割为单个字符
const charArr = 'hello'.split('');
console.log(charArr); // ['h','e','l','l','o']

应用场景：处理逗号 / 空格分隔的文本、拆分 URL 参数、处理日期字符串（如 '2026-03-01' 拆分为年月日）。

3. indexOf () /lastIndexOf () - 查找字符串位置

功能：
- indexOf()：返回指定子串首次出现的索引（无则返回 -1）；
- lastIndexOf()：返回指定子串最后出现的索引（无则返回 -1）。
语法：str.indexOf(subStr, startIndex)
示例：

const str = 'hello world';
console.log(str.indexOf('o')); // 4（第一个o的位置）
console.log(str.lastIndexOf('o')); // 7（最后一个o的位置）
console.log(str.indexOf('x')); // -1（不存在）

应用场景：判断字符串是否包含某子串（替代 includes 兼容低版本浏览器）、截取字符串前的校验。

4. slice () - 截取字符串（不改变原字符串）

功能：截取字符串的指定部分，返回新字符串（支持负数索引，-1 表示最后一个字符）。
语法：str.slice(startIndex, endIndex)
- startIndex：起始索引（包含）；
- endIndex：结束索引（不包含，可选，不传则截取到末尾）。
示例：

const str = '2026-03-01';
// 截取年份（前4位）
const year = str.slice(0, 4);
console.log(year); // '2026'
// 截取最后两位（日期）
const day = str.slice(-2);
console.log(day); // '01'

应用场景：截取手机号 / 身份证号部分字符（如隐藏中间 4 位）、拆分日期 / 时间字符串。

5. replace () /replaceAll () - 替换字符串

功能：
- replace()：替换第一个匹配的子串；
- replaceAll()：替换所有匹配的子串（ES2021+ 支持）。
语法：

str.replace(searchValue, replaceValue);
str.replaceAll(searchValue, replaceValue);

示例：

const str = 'hello world, hello js';
// 替换第一个hello为hi
const newStr1 = str.replace('hello', 'hi');
console.log(newStr1); // 'hi world, hello js'
// 替换所有hello为hi
const newStr2 = str.replaceAll('hello', 'hi');
console.log(newStr2); // 'hi world, hi js'

应用场景：文本替换（如敏感词过滤、格式化文本）、URL 参数替换。

三、对象 (Object) 相关内置函数

1. Object.keys() / Object.values() / Object.entries()

功能：
- Object.keys(obj)：返回对象所有键名组成的数组；
- Object.values(obj)：返回对象所有值组成的数组；
- Object.entries(obj)：返回对象键值对组成的二维数组（[[key1, value1], [key2, value2]]）。
语法：

const keys = Object.keys(obj);
const values = Object.values(obj);
const entries = Object.entries(obj);

示例：

const user = { name: '张三', age: 20, gender: '男' };
console.log(Object.keys(user)); // ['name','age','gender']
console.log(Object.values(user)); // ['张三',20,'男']
console.log(Object.entries(user)); // [['name','张三'], ['age',20], ['gender','男']]

应用场景：遍历对象属性、对象转数组、表单数据处理。

2. Object.assign () - 对象合并 / 拷贝

功能：将一个或多个源对象的属性复制到目标对象，返回目标对象（浅拷贝）。
语法：Object.assign(target, source1, source2, ...)
示例：

// 1. 合并对象
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const mergeObj = Object.assign({}, obj1, obj2);
console.log(mergeObj); // { a:1, b:2 }
// 2. 浅拷贝对象
const original = { name: '张三' };
const copy = Object.assign({}, original);
copy.name = '李四';
console.log(original.name); // '张三'（原对象不受影响）

应用场景：对象浅拷贝、合并配置项（如组件默认配置 + 用户自定义配置）。

四、其他高频内置函数

1. parseInt () /parseFloat () - 字符串转数字

功能：
- parseInt()：将字符串转为整数（可指定进制）；
- parseFloat()：将字符串转为浮点数。
语法：

parseInt(str, radix); // radix为进制（如10表示十进制）
parseFloat(str);

示例：

console.log(parseInt('123.45')); // 123
console.log(parseInt('10px')); // 10（自动忽略非数字部分）
console.log(parseFloat('123.45px')); // 123.45

应用场景：处理用户输入的数字（如表单中的价格、数量）、提取样式中的数值（如 px 转数字）。

2. JSON.parse () / JSON.stringify () - JSON 处理

功能：
- JSON.parse()：将 JSON 字符串转为 JS 对象 / 数组；
- JSON.stringify()：将 JS 对象 / 数组转为 JSON 字符串。
语法：

const obj = JSON.parse(jsonStr);
const jsonStr = JSON.stringify(obj);

示例：

// 1. JSON字符串转对象
const jsonStr = '{"name":"张三","age":20}';
const user = JSON.parse(jsonStr);
console.log(user.name); // '张三'
// 2. 对象转JSON字符串（用于本地存储/接口传参）
const userObj = { name: '李四', age: 25 };
const str = JSON.stringify(userObj);
localStorage.setItem('user', str); // 存入本地存储

应用场景：本地存储（localStorage/sessionStorage）、接口数据交互（前后端 JSON 格式传输）。

3. setTimeout () /setInterval () - 定时器

功能：
- setTimeout()：延迟指定时间执行一次回调函数；
- setInterval()：每隔指定时间重复执行回调函数。
语法：

// 延迟1秒执行
const timer1 = setTimeout(() => {
  console.log('1秒后执行');
}, 1000);
// 每隔1秒执行一次
const timer2 = setInterval(() => {
  console.log('每隔1秒执行');
}, 1000);
// 清除定时器
clearTimeout(timer1);
clearInterval(timer2);

应用场景：延迟加载、轮播图、倒计时、定时刷新数据。

总结

数组函数：forEach（遍历）、map（映射）、filter（筛选）、reduce（聚合）是处理列表数据的核心，几乎覆盖 80% 的数组操作场景；
字符串函数：trim（去空格）、split（分割）、slice（截取）、replace（替换）是处理文本输入 / 输出的高频函数；
对象 / 通用函数：Object.keys/values（遍历对象）、JSON.parse/stringify（JSON 处理）、parseInt（类型转换）是前端数据处理的基础，必须掌握。

到此这篇关于前端开发常用的js内置函数总结大全的文章就介绍到这了,更多相关前端js内置函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！