Object的一些方法
1. Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
const object1 = {a: 1, b: 2, c: 3}
const object2 = Object.assign({c: 4, d: 5}, object1)
console.log(object2) // {c: 3, d: 5, a: 1, b: 2}
object1 // {a: 1, b: 2, c: 3}
复制一个对象
ar obj = { a: 1 }
var copy = Object.assign({}, obj)
console.log(copy) // { a: 1 }
深拷贝问题
针对深拷贝，需要使用其他方法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。
function test() {
'use strict'
let obj1 = { a: 0 , b: { c: 0}}
let obj2 = Object.assign({}, obj1)
console.log(JSON.stringify(obj2)) // { a: 0, b: { c: 0}}
obj1.a = 1
console.log(JSON.stringify(obj1)) // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)) // { a: 0, b: { c: 0}}
obj2.a = 2
console.log(JSON.stringify(obj1)) // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)) // { a: 2, b: { c: 0}}
obj2.b.c = 3
console.log(JSON.stringify(obj1)) // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)) // { a: 2, b: { c: 3}}
// Deep Clone
obj1 = { a: 0 , b: { c: 0}}
let obj3 = JSON.parse(JSON.stringify(obj1))
obj1.a = 4
obj1.b.c = 4
console.log(JSON.stringify(obj3)) // { a: 0, b: { c: 0}}
}
test()
合并对象
合并具有相同属性的对象时，属性会被后续参数中具有相同属性的其他对象覆盖。
var o1 = { a: 1 }
var o2 = { b: 2 }
var o3 = { c: 3 }
var obj = Object.assign(o1, o2, o3)
console.log(obj) // { a: 1, b: 2, c: 3 }
console.log(o1) // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
// 合并具有相同属性的对象
var o1 = { a: 1, b: 1, c: 1 }
var o2 = { b: 2, c: 2 }
var o3 = { c: 3 }
var obj = Object.assign({}, o1, o2, o3)
console.log(obj) // { a: 1, b: 2, c: 3 }
2. Object.entries()
Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
const object1 = { foo: 'bar', baz: 42 }
console.log(Object.entries(object1))
// [ ["foo", "bar"], ["baz", 42] ]
const object2 = { 0: 'a', 1: 'b', 2: 'c' }
console.log(Object.entries(object2))
// [ ["0", "a"], ["1", "b"], ["2", "c"] ]
const result = Object.entries(object2).sort((a, b) => a - b)
console.log(Object.entries(result))
// [ [0: ["0", "a"] ] , [1: ["1", "b"] ] , [2: ["2", "c"] ]
3. Object.freeze()
Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
const object1 = {
property1: 42
}
const object2 = Object.freeze(object1)
object2.property1 = 33
console.log(object2.property1)
// 42
4. Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：
Object.defineProperty(obj, prop, descriptor)
- obj ：要处理的目标对象
- prop ：要定义或修改的属性的名称
- descriptor ：将被定义或修改的属性描述符
var obj = {}
obj.name = 'hunger'
obj['age'] = 3
Object.defineProperty(obj, 'intro', {
value : 'hello world'
})
console.log(obj) // {name: 'hunger', age: 3, intro: 'hello world'}
以上三种方法都可以用来定义/修改一个属性，Object.defineProperty 的方法貌似看起来有些小题大做。没关系，且往下看它更复杂的用法。
var obj = {}
Object.defineProperty(obj, 'intro', {
configurable: false,
value : 'hello world'
})
obj.intro = 'jirengu'
console.log(obj.intro) // "helloworld"
delete obj.intro // false, 删除失败
console.log(obj.intro) // "helloworld"
Object.defineProperty(obj, 'name', {
configurable: true,
value : 'hunger valley'
})
delete obj.intro // true ， 成功删除
通过上面的例子可以看出，
属性描述对象中 configurable 的值设置为 false 后(如果没设置，默认就是 false)就不能再次通过 Object.defineProperty修改属性，也无法删除该属性。
var obj = {name: 'jirengu'}
Object.defineProperty(obj, 'age', {
value: 3,
enumerable: false
})
for(var key in obj){
console.log(key) // 只输出 'name'， 不输出'age'
}
设置 enumerable 属性为 false 后，遍历对象的时候会忽略当前属性(如果未设置，默认就是 false不可遍历)。
var obj = {name: 'jirengu'}
Object.defineProperty(obj, 'age', {
value: 3,
writable: false
})
obj.age = 4
console.log(obj.age) // 3， writable为 false 时，修改对象的当前属性值无效
value 和 writable 叫数据描述符，具有以下可选键值：
- value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
- writable：当且仅当该属性的writable为true时，该属性才能被赋值运算符改变。默认为 false。
configurable: true 和 writable: true 的区别是，前者是设置属性能删除，后者是设置属性能修改
var obj = {}
var age
Object.defineProperty(obj, 'age', {
get: function(){
console.log('get age...')
return age
},
set: function(val){
console.log('set age...')
age = val
}
})
obj.age = 100 // 'set age...'
console.log(obj.age) // 'get age...', 100
get 和 set 叫存取描述符，有以下可选键值：
- get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
- set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。
数据描述符和存取描述符是不能同时存在的
var obj = {}
var age
Object.defineProperty(obj, 'age', {
value: 100,
get: function(){
console.log('get age...')
return age
},
set: function(val){
console.log('set age...')
age = val
}
})
因为有 value，又有 get，上述代码会报错。
1. Object相关的题目
// 用尽量多的方法实现如下select 函数
const obj = {a: 1, b: 2, c:3}
function select(obj, arr) {
//实现该函数
}
select(obj, ['a', 'c'])
//输出 {a: 1, c: 3}
// 方法1
const obj = {a: 1, b: 2, c:3}
function select(obj, arr) {
let newObject = {}
arr.forEach((value,index)=>{
newObject[value] = obj[value]
})
return newObject
}
// 方法2 数组的 reduce() 方法
const obj = {a: 1, b: 2, c:3}
function select(obj, arr) {
return arr.reduce((object,value)=>{
object[value]=obj[value]
return object
},{})
}
// 方法3 Object.assign() 的方法
const obj = {a: 1, b: 2, c:3}
function select(object, arr) {
return arr.reduce((ret,value)=>{
return Object.assign(ret,{[value]:object[value]})
},{})
}
// 简写
const select = (obj, arr) => arr.reduce((ret, key) => Object.assign(ret, { [key]: obj[key] }), {})
// 用最短的代码补全 renderTpl 函数
let p = {
'姓名': 'xxxx',
'性别': '男',
'年纪': 4,
//... 可能有更多属性
}
function renderTpl(p) {
//用最短的代码实现功能
}
let result = renderTpl(p)
//- 姓名
- jirengu
- 性别
- 男
- 年纪
- 4
// 原始方法
function renderTpl(p) {
var html = ''
for(let key in p){
html += '- '+key+'
- '+p[key]+'
'
}
html += '
'
return html
}
// Object.keys() 方法
function renderTpl(p){
return `${Object.keys(p).reduce((html,key)=>{
return `${html}- ${key}
- ${p[key]}
`
},'')}
`
}
// 简写
const renderTpl = p => `${Object.keys(p).reduce((html,key)=>`${html}- ${key}
- ${p[key]}
`,'')}
`
// Object.entries() 方法
const renderTpl = p => `${Object.entries(p).reduce((html,arr)=>`${html}- ${arr[0]}
- ${arr[1]}
`,'')}
`