一文盘点JavaScript中常用的数据处理方法

const arr = [1, 2, 3];        // 字面量创建数组
const arr2 = new Array(5).fill(0); // 创建长度为5的数组，并填充0

arr.push(4);      // push(value): 向数组末尾添加元素，参数是要添加的值
arr.pop();        // pop(): 删除数组最后一个元素，返回被删除的值
arr.unshift(0);   // unshift(value): 向数组开头添加元素
arr.shift();      // shift(): 删除数组第一个元素
arr.splice(1,1,'a'); 
// splice(start, deleteCount, item1,...): 从start开始删除deleteCount个，并插入新元素

arr.slice(1,3);    // slice(start,end): 截取数组，不影响原数组
arr.concat([4,5]); // concat(array): 合并数组，返回新数组

arr.forEach((item,index)=>{}); 
// forEach(callback): 遍历数组，参数是回调函数(item,index,array)

arr.map(item=>item*2); 
// map(callback): 映射数组，返回新数组

arr.filter(item=>item>1); 
// filter(callback): 过滤满足条件的元素

arr.reduce((acc,cur)=>acc+cur,0); 
// reduce(callback, init): 累加器，acc为累计值，cur当前值，init为初始值

arr.includes(2);   // includes(value): 判断是否包含某值
arr.indexOf(2);    // indexOf(value): 返回第一次出现的索引
arr.find(item=>item>1); // find(callback): 返回第一个满足条件的值
arr.findIndex(item=>item>1); // findIndex: 返回索引

arr.sort((a,b)=>a-b); // sort(compareFn): 排序，参数是比较函数
arr.reverse();        // reverse(): 反转数组
arr.every(item=>item>0); // every(callback): 是否全部满足条件
arr.some(item=>item>2);  // some(callback): 是否至少一个满足

arr.flat();          // flat(depth): 数组扁平化
arr.flatMap(fn);     // flatMap(fn): map后扁平化
Array.from(iterable); // 将类数组或可迭代对象转为数组
Array.isArray(obj);   // 判断是否数组

str.length;             // 获取字符串长度
str.charAt(1);           // charAt(index): 获取指定索引字符
str.substring(1,4);      // substring(start,end): 截取字符串
str.slice(1,4);           // slice(start,end): 截取字符串
str.split(' ');           // split(separator): 分割字符串为数组
str.replace('a','b');     // replace(old,new): 替换字符串

str.toLowerCase(); // 转小写
str.toUpperCase(); // 转大写
str.trim();         // 去除首尾空格

str.indexOf('a');   // 返回首次出现位置
str.lastIndexOf('a'); // 返回最后出现位置
str.includes('a');  // 是否包含
str.startsWith('He'); // 是否以某字符串开头
str.endsWith('ld');   // 是否以某字符串结尾

str.repeat(2);          // repeat(count): 重复字符串
str.padStart(10,'0');   // padStart(len,str): 左侧填充
str.padEnd(10,'0');     // padEnd(len,str): 右侧填充

str.match(/a/g);     // match(reg): 返回匹配结果数组
str.search(/a/);     // search(reg): 返回匹配索引
str.localeCompare('b'); // 比较字符串

Object.keys(obj);   // 返回对象key数组
Object.values(obj); // 返回对象value数组
Object.entries(obj);// 返回[key,value]数组

Object.assign({}, obj); // assign(target,...sources): 合并对象
const newObj = { ...obj }; // 扩展运算符浅拷贝

Object.freeze(obj); // 冻结对象，不可修改
Object.seal(obj);   // 密封对象，可改值不可增删

Object.fromEntries(arr); // entries数组转对象
Object.hasOwn(obj,'a');  // 判断自身属性

const now = new Date(); // 创建日期对象

now.getFullYear(); // 年
now.getMonth();    // 月(0-11)
now.getDate();     // 日
now.getDay();      // 星期
now.getHours();    // 时
now.getMinutes();  // 分
now.getSeconds();  // 秒
now.getTime();     // 时间戳(ms)

now.setFullYear(2025); // 设置年份
now.setMonth(11);       // 设置月份

now.toISOString();     // ISO格式
now.toLocaleString();   // 本地格式
Date.now();              // 当前时间戳

Math.PI;          // 圆周率
Math.abs(-5);     // 绝对值
Math.ceil(4.1);   // 向上取整
Math.floor(4.9);  // 向下取整
Math.round(4.5);  // 四舍五入
Math.max(1,2,3);  // 最大值
Math.min(1,2,3);  // 最小值
Math.random();    // 0-1随机数
Math.sqrt(9);     // 开平方
Math.pow(2,3);    // 幂运算
Math.trunc(4.9);  // 去小数

new Promise((resolve,reject)=>{}); 
// Promise构造函数，resolve成功回调，reject失败回调

async function f() { await fetch(); }
// async声明异步函数，await等待Promise结果

setTimeout(fn,1000); // 延迟执行
setInterval(fn,1000); // 定时循环
clearInterval(id);    // 清除定时器

document.querySelector('.a'); // 选择DOM元素
node.appendChild(child);       // 添加子节点
node.removeChild(child);        // 删除子节点

localStorage.setItem('k','v');  // 本地存储
sessionStorage.getItem('k');    // 会话存储

location.href;                  // 当前URL
history.pushState();             // 修改历史记录
navigator.userAgent;              // 浏览器信息

const map = new Map();
map.set('k','v'); // 设置键值
map.get('k');     // 获取
map.has('k');     // 判断

const set = new Set();
set.add(1);       // 添加
set.has(1);       // 判断

typeof obj;                     // 基础类型判断
obj instanceof Array;           // 原型链判断
Object.prototype.toString.call(obj); // 精确类型判断

Number('123'); // 转数字
String(123);   // 转字符串
Boolean(0);    // 转布尔
parseInt('10px'); // 转整数
parseFloat('3.14'); // 转浮点

JSON.stringify(obj); // 对象转JSON字符串
JSON.parse(str);      // JSON字符串转对象

fn.call(obj,a,b);   // call(this, args): 改变this并传参
fn.apply(obj,[a,b]); // apply(this, [args]): 参数数组形式
fn.bind(obj);         // bind(this): 返回新函数

[...new Set(arr)]; // 数组去重
arr.flat(Infinity); // 扁平数组
structuredClone(obj); // 深拷贝