嘿,各位编程大侠们!在上一篇《解锁 JavaScript 魔力:不容错过的代码小妙招(一)》中,我们一同领略了 JavaScript 世界里部分神奇小妙招的魅力。现在,让我们继续这场充满惊喜的编程之旅,探索更多能让你的代码如魔法般酷炫的小技巧。😎
一、Object.assign ()—— 属性大挪移高手
Object.assign () 这家伙那可是个超厉害的属性复制小能手。它能把一个或多个源对象的属性一股脑地搬到目标对象里。
语法:Object.assign(target,...sources)。这就像是在说:“嘿,target 你站好啦,sources 里的小伙伴们要把属性传给你喽!”
- “target” 呢,就是那个需要接收源对象属性的目标对象,等属性传完后,它会打扮一新作为返回值闪亮登场。
- “sources” 就是一个或多个带着各种属性的源对象。
示例:
const target = { '小明': '爱吃苹果', '小红': '爱吃猪脚饭' }
const source = { '小红': '其实我爱吃榴莲', '小兰': '爱吃哈密瓜' }
const returnedTarget = Object.assign(target, source)
console.log(target)
// {小明: '爱吃苹果', 小红: '其实我爱吃榴莲', 小兰: '爱吃哈密瓜'}
console.log(returnedTarget === target)
// true
哇塞,通过这个好玩的例子,咱们就发现啦,Object.assign () 可以像个神奇的合并大师一样,把多个对象合并在一起。要是合并的对象有相同属性,嘿嘿,后面源对象的属性就会霸气地把前面目标对象的属性给覆盖掉。
二、Object.create ()—— 原型克隆侠
Object.create () 这个方法就像是个神奇的克隆侠,它能以一个现有对象作为原型,创造出一个全新的对象。
语法:Object.create(proto)。仿佛在说:“嘿,proto 大侠,快贡献出你的原型力量,让我创造一个新伙伴。”
- “proto” 就是那个新创建对象的原型对象啦。
示例:
const person = {
name: '小明',
seyHi: function () {
console.log(`我叫${this.name}`)
}
}
const otherPerson = Object.create(person)
otherPerson.name = '小红'
person.seyHi()
// 我叫小明
otherPerson.seyHi()
// 我叫小红
哈哈,在这个例子里,otherPerson 就像是以 person 为原型创造出来的小跟班。当咱们给 otherPerson 修改属性的时候,可不会影响到原型对象 person 哦。
三、Object.entries ()—— 键值对大侦探
Object.entries () 这个方法就像是个厉害的键值对大侦探,它能返回一个数组,里面装着给定对象自有的可枚举字符串键属性的键值对。
语法:Object.entries(obj)。感觉就像在说:“obj 你别跑,快把你的键值对交出来。”
- “obj” 就是那个要被侦探的对象啦。
示例:
const person = {
name: '小明',
'小明': 18,
}
Object.entries(person).forEach(([key, value]) => {
console.log(`${key}: ${value}`)
})
// name: 小明, 小明: 18
嘿嘿,这个方法可太方便啦,能让咱们轻松地遍历对象的属性。特别是在需要同时处理键和值的时候,它就像个得力小助手。
四、Object.fromEntries ()—— 键值对魔法师
Object.fromEntries () 这个方法就像是个神奇的键值对魔法师,它能把键值对列表变成一个对象。
语法:Object.fromEntries(iterable)。就好像在说:“iterable 你里面的键值对们,准备好变身成一个对象吧。”
- “iterable” 是一个包含对象列表的可迭代对象,比如 Array 或者 Map。
示例:
const entries = new Map([
['小明', '爱吃猪脚饭'],
['小红', '不爱吃猪脚饭'],
])
const obj = Object.fromEntries(entries)
console.log(obj);
// {小明: '爱吃猪脚饭', 小红: '不爱吃猪脚饭'}
哇哦,这个方法在处理键值对数据的时候超级有用,可以把它们变成对象,然后咱们就可以尽情地对这个对象施展魔法啦。
五、Object.keys ()—— 属性名收集器
Object.keys () 这个静态方法宛如一个精准的属性名收集器,它会返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
语法:Object.keys(obj),这里的 obj 就是那个要被收集属性名的对象啦。
它与使用 for...in 循环迭代有相似之处,不过 for...in 循环还会把原型链中的属性也一并枚举出来,而 Object.keys() 只专注于对象自身的可枚举字符串键属性名哦。并且它返回的数组顺序和 for...in 循环提供的顺序是相同的。
示例:
// 简单数组
const arr = ["小明", "小红", "小兰"]
console.log(Object.keys(arr)); // ['0', '1', '2']
// 类数组对象
const obj = { 0: "小明", 1: "小红", 2: "小兰" }
console.log(Object.keys(obj)); // ['0', '1', '2']
六、Object.values ()—— 属性值提取器
Object.values () 就像是一个属性值提取器,它是一个静态方法,能够返回一个给定对象的自有可枚举字符串键属性值组成的数组。
语法:Object.values(obj),其中 obj 为目标对象。
示例:
const obj = { '小明': "爱吃猪脚饭", '小红': '爱吃鸡脚饭’' }
console.log(Object.values(obj)) // ['爱吃猪脚饭', '爱吃鸡脚饭’']
// 类数组对象
const arrayLikeObj1 = { 0: "小明", 1: "小红", 2: "小兰" }
console.log(Object.values(arrayLikeObj1)) // ['小明', '小红', '小兰']