1.對(duì)象合并

// 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}
// 支持無限制合并，但如果對(duì)象之間存在相同屬性，則后面屬性會(huì)覆蓋前面屬性。*請(qǐng)注意，這僅適用于淺層合并。


// 2?? Obj.assign()：可以把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象
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 }, 且 **目標(biāo)對(duì)象** 自身也會(huì)改變（也就是assign第一個(gè)對(duì)象）
console.log(o2); // { b: 2 } 不改變

// 備注：Object.assign() 拷貝的是屬性值。假如源對(duì)象的屬性值是一個(gè)指向?qū)ο蟮囊?，它也只拷貝那個(gè)引用值
// 備注：數(shù)組合并用 concat() 方法


// 3?? $.extend()

2.淺拷貝，深拷貝

/**
 * 此函數(shù)，可以完全生成一個(gè)新的拷貝對(duì)象，也可以將一個(gè)對(duì)象中的屬性拷貝到另一個(gè)對(duì)象中去
 * @parmas {Object} 需要被拷貝的對(duì)象
 * @parmas {Object} 可選，目標(biāo)對(duì)象，如果不填直接返回一個(gè)對(duì)象
 */

function deepClone(origin, target = {}) {

    // 循環(huán)遍歷對(duì)象的屬性
    for (key in origin) {
        
        let isType = Object.prototype.toString.call(origin[key])

        // 克隆對(duì)象類型
        if (isType === '[object Object]') {
            target[key] = {}
            deepClone(origin[key], target[key])
            continue
        }

        // 克隆數(shù)組類型
         if (isType === '[object Array]') {
            target[key] = []
            deepClone(origin[key], target[key])
            continue
        }

        // 克隆 Set 類型
      
        // 克隆 Map 類型

        // 克隆其他類型

        // 克隆基礎(chǔ)類型
        target[key] = origin[key]
    
    }

    return target
}

let zhu = {
  name: '朱昆鵬',
  technology: ['css', 'html', 'js'],
  girlfriend: {
    name: 'lyt'
  }
}

let zhuClone = deepClone(zhu) // zhuClone 內(nèi)容完全和 zhu 一樣

let zhuTest = { test: '測試' }
let zhuTestClone = deepClone(zhuTest, zhu) // zhuTestClone 不僅有 zhu所有內(nèi)容，還有 zhuTest 的內(nèi)容



// JSON.parse(JSON.stringify(obj) 方法進(jìn)行拷貝，了解就行
const obj = {
  name:'axuebin',
  sayHello:function(){
    console.log('Hello World');
  }
}
console.log(JSON.parse(JSON.stringify(obj)); // {name: "axuebin"} ???
// undefined、function、symbol 會(huì)在轉(zhuǎn)換過程中被忽略，所以就不能用這個(gè)方法進(jìn)行深拷貝


// 淺拷貝
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 ? [] : {}; // 判斷復(fù)制的目標(biāo)是數(shù)組還是對(duì)象
  for (let keys in source) { // 遍歷目標(biāo)
    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.判斷對(duì)象是否為空對(duì)象

// 參考：https://www.cnblogs.com/HKCC/p/6083575.html

if (JSON.stringify(對(duì)象) === '{}') {
  console.log('空');
}

5.判斷對(duì)象中屬性的個(gè)數(shù)

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)) {  // 建議加上判斷,如果沒有擴(kuò)展對(duì)象屬性可以不加
            count++;
        }
    }
    return count;
}

attributeCount(obj) // 2

6.JS 對(duì)象轉(zhuǎn) 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.對(duì)象遍歷

let objs = {
    1: {
        name: '朱昆鵬'
    },
    2: {
        name: '林雨桐'
    }
}

Object.keys(objs).forEach( ket => {
  console.log(key,objs[key])
})

// 1 {name: '朱昆鵬'} 2 {nama:'林雨桐'}