JavaScript中处理数组、对象等特殊类型的操作汇总

 更新时间:2025年10月22日 09:06:40   作者:慧一居士  
JavaScript 提供了丰富的内置方法和技巧来处理数组,对象及其他特殊类型,以下是一些常见的操作汇总,希望对大家有一定的帮助

JavaScript 提供了丰富的内置方法和技巧来处理数组、对象及其他特殊类型(如 nullundefined、日期等)。以下是常见的操作汇总,按类别整理并附示例代码:

一、数组操作

1.创建与初始化

let arr = []; // 空数组
let nums = [1, 2, 3];          // 直接赋值
let cloned = original.slice(); // 浅拷贝(也可用扩展运算符:[...original])

2.增删改查基础方法

功能方法示例
末尾添加元素push()arr.push(5); → [1,2,3,5]
开头插入元素unshift()arr.unshift(0); → [0,1,2,3]
删除末尾项pop()let last = arr.pop();
删除首项shift()let first = arr.shift();
查找索引indexOf(), lastIndexOf()arr.indexOf(2); //=> 1
是否包含includes() (ES6+)arr.includes(2); //=> true
拼接数组concat() or spread operator (...)arr.concat([4,5]); ↔ [...arr,4,5]
截取子串slice(startIdx, endIdx) (不修改原数组), splice(start, deleteCount, addItems...) (会修改原数组)slice(1,3)→返回新数组;splice(1,1,99)→替换第二个元素为99

3.高阶函数式编程

迭代类:

forEach((item, index, array) => {...}) → 无返回值,纯执行副作用

map() → 生成新数组,对每个元素进行处理后返回结果集

const doubled = nums.map(n => n * 2); // [2,4,6]

filter() → 根据条件筛选符合条件的项组成新数组

const evens = nums.filter(n => n % 2 === 0); // [2] if nums=[1,2,3]

reduce((accumulator, currentValue) => {}, initialValue) → 累加器模式,常用于求和/积等聚合计算

const sum = nums.reduce((sum, cur) => sum + cur, 0); // 1+2+3=6

some() / every() → 判断是否存在至少一个真值 / 是否全部为真

boolArray.some(Boolean); // 是否有至少一个true?

扁平化多维数组:

const deepNested = [1, [2, [3, 4]]];
const flatted = deepNested.flat(Infinity); // ES2019+: [1,2,3,4]
// 兼容旧环境可用递归实现:
function myFlat(arr) {
  return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? myFlat(val) : val), []);
}

4.去重 & 排序

// Set去重法(最简单高效)
const uniqueSet = [...new Set(arr)];

// 或使用filter手动实现:
const uniqueFiltered = arr.filter((elem, i, self) => self.indexOf(elem) === i);

// 排序(默认按字符串Unicode码点排序):
arr.sort((a, b) => a - b);      // 升序数字排序
arr.sort((a, b) => b - a);      // 降序数字排序
arr.sort((a, b) => String(b).localeCompare(String(a))); // 本地化字符串排序

5.其他实用工具方法

方法作用备注
join(separator)将数组转为字符串并用分隔符合并['a','b'].join('-') => 'a-b'
reverse()反转数组顺序(原地修改!)慎用!会改变原数组
fill(value)填充整个数组为指定值arr.fill(0).toString();
find()返回第一个满足条件的单项类似some但返回元素本身而非bool
entries()/keys()/values()获取迭代器遍历键值对/键名/值配合for…of循环使用

二、对象操作

1.增删改查属性

obj.newProp = "value";               // 新增或覆盖已有属性
delete obj.oldProp;                  // 删除属性
Object.defineProperty(obj, 'dynProp', { // 精准控制配置项(如只读、可枚举性等)
  value: 42,
  writable: false,
  enumerable: true
});

2.合并多个对象

方式①:展开运算符 + Rest参数组合

const merged = { ...objA, ...objB }; // 后者优先级高于前者(冲突时覆盖)

方式②:Object.assign()

Object.assign({}, defaultConfig, userSettings); // 深度合并不可行!仅浅层覆盖

注意:两者均为浅拷贝,深层嵌套需递归处理。

3.遍历对象的键值对

现代语法推荐使用以下三种之一:

// for...in循环所有可枚举自有属性(包括继承自原型链上的!除非hasOwn检查)
for (const key in obj) {
  if (obj.hasOwnProperty(key)) { /* 确保只处理自身属性 */ }
}

// Object.keys()/values()/entries()获取有序数组形式的结果
console.log(Object.keys(obj));      // ["name", "age"]
console.log(Object.entries(obj));   // [["name","John"], ["age",30]]

// Reflect API更安全地替代传统方法:
Reflect.ownKeys(obj);              // 包括Symbol类型的所有自有成员
Reflect.get(targetObj, propName);  // 替代 targetObj[propName]

4.检测存在性与类型判断

避免直接用 if (obj[prop]) 因为可能发生假值误判(如0、空字符串也是有效值),应该这样写:

if ('prop' in obj) { /* 存在于对象中(无论是否是自身还是原型链上的)*/ }
if (obj.hasOwnProperty('prop')) { /* 仅限于对象自身的属性 */ }
// ES6新增更简洁写法:
if (Object.prototype.hasOwnProperty.call(obj, 'prop')) { ... }

5.冻结对象防止修改

const frozenObj = Object.freeze(originalObj); // 使其不可变,尝试修改会静默失败(严格模式下抛出错误)

反向操作可用 Object.isFrozen(obj) 检测是否已被冻结。

三、特殊类型处理技巧

1.null vs undefined

区别null代表有意设置的空引用;undefined表示变量从未赋值过。

安全访问嵌套结构(可选链操作符 ?.):

const street = user?.address?.street; // 如果中间某个环节不存在则返回undefined而不是报错

默认值兜底模式

const name = user && user.nickname || 'Anonymous'; // 经典写法但有坑(见注¹)
// 更可靠的方式:
const displayName = user?.nickname ?? 'Anonymous'; // 空值合并运算符(Nullish Coalescing)只在左侧为null/undefined时生效

注¹:当用户存在但昵称恰好是false/0/""时,上面的经典写法会得到错误结果!因此推荐使用??代替||作为默认值回退逻辑。

2.日期与时间格式化

原生API较为繁琐,建议封装工具函数:

function formatDate(dateStr, formatTemplate = 'YYYY-MM-DD hh:mm:ss') {
  const d = new Date(dateStr);
  const padZero = (num) => num.toString().padStart(2, '0');
  return formatTemplate
    .replace('YYYY', d.getFullYear())
    .replace('MM', padZero(d.getMonth() + 1))
    .replace('DD', padZero(d.getDate()))
    .replace('hh', padZero(d.getHours()))
    .replace('mm', padZero(d.getMinutes()))
    .replace('ss', padZero(d.getSeconds()));
}
// 使用示例:formatDate('2025-04-30T15:30:00Z'); → "2025-04-30 15:30:00"

高级场景推荐第三方库如 moment.js 或 date-fns。

3.JSON序列化陷阱应对

某些特殊值无法直接被JSON.stringify正常处理:

数据类型JSON输出结果解决方案
BigIntTypeError.toString()转换
Functionundefined排除或转成函数名字符串
Symbolignored同上
Map/Setconverted to plain object自定义解析规则
Circular Refsfail with stack overflow手工打破循环引用

示例修复方案:

const dataWithCycle = { self: null };
dataWithCycle.self = dataWithCycle; // 形成环形引用

const safeData = JSON.parse(JSON.stringify(dataWithCycle, replacer));
function replacer(key, value) {
  if (value === dataWithCycle) return '[Circular]'; // 特殊标记处理
  return value;
}

四、综合实践建议

  • 优先选用现代语法特性:如展开运算符、箭头函数、可选链、空值合并等,使代码更简洁易读。
  • 警惕副作用:许多数组方法(如splice, reverse, sort)会修改原数组,如需保持纯粹性应先复制一份再操作。
  • 性能考量:大数据量时尽量避免在循环内部频繁调用高复杂度的方法(如多次调用includes导致O(n²)复杂度),考虑改用Set进行存在性检测以降低复杂度至O(1)。
  • 类型安全边际保护:即使JS是弱类型语言,也应尽量保证变量符合预期的类型范围,例如通过TypeScript强类型注解或运行时校验库(如io-ts)。

掌握这些核心技能后,你可以高效处理绝大多数JS开发中的数据处理需求。遇到复杂场景时,建议查阅MDN官方文档或源码实现原理。

到此这篇关于JavaScript中处理数组、对象等特殊类型的操作汇总的文章就介绍到这了,更多相关JavaScript处理数组与对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • layer.open 子页面弹出层向父页面传输数据的例子

    layer.open 子页面弹出层向父页面传输数据的例子

    今天小编就为大家分享一篇layer.open 子页面弹出层向父页面传输数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 一行代码实现纯数据json对象的深度克隆实现思路

    一行代码实现纯数据json对象的深度克隆实现思路

    今天整理了下资料,分析下为什么一句话可以实现纯数据json对象的深度克隆,感兴趣的朋友可以了解下哦
    2013-01-01
  • javascript实现设置、获取和删除Cookie的方法

    javascript实现设置、获取和删除Cookie的方法

    这篇文章主要介绍了javascript实现设置、获取和删除Cookie的方法,涉及javascript操作cookie的常用技巧,非常简单实用,需要的朋友可以参考下
    2015-06-06
  • 微信小程序云开发使用方法新手初体验

    微信小程序云开发使用方法新手初体验

    微信小程序云开发使用方法新手初体验,开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 微信小程序分包加载代码实现方法详解

    微信小程序分包加载代码实现方法详解

    这篇文章主要介绍了微信小程序分包加载代码实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 28个JS常用数组方法总结

    28个JS常用数组方法总结

    最近面试有道题是至少写出 15 个数组方法,数组方法平时经常用到的也就6-7个,突然要一下子写出15个,还是有点卡壳了,今天整理一波,需要的可以参考一下
    2022-05-05
  • JavaScript实现左右滚动电影画布

    JavaScript实现左右滚动电影画布

    这篇文章主要为大家详细介绍了JavaScript实现左右滚动电影画布,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • javascript动态生成表格详解

    javascript动态生成表格详解

    这篇文章主要介绍了JavaScript动态生成表格的示例,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-10-10
  • js根据日期判断星座的示例代码

    js根据日期判断星座的示例代码

    本篇文章主要是对js根据日期判断星座的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • UniApp开发H5接入微信登录的全过程

    UniApp开发H5接入微信登录的全过程

    uni-app是一个使用Vue.js开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于UniApp开发H5接入微信登录的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论