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

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

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

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

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

// 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 }

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

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

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

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

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'

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'

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','男']]

// 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); // '张三'（原对象不受影响）

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

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); // 存入本地存储

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