【JavaScript】12. 常用对象方法

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

常用对象方法

(1)浅拷贝

Object.assign()

浅拷贝对象,相同的值会被覆盖为新值

参数1为接受拷贝的对象,参数2为传递拷贝的对象

结果会改变第一个参数对象,同时会返回这个参数对象

const target = { a: 1, b: 2 }

const source = { b: 3, c: 4 }

const result = Object.assign(target, source)

console.log(target) // { a: 1, b: 3, c: 4 }

console.log(result) // { a: 1, b: 3, c: 4 }

console.log(target === result) // true

Object.create()

用于创建一个新对象

需要传入一个参数,作为新建对象的原型对象

实现一个简单的深拷贝

function deepClone(newObj, oldObj){

for(var k in oldObj){

var item = oldObj[k];

if(item instanceof Array){

// 如果这个属性是数组(注意数组要在对象前,因为数组也是对象)

newObj[k] = []; // 让目标对象的这个属性也是数组

deepCopy(newObj[k],item); // 然后进入递归

}else if(item instanceof Object){

// 如果这个属性是对象

newObj[k] = {}; // 让目标对象的这个属性也是对象

deepCopy(newObj[k],item); // 然后进入递归

}else{

// 只有在既不是数组、也不是对象时,才可以直接赋值

newObj[k] = item;

}

}

}

(2)判断

Object.is()

用于判断两个值是否相等

Object.is('foo', 'foo') // true

Object.is([], []) // false

Object.is(null, null) // true

Object.is(NaN, NaN) // true

// 特别的:

Object.is(0, -0) // false

Object.is(+0, -0) // false

Object.is(0, +0) // true

Object.is(-0, -0) // true

Object.is(NaN, 0/0) // true

(3)键值对

Object.entries()

返回键值对数组

let obj = {

name: 'ruovan',

age: 24

}

Object.entries(obj) // [['name', 'ruovan'], ['age', 24]]

Object.fromEntries()

将键值对数组转换为对象

let arr = [['name', 'ruovan'], ['age', 24]]

Object.entries(arr) // { name: 'ruovan', age: 24 }

(4)定义对象

Object.defineProperties()

Object.defineProperty()

给对象定义新属性、修改现有属性

var obj = {}

// obj 表示要操作的对象, "name"表示要操作的对象属性

Object.defineProperty(obj, "name", {

enumerable: false, // 是否可枚举,设置为 false,则 name 不能通过 for...in 遍历到

configurable: false, // 是否可被删除,设置为false,则 name 无法通过 delete运算符删除

writable: false, // 是否可写,设置为 false ,则属性不能被重新赋值或修改

value: "dary", // 被设置的属性值

// 获取值

get: function () {

return v

},

// 赋值

set: function (value) {

v = value

}

})

// defineProperties 可一次性处理多个属性

Object.defineProperties(obj, {

'name': {

value: 'dary',

writable: true

},

'age': {

value: 19,

writable: false

}

});

Object.proxy()

用于修改某些操作的默认行为

它在目标对象之前架设了一层拦截,外界对该对象的访问,都必须先通过这层拦截

因此它提供了一种机制,可以对外界的访问进行过滤和改写

proxy:代理,这里表示用它来代理某些操作

Proxy是一个构造函数,它接受两个参数:目标对象target与句柄对象handler

handler内的方法是对target对象的方法进行拦截处理的方法

// Proxy(target, handler)

new Proxy(person, {

get: function (target, key) {

return target[key]

},

set: function (target, key, value) {

target[key] = value

console.log('target[key] is setted')

}

})

(5)获取属性

Object.getOwnPropertyDescription()

用于获取对象上的一个自有属性的属性描述

包括:value、writable、get、set、configurable、enumerable

const obj = {

number: 42

}

const des = Object.getOwnPropertyDescriptor(obj, 'number')

// 可以访问其属性描述符

console.log(des.configurable) // true

console.log(des.value) // 42

Object.getOwnPropertyDesciptors()

用于获取对象的所有自身属性的描述符

Object.getOwnPropertyDescriptors(obj)

// num: {

// value: 42,

// writable: true,

// configurable: true,

// enumerable: true,

// }

Objec.getOwnPropertyNames()

用于获取对象自身拥有的可枚举属性和不可枚举属性的属性名

返回一个数组

var arr = ["a", "b", "c"]

console.log(Object.getOwnPropertyNames(arr).sort()) // ["0", "1", "2", "length"]

// 类数组对象

var obj = { 0: "a", 1: "b", 2: "c"}

console.log(Object.getOwnPropertyNames(obj).sort()) // ["0", "1", "2"]

Object.prototype.hasOwnProperty():

用于判断对象自身属性是否含有指定的属性,不包括从原型链上继承的属性

const obj = {};

obj.number = 24

console.log(obj.hasOwnProperty('number')) // true

// 不包括从原型链上继承的属性

console.log(obj.hasOwnProperty('toString')) // false

console.log(obj.hasOwnProperty('hasOwnProperty')) //false

(6)原型

Object.getPrototypeOf()

用于返回指定对象的原型,如果没有则返回null

let obj = {}

Object.getPrototypeOf(obj)

// 作用和 __proto__ 效果一样

Object.getPrototypeOf(obj) === obj.__proto__

// 特别的,Object 也是构造函数, 因此,返回的是函数的原型对象

Object.getPrototypeOf(Object) === Function.prototype === Object.__proto__

Object.setPrototypeOf()

用于设置指定对象的新原型

Object.setPrototypeOf(obj, prototype)

Object.prototype.isPrototypeOf()

用于检测一个对象是否存在于另一个对象的原型链上

// 用于检查 prototypeObj 是否在 object的原型链上

prototypeObj.isPrototypeOf(object)

let obj1 = {}

let obj2 = new Object()

console.log(obj1.__proto__.isPrototypeOf(obj2)) // true

类似的,还有instanceof:A instanceof B(这里前面介绍过,顺便提一下)

用于检测B的原型对象B.prototye是否存在于A的原型链上

相当于:B.prototype.isPrototypeOf(A)

A表示一个实例对象

B表示一个构造函数

(7)枚举

Object.keys()

用于获取给定对象的自身可枚举属性的属性名(键)

它与Object.getOwnPropertyNames()类似

返回一个由属性名所组成的数组

Object.values(obj)

用于获取给定对象的自身可枚举属性的属性值(值)

返回一个由属性值所组成的数组

它与Object.keys()相反

(8)字符串

Object.toString()

每个对象都有这个方法,用于返回一个表示该对象的字符串

let obj = { a: 1, b: 2 }

let arr = [1,2,3]

let str = '123'

obj.toString() // [object Objetc]

arr.toString() // 1,2,3

str.toString() // 123

不同类型的数据都重写了toString方法,因此返回的值不一样

str.toString() == str.__proto__.toString.call(s)

Object.toLocaleString()

使用toLocaleString可以将对象根据语言环境来转换字符串

比如数字:可以进行千位符格式化

let num = 123456789

num.toLocaleString() // '123,456,789'

比如日期

let date = new Date()

date.toString() // '...' (省略了)

date.toLocaleString() // '2021/8/12 下午11:00:00'

本人前端小菜鸡,如有不对请谅解