JS对象方法速查

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:'林雨桐'}