JavaScript操作数组、字符串、对象的一些方法

注：纯手打，如有错误欢迎评论区交流！
转载请注明出处：https://blog.youkuaiyun.com/testleaf/article/details/148473785
编写此文是为了更好地学习前端知识，如果损害了有关人的利益，请联系删除！
本文章将不定时更新，敬请期待！！！
欢迎点赞、收藏、转发、关注，多谢！！！

一、数组

1、查找元素

方法	返回值	是否修改原数组	特点	示例
find(callback)	第一个匹配的元素	❌	适合复杂条件	arr.find(x => x > 2) → 3
findIndex(callback)	第一个匹配的索引	❌	找不到返回 -1	arr.findIndex(x => x === 2) → 1
indexOf(value)	值的第一个索引（严格匹配）	❌	简单值查找	[1, 2, 2].indexOf(2) → 1
filter(callback)	所有匹配的元素数组	❌	最常用	arr.filter(x => x % 2 === 0) → [2, 4]
some(callback)	true/false（至少一个匹配）	❌	快速验证	arr.some(x => x < 0) → false
every(callback)	true/false（全部匹配）	❌	严格检查	arr.every(x => x > 0) → true

组合使用​​：

// 查找所有偶数的索引
const arr = [1, 2, 3, 4];
const evenIndices = arr
  .map((item, index) => ({ item, index }))
  .filter(({ item }) => item % 2 === 0)
  .map(({ index }) => index); // [1, 3]

2、增删/修改数组​

方法	返回值	是否修改原数组	特点
push(...items)	新长度	✅	尾部添加
pop()	删除的末尾元素	✅	栈操作（后进先出）
unshift(...items)	新长度	✅	头部添加（性能低）
shift()	删除的头部元素	✅	队列操作（先进先出）
splice(start, deleteCount, ...items)	被删除的数组	✅	万能增删改
concat(...arrays)	合并后的新数组	❌	合并数组（或扩展运算符 ...）

组合使用​​：

// 删除第一个负数，并在其位置插入 0
const numbers = [1, -2, 3];
const negIndex = numbers.findIndex(x => x < 0);
if (negIndex !== -1) {
  numbers.splice(negIndex, 1, 0); // [1, 0, 3]
}

3、遍历/转换数组​

方法	返回值	是否修改原数组	特点
map(callback)	新数组（逐个转换）	❌	数据映射
forEach(callback)	undefined	❌	单纯遍历（无法中断）
reduce(callback, initialValue)	累计结果	❌	求和、分组等复杂操作
slice(start, end)	浅拷贝的子数组	❌	截取部分（原数组不变）
join(separator)	拼接的字符串	❌	默认逗号分隔

组合使用​​：

// 将对象数组转为键值对映射
const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const userMap = users.reduce((acc, user) => {
  acc[user.id] = user.name;
  return acc;
}, {}); // {1: 'Alice', 2: 'Bob'}

4、其他实用方法​

方法	返回值	是否修改原数组	特点
length	数组长度（可写）	✅（修改长度）	清空数组：arr.length = 0
at(index)	指定位置的元素	❌	支持负数索引（arr.at(-1)），ES2022新增​
reverse()	反转后的数组	✅	直接修改原数组
sort(callback)	排序后的数组	✅	需自定义比较函数

// 获取数组最后三个元素的字符串
const arr = [1, 2, 3, 4, 5];
const lastThree = arr.slice(-3).join('|'); // "3|4|5"

5、总结对比表​

场景	推荐方法	避免场景
查找所有匹配项	filter + map（组合索引和值）	手动 for 循环
快速增删首尾元素	push/pop/shift/unshift	大量数据时用 splice
不可变数据转换	map/filter/slice/concat	直接修改原数组
复杂聚合操作	reduce	多层嵌套循环

终极组合示例​：

// 案例：从数组中提取所有大于2的偶数，并统计它们的总和
const arr = [1, 2, 3, 4, 5, 6];

const result = arr
  .filter(x => x > 2 && x % 2 === 0) // [4, 6]
  .reduce((sum, num) => sum + num, 0); // 10

// 或者一行解决：
const total = arr.reduce((sum, x) => (x > 2 && x % 2 === 0) ? sum + x : sum, 0);

二、字符串

1、查找和截取​

方法	返回值	是否修改原字符串	特点	示例
indexOf(searchStr)	子串首次出现的索引	❌	区分大小写，未找到返回 -1	'abc'.indexOf('b') → 1
lastIndexOf(searchStr)	子串最后一次出现的索引	❌	从后向前搜索	'abcb'.lastIndexOf('b') → 3
includes(searchStr)	true/false	❌	检查是否包含子串	'abc'.includes('bc') → true
startsWith(searchStr)	true/false	❌	检查是否以子串开头	'abc'.startsWith('ab') → true
endsWith(searchStr)	true/false	❌	检查是否以子串结尾	'abc'.endsWith('bc') → true
slice(start, end)	截取的子串	❌	支持负数索引（类似数组）	'abcde'.slice(1, 3) → 'bc'
substring(start, end)	截取的子串	❌	负数视为 0，自动交换参数	'abcde'.substring(2, 4) → 'cd'

组合使用​​：

// 提取文件名（不含扩展名）
const filename = 'file.txt';
const name = filename.slice(0, filename.lastIndexOf('.')); // 'file'

2、分割和拼接​

方法	返回值	是否修改原字符串	特点
split(separator)	分割后的数组	❌	按分隔符拆分字符串
concat(str1, str2)	拼接后的新字符串	❌	等同于 + 运算符
repeat(count)	重复拼接的新字符串	❌	重复指定次数

示例​​：

const str = 'a,b,c';
const arr = str.split(','); // ['a', 'b', 'c']
const newStr = arr.join('-'); // 'a-b-c'（数组方法）
const repeated = 'na'.repeat(2); // 'nana'

3、替换和大小写转换​

方法	返回值	是否修改原字符串	特点
replace(searchStr, newStr)	替换后的新字符串	❌	仅替换第一个匹配项
replaceAll(searchStr, newStr)	替换所有匹配项	❌	需全局替换时使用
toLowerCase()	全小写字符串	❌	不改变原字符串
toUpperCase()	全大写字符串	❌	不改变原字符串
trim()	去除两端空格的字符串	❌	包括 \t、\n 等空白字符
trimStart()	去除头部空格的字符串	❌	ES2019 新增（别名：trimLeft）
trimEnd()	去除尾部空格的字符串	❌	ES2019 新增（别名：trimRight）

示例​​：

const text = ' Hello World ';
const cleaned = text.trim().toLowerCase(); // 'hello world'
const replaced = text.replace('World', 'JS'); // ' Hello JS '

4、正则表达式相关​

方法	返回值	是否修改原字符串	特点
match(regexp)	匹配结果的数组或 null	❌	提取符合正则的子串
search(regexp)	匹配到的索引或 -1	❌	类似 indexOf，支持正则

const email = 'test@example.com';
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); // true（验证邮箱格式）
const digits = 'a1b2c3'.match(/\d/g); // ['1', '2', '3']

5、其他实用方法​

方法	返回值	特点
at(index)	指定位置的字符	支持负数索引​​（ES2022新增）
charAt(index)	指定位置的字符	等同 str[index]
charCodeAt(index)	字符的 Unicode 编码	获取 ASCII 码
padStart(length, padStr)	头部填充到指定长度	常用于数字补零
padEnd(length, padStr)	尾部填充到指定长度	对齐文本

示例​​：

const num = '5';
const paddedNum = num.padStart(2, '0'); // '05'
const code = 'A'.charCodeAt(0); // 65

三、对象

1、属性操作​

方法/语法	返回值	特点	示例
Object.keys(obj)	所有可枚举属性的键数组	不包含 Symbol 属性	Object.keys({a:1}) → ['a']
Object.values(obj)	所有可枚举属性的值数组	ES2017 新增	Object.values({a:1}) → [1]
Object.entries(obj)	键值对数组（[key, value]）	适合转为 Map	Object.entries({a:1}) → [['a', 1]]
in 操作符	true/false	检查属性是否存在（包括原型链）	'a' in {a:1} → true
obj.hasOwnProperty(key)	true/false	只检查自身属性	{a:1}.hasOwnProperty('a') → true
Object.getOwnPropertyNames(obj)	所有自身属性（包括不可枚举）	不包含 Symbol	Object.getOwnPropertyNames(obj)

示例​​：

const user = { name: 'Alice', age: 25 };

// 获取键、值、键值对
const keys = Object.keys(user); // ['name', 'age']
const values = Object.values(user); // ['Alice', 25]
const entries = Object.entries(user); // [['name', 'Alice'], ['age', 25]]

// 检查属性
console.log('age' in user); // true（包括继承属性）
console.log(user.hasOwnProperty('toString')); // false（不继承）

2、对象合并与复制​

方法/语法	返回值	特点
Object.assign(target, ...sources)	合并后的对象	浅拷贝，覆盖同名属性
扩展运算符 {...obj}	新对象	浅拷贝，适合不可变操作
JSON.parse(JSON.stringify(obj))	深拷贝对象	丢失函数/Symbol，性能低

示例​​：

const obj1 = { a: 1 };
const obj2 = { b: 2 };

// 合并对象
const merged = Object.assign({}, obj1, obj2); // { a:1, b:2 }
const mergedWithSpread = { ...obj1, ...obj2 }; // { a:1, b:2 }（推荐）

// 深拷贝（慎用）
const deepCopy = JSON.parse(JSON.stringify(obj1));

3、属性描述符与冻结​

方法	返回值	特点
Object.getOwnPropertyDescriptor(obj, key)	属性描述符（可写/可枚举等）	查看属性配置
Object.defineProperty(obj, key, descriptor)	修改或定义属性	精确控制属性行为
Object.freeze(obj)	冻结对象	不可修改/删除属性（完全不可变）
Object.seal(obj)	密封对象	不能增删属性（但可修改现有属性）

示例​​：

const obj = { name: 'Alice' };

// 冻结对象
Object.freeze(obj);
obj.name = 'Bob'; // 静默失败（严格模式报错）

// 密封对象
Object.seal(obj);
delete obj.name; // 失败（严格模式报错）
obj.name = 'Bob'; // 允许修改

4、原型操作​

方法	返回值	特点
Object.create(proto)	以指定原型创建新对象	替代 __proto__
Object.getPrototypeOf(obj)	获取对象原型	替代 obj.__proto__
Object.setPrototypeOf(obj, proto)	设置对象原型	性能差，慎用

​​示例​​：

const parent = { greet() { return 'Hello'; } };
const child = Object.create(parent); // 继承 parent

console.log(Object.getPrototypeOf(child) === parent); // true
console.log(child.greet()); // 'Hello'

5、其他实用方法​

方法	返回值	特点
Object.fromEntries(entries)	将键值对数组转为对象	反转 Object.entries
Object.is(value1, value2)	严格比较两个值	比 === 更精确（NaN/+0/-0）

示例​​：

// 键值对数组 → 对象
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries); // { a:1, b:2 }

// 特殊比较
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0)); // false

6、总结对比表​

场景	推荐方法	注意事项
遍历属性	Object.keys()/Object.entries()	不包含不可枚举/Symbol 属性
合并对象	扩展运算符 {...obj}	浅拷贝（嵌套对象仍共享引用）
深拷贝	JSON.parse(JSON.stringify(obj))	丢失函数/Symbol/undefined 等特殊值
防止修改	Object.freeze()	不可逆操作
原型操作	Object.create()	避免使用非标准的 __proto__

终极组合示例​：

// 案例：合并两个对象，过滤掉空值，并冻结结果
const defaults = { theme: 'light', fontSize: 16 };
const userSettings = { theme: 'dark', fontSize: null };

const cleanSettings = Object.entries(userSettings).reduce((acc, [key, value]) => {
  if (value !== null && value !== undefined) acc[key] = value;
  return acc;
}, { ...defaults });

Object.freeze(cleanSettings); // { theme: 'dark', fontSize: 16 }（不可修改）