JS-对象方法

文章目录

  • 基础对象方法
    • 1. constructor属性
    • 2. hasOwnProperty
    • 3. isPrototypeOf
    • 4. propertyIsEnumerable
  • 对象静态方法
    • 1. assign
    • 2. create
    • 3. getOwnPropertyNames/getOwnPropertySymbols
    • 4. getPrototypeOf/setPrototypeOf
    • 5. hasOwn
    • 6. keys/values/entries
    • 7. fromEntries
    • 8. freeze
    • 9. preventExtensions
    • 10. seal
    • 11. isExtensible/isFrozen/isSealed

基础对象方法

  • 指的是对象可以直接使用的方法(一般在对象本身或原型中)

1. constructor属性

  • 语法:对象.constructor
  • 返回值:创建该对象的构造函数
  • 注意:有时候会用于判断数据类型
let arr = [1, 2, 3];
console.log(arr.constructor); // ƒ Array() { [native code] }
console.log(arr.constructor === Array); // true
console.log({ a: 1 }.constructor === Array); // false

2. hasOwnProperty

  • 语法:对象.hasOwnProperty(属性名)
  • 作用:判断传入的属性名是否是对象自身的属性
  • 返回值:布尔值
class Person {
    constructor() {
        this.age = 17;
    }
}
Person.prototype.say = function() {}

let p = new Person();
console.log(p); // Person { age: 17 }
console.log(p.hasOwnProperty('age')); // true
console.log(p.hasOwnProperty('say')); // false

3. isPrototypeOf

  • 语法:对象A.isPrototypeOf(对象B)
  • 作用:判断对象A是否是对象B原型链上的原型对象
  • 返回值:布尔值
function Person() {
    this.age = 17;
}
let obj = { a: 1 }
Person.prototype = obj;

let p = new Person();
console.log(obj.isPrototypeOf(p)); // true
console.log(Object.prototype.isPrototypeOf(p)); // true
console.log({ a: 1 }.isPrototypeOf(p)); // false

4. propertyIsEnumerable

  • 语法:对象.propertyIsEnumerable(属性)
  • 作用:判断属性是否是对象自身的可枚举属性
    • 属性可枚举:可以被for-in遍历的属性
    • 任何对象的属性,如果是通过字面量或点语法或数组关联法添加的则默认都是可枚举的
Object.prototype.abc = 666;
console.log(Object.prototype.propertyIsEnumerable('abc')); // true

let obj = { a: 999 }
console.log(obj.a, obj.abc); // 999 666
console.log(obj.propertyIsEnumerable('a')); // true
console.log(obj.propertyIsEnumerable('abc')); // false

对象静态方法

  • 指的是给构造函数(类)直接使用的方法,基础对象无法使用

1. assign

  • 语法:Object.assign(对象A, 对象B)
  • 作用:将对象B中的数据添加到对象A中
  • 返回值:添加数据后的对象A
let originA = { a: 1, b: 2, c: 3 }
let objA = { name: 'zs' }
let r = Object.assign(objA, originA);
console.log(objA); // { name: 'zs', a: 1, b: 2, c: 3 }
console.log(objA === r); // true

let originB = { a: 1, b: 2, c: 3 }
let objB = { name: 'zs', ...originB }
console.log(objB); // { name: 'zs', a: 1, b: 2, c: 3 }
  • 使用此方法可替代使用for-in进行对象属性赋值
let origin = { a: 1, b: 2, c: 3 }
let obj = { a: 2, b: 3, c: 4 }
for (const key in obj) {
    origin[key] = obj[key];
}
console.log(origin); // { a: 2, b: 3, c: 4 }
let origin = { a: 1, b: 2, c: 3 }
let obj = { a: 2, b: 3, c: 4 }
Object.assign(origin, obj);
console.log(origin); // { a: 2, b: 3, c: 4 }

2. create

  • 语法:Object.create(对象A)
  • 作用:创建新对象,并将对象A作为新对象的原型
  • 返回值:创建的新对象
let prObj = { a: 1, b: 2 };
let obj = Object.create(prObj);
console.log(obj.__proto__ === prObj); // true

3. getOwnPropertyNames/getOwnPropertySymbols

  • 语法:Object.getOwnPropertyNames(对象)/Object.getOwnPropertySymbols(对象)
  • 作用:获取对象的所有属性名组成数组并返回(必须是可枚举属性)
    • getOwnPropertyNames获取字符串属性名
    • getOwnPropertySymbols获取Symbol属性名
let obj = { name: 'zs' };
let o1 = Object.create(obj);
let o2 = {
    a: 1,
    b: 2,
    c: 3,
    [Symbol(1)]: '666',
    [Symbol(2)]: '999'
}
Object.assign(o1, o2);
console.log(Object.getOwnPropertyNames(o1)); // ['a', 'b', 'c']
console.log(Object.getOwnPropertySymbols(o1)); // [Symbol(1), Symbol(2)]

4. getPrototypeOf/setPrototypeOf

  • 语法:Object.getPrototypeOf(对象)
    • 作用:获取对象的原型
  • 语法:Object.setPrototypeOf(对象A, 对象B)
    • 作用:将对象B设置为对象A的原型
let obj = Object.create({ a: 1, b: 2 });
console.log(Object.getPrototypeOf(obj)); // { a: 1, b: 2 }

Object.setPrototypeOf(obj, { c: 3, d: 4 });
console.log(Object.getPrototypeOf(obj)); // { c: 3, d: 4 }

5. hasOwn

  • 语法:Object.hasOwn(对象, 属性名)
  • 作用:判断属性是否是对象的自身属性,与对象的hasOwnProperty方法作用一样
    • 建议使用hasOwn
  • 返回值:布尔值
let obj = Object.assign(Object.create({ a: 1 }), { b: 2 });
console.log(obj); // { b: 2 }
console.log(Object.hasOwn(obj, 'b')); // true
console.log(Object.hasOwn(obj, 'a')); // false

6. keys/values/entries

  • 语法:Object.keys(对象)
    • 作用:获取对象的属性名组成数组返回
  • 语法:Object.values(对象)
    • 作用:获取对象的属性值组成数组返回
  • 语法:Object.entries(对象)
    • 作用:获取对象的键值对数据组成数组返回
      • 返回的是二维数组,小数组中的数据就是对象中的键值对
let obj = { a: 1, b: 2, c: 3 }
console.log(Object.keys(obj)); // ['a', 'b', 'c']
console.log(Object.values(obj)); //  [1, 2, 3]
console.log(Object.entries(obj)); //  [['a', 1], ['b', 2], ['c', 3]]

7. fromEntries

  • 语法:Object.fromEntries(二维数组)
  • 作用:将二维数组或Map集合转换为对象(与entries作用相反)
console.log(Object.fromEntries([['a', 666], ['b', 888]])); // { a: 666, b: 888 }

8. freeze

  • 语法:Object.freeze(对象)
  • 作用:冻结对象,冻结后的对象属性不可修改、不可删除、不可扩展、不可配置
let o = { a: 1, b: 2 }
Object.freeze(o);
o.a = 999;
delete o.a;
o.c = 888;
console.log(o); // { a: 1, b: 2 }

9. preventExtensions

  • 语法:Object.prventExtensions(对象)
  • 作用:阻止对象属性扩展(添加)
let o = { a: 1, b: 2 }
Object.preventExtensions(o);
o.a = 666;
delete o.b;
o.b = 888; // 不可扩展(添加)
console.log(o); // { a: 666 }

10. seal

  • 语法:Object.seal(对象)
  • 作用:密封对象属性,对象的属性可以修改,但不能删除、不能扩展、不能配置
let o = { a: 1, b: 2 }
Object.seal(o);
o.a = 666;
delete o.a;
o.c = 1234;
console.log(o); // { a: 666, b: 2 }

11. isExtensible/isFrozen/isSealed

  • 语法:Object.isExtensible(对象)
    • 作用:判断对象是否可扩展
  • 语法:Object.isFrozen(对象)
    • 作用:判断对象是否被冻结
  • 语法:Object.isSealed(对象)
    • 作用:判断对象是否被密封(被冻结的对象也是被密封的)
  • 返回值:布尔值
let obj = { a: 1, b: 2 }
Object.preventExtensions(obj);
Object.freeze(obj); 
Object.seal(obj);

console.log(Object.isExtensible(obj)); // false
console.log(Object.isFrozen(obj)); // true
console.log(Object.isSealed(obj)); // true

你可能感兴趣的:(JavaScript,javascript,前端)