1.对象合并
// 1️⃣ ES6方法
let obj1 = {
a:1,
b:{
b1:2
}
}
let obj2 = { c:3, d:4 }
console.log({...obj1, ...obj2}) // {a: 1, b: {…}, c: 3, d: 4}
// 支持无限制合并，但如果对象之间存在相同属性，则后面属性会覆盖前面属性。*请注意，这仅适用于浅层合并。
// 2️⃣ Obj.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 }, 且 **目标对象** 自身也会改变（也就是assign第一个对象）
console.log(o2); // { b: 2 } 不改变
// 备注：Object.assign() 拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值
// 备注：数组合并用 concat() 方法
// 3️⃣ $.extend()
2.浅拷贝，深拷贝
/**
* 此函数，可以完全生成一个新的拷贝对象，也可以将一个对象中的属性拷贝到另一个对象中去
* @parmas {Object} 需要被拷贝的对象
* @parmas {Object} 可选，目标对象，如果不填直接返回一个对象
*/
function deepClone(origin, target = {}) {
// 循环遍历对象的属性
for (key in origin) {
let isType = Object.prototype.toString.call(origin[key])
// 克隆对象类型
if (isType === '[object Object]') {
target[key] = {}
deepClone(origin[key], target[key])
continue
}
// 克隆数组类型
if (isType === '[object Array]') {
target[key] = []
deepClone(origin[key], target[key])
continue
}
// 克隆 Set 类型
// 克隆 Map 类型
// 克隆其他类型
// 克隆基础类型
target[key] = origin[key]
}
return target
}
let zhu = {
name: '朱昆鹏',
technology: ['css', 'html', 'js'],
girlfriend: {
name: 'lyt'
}
}
let zhuClone = deepClone(zhu) // zhuClone 内容完全和 zhu 一样
let zhuTest = { test: '测试' }
let zhuTestClone = deepClone(zhuTest, zhu) // zhuTestClone 不仅有 zhu所有内容，还有 zhuTest 的内容
// JSON.parse(JSON.stringify(obj) 方法进行拷贝，了解就行
const obj = {
name:'axuebin',
sayHello:function(){
console.log('Hello World');
}
}
console.log(JSON.parse(JSON.stringify(obj)); // {name: "axuebin"} ???
// undefined、function、symbol 会在转换过程中被忽略，所以就不能用这个方法进行深拷贝
// 浅拷贝
function clone(origin, target = {}) {
let target = {};
for (const key in origin) {
target[key] = origin[key];
}
return target;
};
3.拓展：首层浅拷贝
function shallowClone(source) {
const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
for (let keys in source) { // 遍历目标
if (source.hasOwnProperty(keys)) {
targetObj[keys] = source[keys];
}
}
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:'surprise'}}
4.判断对象是否为空对象
// 参考：https://www.cnblogs.com/HKCC/p/6083575.html
if (JSON.stringify(对象) === '{}') {
console.log('空');
}
5.判断对象中属性的个数
let obj = {name: '朱昆鹏', age: 21}
// ES6
Object.keys(obj).length // 2
// ES5
let attributeCount = obj => {
let count = 0;
for(let i in obj) {
if(obj.hasOwnProperty(i)) { // 建议加上判断,如果没有扩展对象属性可以不加
count++;
}
}
return count;
}
attributeCount(obj) // 2
6.JS 对象转 url 查询字符串
const objectToQueryString = (obj) => Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');
objectToQueryString({name: 'Jhon', age: 18, address: 'beijing'})
// name=Jhon&age=18&address=beijing
7.对象遍历
let objs = {
1: {
name: '朱昆鹏'
},
2: {
name: '林雨桐'
}
}
Object.keys(objs).forEach( ket => {
console.log(key,objs[key])
})
// 1 {name: '朱昆鹏'} 2 {nama:'林雨桐'}
