JavaScript中處理數(shù)組、對(duì)象等特殊類型的操作匯總
JavaScript 提供了豐富的內(nèi)置方法和技巧來(lái)處理數(shù)組、對(duì)象及其他特殊類型(如 null、undefined、日期等)。以下是常見的操作匯總,按類別整理并附示例代碼:
一、數(shù)組操作
1.創(chuàng)建與初始化
let arr = []; // 空數(shù)組 let nums = [1, 2, 3]; // 直接賦值 let cloned = original.slice(); // 淺拷貝(也可用擴(kuò)展運(yùn)算符:[...original])
2.增刪改查基礎(chǔ)方法
| 功能 | 方法 | 示例 |
|---|---|---|
| 末尾添加元素 | push() | arr.push(5); → [1,2,3,5] |
| 開頭插入元素 | unshift() | arr.unshift(0); → [0,1,2,3] |
| 刪除末尾項(xiàng) | pop() | let last = arr.pop(); |
| 刪除首項(xiàng) | shift() | let first = arr.shift(); |
| 查找索引 | indexOf(), lastIndexOf() | arr.indexOf(2); //=> 1 |
| 是否包含 | includes() (ES6+) | arr.includes(2); //=> true |
| 拼接數(shù)組 | concat() or spread operator (...) | arr.concat([4,5]); ↔ [...arr,4,5] |
| 截取子串 | slice(startIdx, endIdx) (不修改原數(shù)組), splice(start, deleteCount, addItems...) (會(huì)修改原數(shù)組) | slice(1,3)→返回新數(shù)組;splice(1,1,99)→替換第二個(gè)元素為99 |
3.高階函數(shù)式編程
迭代類:
forEach((item, index, array) => {...}) → 無(wú)返回值,純執(zhí)行副作用
map() → 生成新數(shù)組,對(duì)每個(gè)元素進(jìn)行處理后返回結(jié)果集
const doubled = nums.map(n => n * 2); // [2,4,6]
filter() → 根據(jù)條件篩選符合條件的項(xiàng)組成新數(shù)組
const evens = nums.filter(n => n % 2 === 0); // [2] if nums=[1,2,3]
reduce((accumulator, currentValue) => {}, initialValue) → 累加器模式,常用于求和/積等聚合計(jì)算
const sum = nums.reduce((sum, cur) => sum + cur, 0); // 1+2+3=6
some() / every() → 判斷是否存在至少一個(gè)真值 / 是否全部為真
boolArray.some(Boolean); // 是否有至少一個(gè)true?
扁平化多維數(shù)組:
const deepNested = [1, [2, [3, 4]]];
const flatted = deepNested.flat(Infinity); // ES2019+: [1,2,3,4]
// 兼容舊環(huán)境可用遞歸實(shí)現(xiàn):
function myFlat(arr) {
return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? myFlat(val) : val), []);
}
4.去重 & 排序
// Set去重法(最簡(jiǎn)單高效) const uniqueSet = [...new Set(arr)]; // 或使用filter手動(dòng)實(shí)現(xiàn): const uniqueFiltered = arr.filter((elem, i, self) => self.indexOf(elem) === i); // 排序(默認(rèn)按字符串Unicode碼點(diǎn)排序): arr.sort((a, b) => a - b); // 升序數(shù)字排序 arr.sort((a, b) => b - a); // 降序數(shù)字排序 arr.sort((a, b) => String(b).localeCompare(String(a))); // 本地化字符串排序
5.其他實(shí)用工具方法
| 方法 | 作用 | 備注 |
|---|---|---|
| join(separator) | 將數(shù)組轉(zhuǎn)為字符串并用分隔符合并 | ['a','b'].join('-') => 'a-b' |
| reverse() | 反轉(zhuǎn)數(shù)組順序(原地修改!) | 慎用!會(huì)改變?cè)瓟?shù)組 |
| fill(value) | 填充整個(gè)數(shù)組為指定值 | arr.fill(0).toString(); |
| find() | 返回第一個(gè)滿足條件的單項(xiàng) | 類似some但返回元素本身而非bool |
| entries()/keys()/values() | 獲取迭代器遍歷鍵值對(duì)/鍵名/值 | 配合for…of循環(huán)使用 |
二、對(duì)象操作
1.增刪改查屬性
obj.newProp = "value"; // 新增或覆蓋已有屬性
delete obj.oldProp; // 刪除屬性
Object.defineProperty(obj, 'dynProp', { // 精準(zhǔn)控制配置項(xiàng)(如只讀、可枚舉性等)
value: 42,
writable: false,
enumerable: true
});
2.合并多個(gè)對(duì)象
方式①:展開運(yùn)算符 + Rest參數(shù)組合
const merged = { ...objA, ...objB }; // 后者優(yōu)先級(jí)高于前者(沖突時(shí)覆蓋)
方式②:Object.assign()
Object.assign({}, defaultConfig, userSettings); // 深度合并不可行!僅淺層覆蓋
注意:兩者均為淺拷貝,深層嵌套需遞歸處理。
3.遍歷對(duì)象的鍵值對(duì)
現(xiàn)代語(yǔ)法推薦使用以下三種之一:
// for...in循環(huán)所有可枚舉自有屬性(包括繼承自原型鏈上的!除非hasOwn檢查)
for (const key in obj) {
if (obj.hasOwnProperty(key)) { /* 確保只處理自身屬性 */ }
}
// Object.keys()/values()/entries()獲取有序數(shù)組形式的結(jié)果
console.log(Object.keys(obj)); // ["name", "age"]
console.log(Object.entries(obj)); // [["name","John"], ["age",30]]
// Reflect API更安全地替代傳統(tǒng)方法:
Reflect.ownKeys(obj); // 包括Symbol類型的所有自有成員
Reflect.get(targetObj, propName); // 替代 targetObj[propName]
4.檢測(cè)存在性與類型判斷
避免直接用 if (obj[prop]) 因?yàn)榭赡馨l(fā)生假值誤判(如0、空字符串也是有效值),應(yīng)該這樣寫:
if ('prop' in obj) { /* 存在于對(duì)象中(無(wú)論是否是自身還是原型鏈上的)*/ }
if (obj.hasOwnProperty('prop')) { /* 僅限于對(duì)象自身的屬性 */ }
// ES6新增更簡(jiǎn)潔寫法:
if (Object.prototype.hasOwnProperty.call(obj, 'prop')) { ... }
5.凍結(jié)對(duì)象防止修改
const frozenObj = Object.freeze(originalObj); // 使其不可變,嘗試修改會(huì)靜默失?。▏?yán)格模式下拋出錯(cuò)誤)
反向操作可用 Object.isFrozen(obj) 檢測(cè)是否已被凍結(jié)。
三、特殊類型處理技巧
1.null vs undefined
區(qū)別:null代表有意設(shè)置的空引用;undefined表示變量從未賦值過。
安全訪問嵌套結(jié)構(gòu)(可選鏈操作符 ?.):
const street = user?.address?.street; // 如果中間某個(gè)環(huán)節(jié)不存在則返回undefined而不是報(bào)錯(cuò)
默認(rèn)值兜底模式:
const name = user && user.nickname || 'Anonymous'; // 經(jīng)典寫法但有坑(見注1) // 更可靠的方式: const displayName = user?.nickname ?? 'Anonymous'; // 空值合并運(yùn)算符(Nullish Coalescing)只在左側(cè)為null/undefined時(shí)生效
注¹:當(dāng)用戶存在但昵稱恰好是false/0/""時(shí),上面的經(jīng)典寫法會(huì)得到錯(cuò)誤結(jié)果!因此推薦使用??代替||作為默認(rèn)值回退邏輯。
2.日期與時(shí)間格式化
原生API較為繁瑣,建議封裝工具函數(shù):
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"
高級(jí)場(chǎng)景推薦第三方庫(kù)如 moment.js 或 date-fns。
3.JSON序列化陷阱應(yīng)對(duì)
某些特殊值無(wú)法直接被JSON.stringify正常處理:
| 數(shù)據(jù)類型 | JSON輸出結(jié)果 | 解決方案 |
|---|---|---|
| BigInt | TypeError | .toString()轉(zhuǎn)換 |
| Function | undefined | 排除或轉(zhuǎn)成函數(shù)名字符串 |
| Symbol | ignored | 同上 |
| Map/Set | converted to plain object | 自定義解析規(guī)則 |
| Circular Refs | fail with stack overflow | 手工打破循環(huán)引用 |
示例修復(fù)方案:
const dataWithCycle = { self: null };
dataWithCycle.self = dataWithCycle; // 形成環(huán)形引用
const safeData = JSON.parse(JSON.stringify(dataWithCycle, replacer));
function replacer(key, value) {
if (value === dataWithCycle) return '[Circular]'; // 特殊標(biāo)記處理
return value;
}
四、綜合實(shí)踐建議
- 優(yōu)先選用現(xiàn)代語(yǔ)法特性:如展開運(yùn)算符、箭頭函數(shù)、可選鏈、空值合并等,使代碼更簡(jiǎn)潔易讀。
- 警惕副作用:許多數(shù)組方法(如
splice,reverse,sort)會(huì)修改原數(shù)組,如需保持純粹性應(yīng)先復(fù)制一份再操作。 - 性能考量:大數(shù)據(jù)量時(shí)盡量避免在循環(huán)內(nèi)部頻繁調(diào)用高復(fù)雜度的方法(如多次調(diào)用
includes導(dǎo)致O(n²)復(fù)雜度),考慮改用Set進(jìn)行存在性檢測(cè)以降低復(fù)雜度至O(1)。 - 類型安全邊際保護(hù):即使JS是弱類型語(yǔ)言,也應(yīng)盡量保證變量符合預(yù)期的類型范圍,例如通過TypeScript強(qiáng)類型注解或運(yùn)行時(shí)校驗(yàn)庫(kù)(如io-ts)。
掌握這些核心技能后,你可以高效處理絕大多數(shù)JS開發(fā)中的數(shù)據(jù)處理需求。遇到復(fù)雜場(chǎng)景時(shí),建議查閱MDN官方文檔或源碼實(shí)現(xiàn)原理。
到此這篇關(guān)于JavaScript中處理數(shù)組、對(duì)象等特殊類型的操作匯總的文章就介紹到這了,更多相關(guān)JavaScript處理數(shù)組與對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
讓getElementsByName適應(yīng)IE和firefox的方法
讓getElementsByName適應(yīng)IE和firefox的方法...2007-09-09
JavaScript String 對(duì)象常用方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript String 對(duì)象常用方法總結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-04-04
JavaScript利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳即在文件上傳期間因?yàn)橐恍┰蚨鴮?dǎo)致上傳終止時(shí),下次再次上傳同一個(gè)文件就從上一次上傳到一半的地方繼續(xù)上傳,以節(jié)省上傳時(shí)間。本文將利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳功能,快來(lái)跟隨小編一起學(xué)一學(xué)吧2022-03-03
微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼
JS報(bào)錯(cuò)Uncaught?TypeError:?XXX?is?not?a?function的解決方法
phantomjs導(dǎo)出html到pdf的方法總結(jié)

