(精华)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);