一、數(shù)組 (Array) 相關內(nèi)置函數(shù)

數(shù)組是前端處理數(shù)據(jù)最常用的結(jié)構(gòu)，這些函數(shù)幾乎每天都會用到：

1. forEach () - 遍歷數(shù)組

• 功能：遍歷數(shù)組的每一個元素，并對每個元素執(zhí)行指定的回調(diào)函數(shù)（無返回值）。
• 語法：array.forEach((item, index, arr) => { ... })
  • item：當前遍歷的元素
  • index：當前元素的索引（可選）
  • arr：原數(shù)組（可選）
• 示例：

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

• 應用場景：批量渲染列表、批量處理數(shù)組元素（如修改樣式、綁定事件）。

2. map () - 數(shù)組映射（返回新數(shù)組）

• 功能：遍歷數(shù)組，對每個元素執(zhí)行回調(diào)函數(shù)，返回由回調(diào)結(jié)果組成的新數(shù)組（不改變原數(shù)組）。
• 語法：const newArr = array.map((item, index, arr) => { return 處理后的值 })
• 示例：

const nums = [1, 2, 3];
// 將每個數(shù)字翻倍，返回新數(shù)組
const doubleNums = nums.map(num => num * 2);
console.log(doubleNums); // [2,4,6]
console.log(nums); // [1,2,3]（原數(shù)組不變）

• 應用場景：數(shù)據(jù)格式轉(zhuǎn)換（如接口返回數(shù)據(jù)映射為頁面需要的格式）、列表渲染前的數(shù)據(jù)處理。

3. filter () - 數(shù)組過濾（返回新數(shù)組）

• 功能：遍歷數(shù)組，篩選出滿足回調(diào)函數(shù)條件的元素，返回新數(shù)組（不改變原數(shù)組）。
• 語法：const newArr = array.filter((item, index, arr) => { return 條件表達式 })
• 示例：

const scores = [85, 60, 90, 55];
// 篩選出及格（≥60）的分數(shù)
const passScores = scores.filter(score => score >= 60);
console.log(passScores); // [85,90,60]

• 應用場景：數(shù)據(jù)篩選（如搜索結(jié)果過濾、條件篩選列表）。

4. find () /findIndex () - 查找數(shù)組元素

• 功能：
  • find()：返回數(shù)組中第一個滿足條件的元素（無則返回 undefined）；
  • findIndex()：返回數(shù)組中第一個滿足條件的元素的索引（無則返回 -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

• 應用場景：根據(jù)唯一標識（如 id）查找列表中的某條數(shù)據(jù)。

5. reduce () - 數(shù)組歸并（聚合計算）

• 功能：遍歷數(shù)組，將每個元素與前一次的計算結(jié)果累加 / 聚合，最終返回一個單一值（用途極廣）。
• 語法：array.reduce((prev, curr, index, arr) => { return 計算邏輯 }, initialValue)
  • prev：上一次回調(diào)的返回值（初始值為 initialValue）；
  • curr：當前遍歷的元素；
  • initialValue：初始值（可選，不傳則默認用數(shù)組第一個元素）。
• 示例：

// 1. 數(shù)組求和
const nums = [1, 2, 3, 4];
const sum = nums.reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 10
// 2. 統(tǒng)計數(shù)組中元素出現(xiàn)次數(shù)
const fruits = ['蘋果', '香蕉', '蘋果', '橙子', '香蕉', '蘋果'];
const countObj = fruits.reduce((prev, curr) => {
  prev[curr] = (prev[curr] || 0) + 1;
  return prev;
}, {});
console.log(countObj); // { 蘋果: 3, 香蕉: 2, 橙子: 1 }

• 應用場景：求和 / 求平均值、數(shù)組去重、對象數(shù)組聚合、扁平嵌套數(shù)組等。

6. includes () - 判斷數(shù)組是否包含某元素

• 功能：判斷數(shù)組是否包含指定元素，返回 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

• 應用場景：權(quán)限判斷、條件校驗（如判斷用戶是否在白名單中）。

二、字符串 (String) 相關內(nèi)置函數(shù)

前端處理文本（如用戶輸入、接口返回字符串）時必備：

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

• 功能：
  • trim()：去除字符串首尾的空格（包括換行、制表符）；
  • trimStart()：僅去除開頭空格；
  • trimEnd()：僅去除結(jié)尾空格。
• 語法：str.trim()
• 示例：

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

• 應用場景：處理用戶輸入（如表單提交前去除首尾空格）、清理接口返回的無效空格。

2. split () - 字符串分割為數(shù)組

• 功能：按指定分隔符將字符串分割成數(shù)組（常用於處理分隔符分隔的文本）。
• 語法：str.split(separator, limit)
  • separator：分隔符（字符串 / 正則）；
  • limit：返回數(shù)組的最大長度（可選）。
• 示例：

const str = '蘋果,香蕉,橙子';
const fruitArr = str.split(',');
console.log(fruitArr); // ['蘋果','香蕉','橙子']
// 分割為單個字符
const charArr = 'hello'.split('');
console.log(charArr); // ['h','e','l','l','o']

• 應用場景：處理逗號 / 空格分隔的文本、拆分 URL 參數(shù)、處理日期字符串（如 '2026-03-01' 拆分為年月日）。

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

• 功能：
  • indexOf()：返回指定子串首次出現(xiàn)的索引（無則返回 -1）；
  • lastIndexOf()：返回指定子串最后出現(xiàn)的索引（無則返回 -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 () - 截取字符串（不改變原字符串）

• 功能：截取字符串的指定部分，返回新字符串（支持負數(shù)索引，-1 表示最后一個字符）。
• 語法：str.slice(startIndex, endIndex)
  • startIndex：起始索引（包含）；
  • endIndex：結(jié)束索引（不包含，可選，不傳則截取到末尾）。
• 示例：

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 參數(shù)替換。

三、對象 (Object) 相關內(nèi)置函數(shù)

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

• 功能：
  • Object.keys(obj)：返回對象所有鍵名組成的數(shù)組；
  • Object.values(obj)：返回對象所有值組成的數(shù)組；
  • Object.entries(obj)：返回對象鍵值對組成的二維數(shù)組（[[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','男']]

• 應用場景：遍歷對象屬性、對象轉(zhuǎn)數(shù)組、表單數(shù)據(jù)處理。

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); // '張三'（原對象不受影響）

• 應用場景：對象淺拷貝、合并配置項（如組件默認配置 + 用戶自定義配置）。

四、其他高頻內(nèi)置函數(shù)

1. parseInt () /parseFloat () - 字符串轉(zhuǎn)數(shù)字

• 功能：
  • parseInt()：將字符串轉(zhuǎn)為整數(shù)（可指定進制）；
  • parseFloat()：將字符串轉(zhuǎn)為浮點數(shù)。
• 語法：

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

• 示例：

console.log(parseInt('123.45')); // 123
console.log(parseInt('10px')); // 10（自動忽略非數(shù)字部分）
console.log(parseFloat('123.45px')); // 123.45

• 應用場景：處理用戶輸入的數(shù)字（如表單中的價格、數(shù)量）、提取樣式中的數(shù)值（如 px 轉(zhuǎn)數(shù)字）。

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

• 功能：
  • JSON.parse()：將 JSON 字符串轉(zhuǎn)為 JS 對象 / 數(shù)組；
  • JSON.stringify()：將 JS 對象 / 數(shù)組轉(zhuǎn)為 JSON 字符串。
• 語法：

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

• 示例：

// 1. JSON字符串轉(zhuǎn)對象
const jsonStr = '{"name":"張三","age":20}';
const user = JSON.parse(jsonStr);
console.log(user.name); // '張三'
// 2. 對象轉(zhuǎn)JSON字符串（用于本地存儲/接口傳參）
const userObj = { name: '李四', age: 25 };
const str = JSON.stringify(userObj);
localStorage.setItem('user', str); // 存入本地存儲

• 應用場景：本地存儲（localStorage/sessionStorage）、接口數(shù)據(jù)交互（前后端 JSON 格式傳輸）。

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

• 功能：
  • setTimeout()：延遲指定時間執(zhí)行一次回調(diào)函數(shù)；
  • setInterval()：每隔指定時間重復執(zhí)行回調(diào)函數(shù)。
• 語法：

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

• 應用場景：延遲加載、輪播圖、倒計時、定時刷新數(shù)據(jù)。

總結(jié)

1. 數(shù)組函數(shù)：forEach（遍歷）、map（映射）、filter（篩選）、reduce（聚合）是處理列表數(shù)據(jù)的核心，幾乎覆蓋 80% 的數(shù)組操作場景；
2. 字符串函數(shù)：trim（去空格）、split（分割）、slice（截?。?code>replace（替換）是處理文本輸入 / 輸出的高頻函數(shù)；
3. 對象 / 通用函數(shù)：Object.keys/values（遍歷對象）、JSON.parse/stringify（JSON 處理）、parseInt（類型轉(zhuǎn)換）是前端數(shù)據(jù)處理的基礎，必須掌握。

到此這篇關于前端開發(fā)常用的js內(nèi)置函數(shù)總結(jié)大全的文章就介紹到這了,更多相關前端js內(nèi)置函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論