ES6語法之--物件的拓展，深拷貝和淺拷貝

ES6語法篇(1)

物件的拓展

    // key 和 value的 名字是一樣的，可以簡寫 
    let name = "毛毛";
    const obj = { name };

    // TODO  屬性名運算式
    // 變數的值作為key
    let s = 'mao';
    const o1 = {
      [s]: '毛毛'
    }
    console.log(o1);
    s = 'aa';
    console.log(o1);

    // 物件方法的簡寫
    let o2 = {
      // 方法盡量不要使用箭頭函式
      // 除非是為了this的指向就是定義時的作用域
      study() {
        console.log('我是簡寫');
      }
    };
    o2.study();

    // == 和 === 的區別
    // == 只會判斷值是否相等
    // === 還會判斷型別是否相等 嚴格相等
    console.log(2 == '2'); // true
    console.log(2 === '2'); // false
    // 使用 Object.js(變數1，變數2) 進行判斷變數是否相等，和 === 一樣
    console.log(Object.is(2, '2'));// false
    // Object.is() 還可以判斷 NaN是否相等 ===則不行
    console.log(NaN == NaN, NaN === NaN, Object.is(NaN, NaN));
    console.log(Object.is(+0, -0)); // false
    // 物件比較的是記憶體地址
    console.log({} == {}, {} === {}, Object.is({}, {})); // false

    let x = {
      a: 3,
      b: 4
    }
    // 物件的拓展
    let y = { ...x };
    console.log(y, x); // 屬性和值都相等

    // 也可以使用 Object.assign() 進行物件屬性的合并
    // 引數一：目標物件，引數二：源物件
    // 將源物件的屬性合并到目標物件上，源物件不變
    let z = {};
    // 如果屬性相等則會覆寫，不同屬性則合并到目標物件上
    Object.assign(z, x);
    console.log(z, x);
    // 可以使用 in運算子，判斷某個屬性是否在物件上
    // for(let i in x) console.log(i); // 遍歷物件的屬性
    console.log('a' in x, 'aa' in x); // true false

    // in 運算子 還可以判斷陣列下標位置元素是否存在
    let arr = [1, 2, 3, 4];

    console.log(3 in arr, 4 in arr);// TODO 判斷的是下標

    // Object.keys(物件) 拿到這個物件所有的鍵組成的陣列
    Object.keys(x).forEach(key => console.log(key));

    // Object.getOwnPropertyNames(物件) 拿到物件的自己身上的屬性
    Object.getOwnPropertyNames(x).forEach(key=>console.log(key))

    // Reflect.ownKeys(物件) 拿到物件身上的屬性名
    Reflect.ownKeys(x).forEach(key=>console.log(key))

深拷貝和淺拷貝

// 深拷貝和淺拷貝
// 如何把一個物件復制給另一個物件
const obj = {
  name: "毛毛",
  age: 21,
  gender: "男",
  friend: {
    name: 'zhang'
  }
}; //?

// 方法一： Object.assign()
const tar1 = {};
Object.assign(tar1, obj);//?
// 修改目標物件的 friend屬性
tar1.friend.name = 'ttt';//?
console.log(obj.friend);//可以看見源物件的friend屬性也發生了改變
// 所以 assign方法只使用于淺拷貝
// 對于參考資料型別，直接復制了地址
console.log(obj.friend === tar1.friend);

// TODO  當然 JSON 不支持方法的拷貝
// 可以使用 JSON.stringify 和 JSON.parse 兩個方法完成深拷貝
let tar2 = JSON.stringify(obj);//?
tar2 = JSON.parse(tar2);//?

tar2.friend.name = '222';
console.log(tar2.friend, obj.friend);

// 這兩個屬性指向的地址不同了
console.log(tar2.friend === obj.friend);



// TODO  實作一個深拷貝函式 不包含函式
/**
 *檢查資料型別的函式
 *
 * @param {*} data
 * @returns 回傳資料的型別
 */
const checkType = data => {
  // type判斷資料型別 只能判斷基本資料型別

  // 所以我們一般通過toString轉換以后再來判斷資料型別
  // console.log(Object.prototype.toString.call(data));// [object String]
  // 轉換以后進行截取
  return Object.prototype.toString.call(data).slice(8, -1);
}
checkType(1);//?
/**
 *
 * 進行深拷貝的函式
 * @param {*} target 源物件，用來進行拷貝
 * @returns 回傳拷貝完成的物件
 */
const deepClone = target => {
  // 判斷物件型別
  const targetType = checkType(target);
  // 回傳拷貝后的物件
  let result;
  if (targetType === "Object") {
    // 物件型別
    result = {};
  } else if (targetType === "Array") {
    // 陣列型別
    result = [];
  } else {
    // 基本資料型別 直接回傳即可
    return target;
  }
  // 遞回拷貝
  for (let i in target) {
    // 物件和陣列 都使用
    let value = target[i];
    let valueType = checkType(value);
    if (valueType === "Object" || valueType === "Array") {
      result[i] = deepClone(value);
    }else{
      result[i] = value;
    }
  }
  // 回傳深拷貝完成后的物件
  return result;
}
const source = [1,2,{name:"毛"}];//?
const arr = deepClone(source);//?
console.log(arr[2] === source[2]);// 不相等 完成了深拷貝了