(精華)2020年7月3日 JavaScript高階篇 ES6(物件的擴充套件方法)

屬性的簡寫

const a = 'a';
const obj = {a}
// const obj = {a:a}
console.log(obj);

方法的簡寫

const o = {
    say(){
        return '我是chris'
    }
}
console.log(o.say());
// 誰用我我就指向誰
var name = '全域性'
const person = {
    name:'張三',
    say(){
        console.log(`我的名字是${this.name}`);
    }
}
person.say()
let res = person.say; // 全域性
res()

屬性名錶達式

let obj1 = {
    // 讓屬性和變數掛鉤
    [key]:true,
    ['o'+'b']:123,
    [`ok`]:456
}

console.log(obj1);

super 關鍵字

const proto = {
    foo:'土豆'
}

const oProto = {
    foo:'蕃茄',
    find(){
        return super.foo
    }
}

// proto 是 oProto的原型
Object.setPrototypeOf(oProto,proto) // __proto__
console.log(oProto.find()); // 

const oProto = {
    foo:super.foo
}

物件的擴充套件運算子 …

打包

// 打包
let {x,y:y,...z} = {x:1,y:2,a:3,b:4}
console.log(z);
//等號的右邊必須是一個物件 
let {...h} = undefined
let {...v} = null
//陣列的解構賦值 ... 有一個注意點 是...的位置
let {...z,x,y} = {x:1,y:2,a:3,b:4}

拆包

// 複製 淺拷貝 深拷貝
// 陣列的淺拷貝es5 用到的是什麼  concat
// 物件的擴充套件運算子 ...也是淺拷貝 
// 複製 
let obj = {a:1}
let obj1 = obj;
obj1.a = 2;
console.log(obj);
// 淺拷貝
let obj2 = {...obj}
obj2.a = 2;
console.log(obj);
// es5 實現淺拷貝 類比concat 
let person = {name:'張三',age:12}
let person2 = Object.assign({},person)
person2.name = '王五'
console.log(person);

let {a,b,...z} = {c:1,b:2,a:3,d:4}
console.log(z);
// 不是深拷貝
let obj = {a:{b:1}}
let obj1 = {...obj}
obj1.a.b =2;
console.log(obj);