• 103768

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

对象的拓展

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

对象拓展

对象拓展回顾: 对象字面量,对象解构,三个点运算符

对象name属性

对象的方法name属性,但是有两种属性方法比较特殊。 1、如果是特性方法,要通过特性对象获取。

// // 对象
// let obj = {
//     demo() {},
//     // 特性方法
//     get num() {},
//     set num(val) {
//         return 10
//     },
// }
// console.log(obj.demo.name)
// // 特性方法名称
// // console.log(obj.num.name) //报错
// // 通过特性对象获取
// let descriptor = Object.getOwnPropertyDescriptor(obj, 'num');
// console.log(descriptor)
// console.log(descriptor.get.name)
// console.log(descriptor.set.name)

2、如果是symbol属性方法,返回symbol描述。

// // Symbol数据
// let s1 = Symbol('ickt')
// let s2 = Symbol()
// // 对象
// let obj = {
//     demo() {},
//     // 特性方法
//     get num() {},
//     set num(val) {
//         return 10
//     },
//     [s1]() {},
//     [s2]() {}
// }
// console.log(obj.demo.name)
// // Symbol属性方法
// console.log(obj[s1].name)
// console.log(obj[s2].name)

Null传导运算符

用来判断属性或者方法是否存在,存在返回或者执行,有四种用法。

// null传导
// let obj = {};
// let s1 = Symbol();
// let obj = {
//     a: {
//         b: {
//             c() {
//                 return {
//                     d: 100,
//                     [s1]: 20
//                 }
//             }
//         }
//     }
// };
// ?.避免与?:混淆
// console.log(obj.a && obj.a.b && obj.a.b.c && obj.a.b.c() && obj.a.b.c().d)
// console.log(obj?.a?.b?.c()?.d)
// console.log(obj?.a?.b?.c()?.[s1])
// delete obj?.a?.b.c;
// console.log(obj)
// 赋值暂不支持
// obj?.x?.y.z = 10

对象的静态方法

Object.is

该方法的有两个作用:1、判断+0和-0 2、判断NaN

// 代替===
// console.log(Object.is())
// 000000000    100000000
// console.log(+0/1 === -0/1)
// console.log(Object.is(+0/1, -0/1))
// console.log(Object.is(0/0, +'abc'))

Object.assign

是为对象拓展一个静态方法,实现对参数对象的复制(多继承),实现的浅复制 浅复制:值类型数据直接复制,引用类型的数据直接改变指向(引用同一个) 深复制:值类型数据直接复制,引用类型的数据(不包括函数)直接复制复制 jquery的extend方法可以实现深复制,将第一个参数传递为布尔值true

// 复制 
let obj1 = {
    color: 'red',
    num: 10
}
let obj2 = {
    color: 'green',
    size: {
        width: 10,
        height: 20
    }
}
let obj3 = {
    num: 20,
    arr: [1, 2, 3]
}
// 定义特性
Object.defineProperty(obj3, 'msg', {
    value: 'hello',
    enumerable: false
})
// 复制 
Object.assign(obj1, obj2, obj3);
// 浅复制
// $.extend(obj1, obj2, obj3);
// // 深复制
// $.extend(true, obj1, obj2, obj3);
// // 修改obj2
// obj2.color = 'blue';
// obj2.size.width = 100;
// console.log(obj1)
// console.log(obj3)

第一个参数不能是null或undefined,其它非对象类型参数将包装成对象(虽然number和布尔值无意义)

// console.log(Object.assign(null))
// console.log(Object.assign(undefined))
// console.log(Object.assign('hello'))
// console.log(Object('hello'))
// console.log(Object.assign(100))
// console.log(Object(100))
// console.log(Object.assign(true))
// console.log(Object(true))
// // 转换数组
// console.log(Object.assign([5, 6, 7], [1, 2]))

只能合并枚举的属性

// 复制 
let obj1 = {
    color: 'red',
    num: 10
}
let obj2 = {
    color: 'green',
    size: {
        width: 10,
        height: 20
    }
}
let obj3 = {
    num: 20,
    arr: [1, 2, 3]
}
// 定义特性
Object.defineProperty(obj3, 'msg', {
    value: 'hello',
    enumerable: false
})
// 复制 
Object.assign(obj1, obj2, obj3);
console.log(obj1)
console.log(obj3)

用途;复制对象,合并对象,定义默认配置,为对象拓展实例属性,拓展原型方法等

// function Player(name, x, y) {
function Player(options) {
    // this.name = name;
    // this.x = x;
    // this.y = y;
    Object.assign(this, options)
}
// 拓展原型
Object.assign(Player.prototype, {
    demo() {}
})
console.log(new Player({
    name: 'ickt',
    x: 10,
    y: 20
}))

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客