🔥 前言
在现代Web开发中，JavaScript已经成为不可或缺的编程语言。无论是前端开发还是后端服务，JavaScript都扮演着重要角色。为了帮助开发者更高效地使用JavaScript，本文将为您提供一个全面、系统的JavaScript方法参考，涵盖数组操作、对象处理、DOM与BOM接口、时间处理、函数应用、正则表达式等多个方面。无论您是初学者还是资深开发者，这里都有您需要的实用技巧和代码示例！💻✨
👫 对象处理
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: '鑫总'}
🌲 更多文章
- 【VScode】中文版ChatGPT编程工具-CodeMoss！教程+示例+快捷键
- 【VScode】VSCode中的智能编程利器，全面揭秘ChatMoss & ChatGPT中文版
📝 结尾
以上内容涵盖了常用的JavaScript方法与技巧，希望对大家在日常开发中有所帮助。掌握这些方法将使您的开发工作更加高效和顺畅。如果您有更好的方法或建议，欢迎在评论区交流！让我们一起提升JavaScript的使用技巧，共同进步！💪😊