欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中處理數(shù)組、對象等特殊類型的操作匯總

 更新時間：2025年10月22日 09:06:40   作者：慧一居士  
JavaScript 提供了豐富的內(nèi)置方法和技巧來處理數(shù)組,對象及其他特殊類型,以下是一些常見的操作匯總,希望對大家有一定的幫助

JavaScript 提供了豐富的內(nèi)置方法和技巧來處理數(shù)組、對象及其他特殊類型（如 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...) (會修改原數(shù)組)slice(1,3)→返回新數(shù)組；splice(1,1,99)→替換第二個元素為99

3.高階函數(shù)式編程

迭代類：

forEach((item, index, array) => {...}) → 無返回值，純執(zhí)行副作用

map() → 生成新數(shù)組，對每個元素進(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) → 累加器模式，常用于求和/積等聚合計算

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

some() / every() → 判斷是否存在至少一個真值 / 是否全部為真

boolArray.some(Boolean); // 是否有至少一個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去重法（最簡單高效）
const uniqueSet = [...new Set(arr)];

// 或使用filter手動實(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ù)組順序（原地修改?。?/td>慎用！會改變原數(shù)組
fill(value)填充整個數(shù)組為指定值arr.fill(0).toString();
find()返回第一個滿足條件的單項(xiàng)類似some但返回元素本身而非bool
entries()/keys()/values()獲取迭代器遍歷鍵值對/鍵名/值配合for…of循環(huán)使用

二、對象操作

1.增刪改查屬性

obj.newProp = "value";               // 新增或覆蓋已有屬性
delete obj.oldProp;                  // 刪除屬性
Object.defineProperty(obj, 'dynProp', { // 精準(zhǔn)控制配置項(xiàng)（如只讀、可枚舉性等）
  value: 42,
  writable: false,
  enumerable: true
});

2.合并多個對象

方式①：展開運(yùn)算符 + Rest參數(shù)組合

const merged = { ...objA, ...objB }; // 后者優(yōu)先級高于前者（沖突時覆蓋）

方式②：Object.assign()

Object.assign({}, defaultConfig, userSettings); // 深度合并不可行！僅淺層覆蓋

注意：兩者均為淺拷貝，深層嵌套需遞歸處理。

3.遍歷對象的鍵值對

現(xiàn)代語法推薦使用以下三種之一：

// 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.檢測存在性與類型判斷

避免直接用 if (obj[prop]) 因?yàn)榭赡馨l(fā)生假值誤判（如0、空字符串也是有效值），應(yīng)該這樣寫：

if ('prop' in obj) { /* 存在于對象中（無論是否是自身還是原型鏈上的）*/ }
if (obj.hasOwnProperty('prop')) { /* 僅限于對象自身的屬性 */ }
// ES6新增更簡潔寫法：
if (Object.prototype.hasOwnProperty.call(obj, 'prop')) { ... }

5.凍結(jié)對象防止修改

const frozenObj = Object.freeze(originalObj); // 使其不可變，嘗試修改會靜默失敗（嚴(yán)格模式下拋出錯誤）

反向操作可用 Object.isFrozen(obj) 檢測是否已被凍結(jié)。

三、特殊類型處理技巧

1.null vs undefined

區(qū)別：null代表有意設(shè)置的空引用；undefined表示變量從未賦值過。

安全訪問嵌套結(jié)構(gòu)（可選鏈操作符 ?.）：

const street = user?.address?.street; // 如果中間某個環(huán)節(jié)不存在則返回undefined而不是報錯

默認(rèn)值兜底模式：

const name = user && user.nickname || 'Anonymous'; // 經(jīng)典寫法但有坑（見注1）
// 更可靠的方式：
const displayName = user?.nickname ?? 'Anonymous'; // 空值合并運(yùn)算符(Nullish Coalescing)只在左側(cè)為null/undefined時生效

注¹：當(dāng)用戶存在但昵稱恰好是false/0/""時，上面的經(jīng)典寫法會得到錯誤結(jié)果！因此推薦使用??代替||作為默認(rèn)值回退邏輯。

2.日期與時間格式化

原生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"

高級場景推薦第三方庫如 moment.js 或 date-fns。

3.JSON序列化陷阱應(yīng)對

某些特殊值無法直接被JSON.stringify正常處理：

數(shù)據(jù)類型JSON輸出結(jié)果解決方案
BigIntTypeError.toString()轉(zhuǎn)換
Functionundefined排除或轉(zhuǎn)成函數(shù)名字符串
Symbolignored同上
Map/Setconverted to plain object自定義解析規(guī)則
Circular Refsfail 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ùn)算符、箭頭函數(shù)、可選鏈、空值合并等，使代碼更簡潔易讀。
  • 警惕副作用：許多數(shù)組方法（如splice, reverse, sort）會修改原數(shù)組，如需保持純粹性應(yīng)先復(fù)制一份再操作。
  • 性能考量：大數(shù)據(jù)量時盡量避免在循環(huán)內(nèi)部頻繁調(diào)用高復(fù)雜度的方法（如多次調(diào)用includes導(dǎo)致O(n²)復(fù)雜度），考慮改用Set進(jìn)行存在性檢測以降低復(fù)雜度至O(1)。
  • 類型安全邊際保護(hù)：即使JS是弱類型語言，也應(yīng)盡量保證變量符合預(yù)期的類型范圍，例如通過TypeScript強(qiáng)類型注解或運(yùn)行時校驗(yàn)庫（如io-ts）。

掌握這些核心技能后，你可以高效處理絕大多數(shù)JS開發(fā)中的數(shù)據(jù)處理需求。遇到復(fù)雜場景時，建議查閱MDN官方文檔或源碼實(shí)現(xiàn)原理。

到此這篇關(guān)于JavaScript中處理數(shù)組、對象等特殊類型的操作匯總的文章就介紹到這了,更多相關(guān)JavaScript處理數(shù)組與對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論