【前端】JavaScript 方法速查大全-对象（二）

🔥 前言

在现代Web开发中，JavaScript已经成为不可或缺的编程语言。无论是前端开发还是后端服务，JavaScript都扮演着重要角色。为了帮助开发者更高效地使用JavaScript，本文将为您提供一个全面、系统的JavaScript方法参考，涵盖数组操作、对象处理、DOM与BOM接口、时间处理、函数应用、正则表达式等多个方面。无论您是初学者还是资深开发者，这里都有您需要的实用技巧和代码示例！💻✨

JavaScript 方法速查

👫 对象处理

1. 对象合并

在JavaScript中，合并对象是一个常见的需求。以下是两种常用的方法：

使用ES6的扩展运算符

// ES6 方法
let obj1 = { a: 1, b: { b1: 2 } };
let obj2 = { c: 3, d: 4 };
let mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // {a: 1, b: {…}, c: 3, d: 4}

使用 `Object.assign()`

// Object.assign()
let o1 = { a: 1 };
let o2 = { b: 2 };
let obj = Object.assign(o1, o2);
console.log(obj); // { a: 1, b: 2 }
console.log(o1); // { a: 1, b: 2 }
console.log(o2); // { b: 2 }// 备注：Object.assign() 进行的是浅拷贝

2. 浅拷贝与深拷贝

在处理对象时，了解浅拷贝与深拷贝的区别至关重要。

深拷贝（基础版）

function deepClone(origin, target = {}) {for (let key in origin) {if (origin.hasOwnProperty(key)) {let isType = Object.prototype.toString.call(origin[key]);if (isType === '[object Object]') {target[key] = {};deepClone(origin[key], target[key]);} else if (isType === '[object Array]') {target[key] = [];deepClone(origin[key], target[key]);} else {target[key] = origin[key];}}}return target;
}let zhu = {name: '千鑫',technology: ['css', 'html', 'js'],girlfriend: {name: 'lyt'}
};let zhuClone = deepClone(zhu);
console.log(zhuClone);

替代方法：JSON.parse(JSON.stringify(obj))（不支持函数、undefined、symbol等类型）

浅拷贝

function clone(origin, target = {}) {for (const key in origin) {if (origin.hasOwnProperty(key)) {target[key] = origin[key];}}return target;
}

3. 拓展：首层浅拷贝

function shallowClone(source) {const targetObj = Array.isArray(source) ? [] : {};for (let key in source) {if (source.hasOwnProperty(key)) {targetObj[key] = source[key];}}return targetObj;
}const originObj = {a: 'a',b: 'b',c: [1, 2, 3],d: { dd: 'dd' }
};const cloneObj = shallowClone(originObj);
console.log(cloneObj === originObj); // false
cloneObj.a = 'aa';
cloneObj.c = [1, 1, 1];
cloneObj.d.dd = 'surprise';console.log(cloneObj); // {a:'aa', b:'b', c:[1,1,1], d:{dd:'surprise'}}
console.log(originObj); // {a:'a', b:'b', c:[1,2,3], d:{dd:'dd'}}

4. 判断对象是否为空对象

let obj = {};
if (JSON.stringify(obj) === '{}') {console.log('空对象');
}

5. 判断对象中属性的个数

let obj = { name: '千鑫', age: 21 };// ES6
console.log(Object.keys(obj).length); // 2// ES5
function attributeCount(obj) {let count = 0;for(let key in obj) {if(obj.hasOwnProperty(key)) {count++;}}return count;
}
console.log(attributeCount(obj)); // 2

6. JS 对象转 URL 查询字符串

const objectToQueryString = (obj) => Object.keys(obj).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');console.log(objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'}));
// "name=Jhon&age=18&address=beijing"

7. 对象遍历

let objs = {1: { name: '千鑫' },2: { name: '鑫总' }
};Object.keys(objs).forEach(key => {console.log(key, objs[key]);
});
// 1 {name: '千鑫'} 
// 2 {name: '鑫总'}