【ES6标准入门】深入掌握JavaScript对象：属性简洁、Object.assign浅赋值、扩展运算符和属性可枚举性，对象扩展知识这篇就够啦！！！

子夜时辰

已于 2023-11-04 16:53:26 修改

阅读量120

点赞数

分类专栏： JavaScript进阶指南文章标签： javascript es6 前端

于 2023-10-06 15:51:59 首次发布

本文链接：https://blog.csdn.net/m0_56132701/article/details/133612282

版权

JavaScript进阶指南专栏收录该内容

25 篇文章 3 订阅

订阅专栏

在这里插入图片描述

😁 作者简介：一名大三的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript进阶指南
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

🔥前言：

这里是关于对象的扩展的知识，需要一定的对象基础才会更好的理解这节，这是我自己的学习JavaScript的笔记，希望可以帮助到大家，欢迎大家的补充和纠正

文章目录

- 第9章对象的扩展

第9章对象的扩展

9.1 属性的简洁表示

ES6允许直接写入变量和函数名作为对象的属性和方法，这样的书写更加的简洁

var foo='baz'
var baz={foo}
console.log(baz) //{foo:'baz'}

//等同于
var baz={foo:foo}

上述的代码中，ES6允许对象只写属性名，不写属性值。这种时候就是属性名等于属性值

❗️ 注意：

简洁写法中的属性名总是字符串
如果某一个方法的值是一个Generator函数，则想要在其前面加上星号

9.2 方法的简洁表示

var o={
 method(){
 return 'hello'
 }
}

//等同于
var o={
	method:function(){
		return:'hello'
    }
}

//Generator函数
var obj={
    *m(){
        yield 'hello,world'
    }
}

9.3 属性名表达式

在JavaScript中有两种方法可以定义对象的属性名

//方法一
obj.foo=true

//方法二
obj ['a'+'bc'] =123

上面的方法一是直接用标识符作为属性名；方法二是用表达式作为属性名，这时要将表达式放在方括号里面

在使用字面量定义对象（使用大括号）ES5和ES6有不同的方式

ES5中只能使用方法一来定义属性
ES6中可以使用方法二定义对象，使用表达式作为对象的属性名，即把表达式放在方括号内

❗️ 注意点：

属性名表达式与简洁表示法不能同时使用
属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]
```
const keyA={a:1}
const keyB={b:2}

const myBoject={
    [keyA]:'valueA',
    [keyB]:'valueB'
}

console.log(myObject) //Object {[object Object]:'valueB'}
```
上面的代码中，[keyA] 和 [keyB] 得到的都是[object Object]，所以[keyB] 会把 [keyA] 覆盖掉，而myBoject最后一个只有[object Object] 属性

9.3 方法的name属性

函数的name属性会返回函数名，对象方法也是函数，因此也有这个属性

⭐️ 与函数的区别点

如果对象方法使用了取值函数（getter) 和存值函数（setter) 则name属性不是在该方法上面，而是在该方法属性的描述对象的 get 和 set属性上面，返回值是方法名前加上get 和 set

const obj={
    get foo(){},
    set foo(x){}
}

obj.foo.name //Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj,'foo')

descriptor.get.name //'get foo'
descriptor.set.name //'set foo'

bind方法创造的函数，name属性返回bound加上原函数的名字

Function 构造函数创建的函数，name属性返回 ‘annoymous’

(new Function()).name //annoymous

var doSomething=function(){
    
}
doSomething.bind().name //bound doSomething

9.4 Object.is()

在ES比较两个值相等，只有两个运算符：相等运算符（）和严格相等运算符（=），它们都有缺点

相等运算符的缺点是，其会 自动转换数据类型
严格相等运算符的缺点是 ,其会 NaN不等于自身和+0 等于 -0

因此缺乏这样一种运算：在所有的环境中，只要两个值是一样的，它们就应该相等，所以提出” Same-value-equality" (同值相等) 算法用来解决这个问题。object.is() 就是这个部署这个算法的新方法

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

+0 === -0 //true
NaN === NaN //false

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

⭐️ 在ES5可以通过以下代码部署Object.is

Object.defineProperty(Object,'is',{
    value:function(x,y){
        if(x === y){
            console.log('执行其一')
            return x!==0 || 1/x === 1/y
        }
        console.log('执行其二')
        return x!=x && y!=y
    },
    configurable:true,
    enumerable:false,
    writable:true
})

9.5 Object.assign()

9.5.1 基本用法

Object.assing 方法用于源对象的所有可枚举属性复制到目标对象

var target={a:1}

var source1={b:2}
var source2={c:3}

Object.assign(target,source1,source2)
console.log(target) //{a:1,b:2,c:3}

Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象

⭐️ 使用细节：

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性

var target={a:1,b:1}

var source1={b:2,c:2}
var source2={c:3}

Object.assing=(target,source1,source2)
console.log(target) //{a:1,b:2,c:3}

如果只有一个参数，Object.assing会直接返回对象
如果第一个参数不是对象，会先转成对象，由于undefined和null无法转成对象，所以如果将它们作为参数，就会报错
如果非对象出现在源对象的位置（即非首参数）那么处理规则将有所不同，这些参数都会转成对象，如果无法转成对象的便会跳过，其中只有字符串会以数组的形式复制到目标对象中，其它值都不会产生效果
```
var v1='abc'
var v2=true
var v3=10

var obj=Object.assign({},v1,v2,v3)
console.log(obj) //{'0':'a','1':'b','2':'c'}
```
Object.assign复制的属性是有限制的，只复制源对象的自身属性（不复制继承属性）也不复制不可枚举的属性（enumerable:false),枚举属性会在下文中详细说明
属性名为Symnol值的属性也会被Object.assign复制

9.5.2 注意点

1. Object.assing方法实行的是浅复制，而不是深复制，也就是说，如果源对象某一个属性的值是对象，那么目标对象复制得到的是这个对象的引用

var obj1={a:{b:1}}
var obj2=Object.assing({},obj1)
obj1.a.b=2;
console.log(obj2.a.b) //2

⭐️ 2. 等于嵌套的对象，一旦遇到同名属性，Object.assing的处理方法是替换而不是添加

var target={a:{b:'c',d:'e'}}
var source={a:{b:'hello'}}
Object.assign(target,source)
//{a:{b:'hello'}}

上面的代码中，target对象的a属性被source对象的a属性整个替换掉了，而不会得到{ a: { b: ‘hello’ , d: ‘e’ } }的结果，这通常不是开发者想要的，需要特别小心

9.5.3 常见用途

1. 为对象添加属性

2. 为对象添加方法

**3. ⭐️ 克隆对象 **

function clone(origin){
	return Object.assing({},origin)
}

上面的代码将原始对象复制到一个 空对象 中，就得到了原始对象的克隆

不过这种方法只能克隆原始对象自身的值，不能克隆它继承的值，如果需要克隆继承的值，可以采用下面的方法

function clone(origin){
let originProto=Object.getPrototypeOf(origin)
return Object.assign(Object.create(originProto),origin)
}

4.合并多个对象

5. ⭐️ 为属性指定默认值

const DEFAULTS={
    logLevel:0,
    outputFormat:'html'
}

function processContent(options){
    options=Object.assign({},DEFAULTS,options)
    console.log(options)
}

上面的代码中，DEFAULTS对象是默认值，options 对象是用户提供的参数，Object.assign 方法将DEFAULTS和options合并成一个新对象，奇妙的是，将替换的特性用到此处，如果两者都有同名属性，则option的属性值会覆盖DEAULTS的属性值

❗️ 注意点：

由于存在深复制的问题，DEFAULTS对象和 options对象的所有属性的值都只能是简单类型，而不能指向另一个对象，否则将导致DEFAULTS对象的该属性不起作用

const DEFAULTS={
	url:{
		host:'example.com',
        port:7070
    }
}

processContent({url:{port:8000}})

/**
	{
		url:{port:8000}
	}
**/

上面的代码的原意是将url.port改成8000 ，而url.host保持不变。实际结果却是options.url覆盖DEFAULTS.url，所以url.host就不存在了

9.6 属性的可枚举性

对象的每一个属性都具有一个描述对象（Descriptor) 用于控制该属性的行为

Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象

let obj={foo:123}

Object.getOwnPropertyDescriptor(obj,'foo')

/**
	{
		value:123,
		writable:true,
		enumerable:true,
		configurable:true
	}

**/

描述对象中的enumerable属性被称为“可枚举性” 如果该属性为false ，就表示某些操作会忽略当前属性

有4个操作会忽略enumerable为false的属性

for … in 循环： 只遍历对象自身的和继承的可枚举属性
Object.keys()： 返回对象自身的所有可枚举属性的键名
JSON.stringify() ： 只串行化对象自身的可枚举属性
Object.assign() ： 只复制自身的可枚举属性

📑 小知识：为什么需要有enumerable这个属性

实际上，引入enumerable的最初目的就是让某些属性可以规避掉 for…in 操作。比如对象原型的toString方法以及数组的length属性，就通过这种手段而不会被 for…in 遍历到

⭐️ 所有的Class的原型的方法都是不可枚举的

总结：操作中引入继承的属性会让问题复杂化，大多数时候，我们只会关心对象自身的属性，所以，尽量不要使用for…in 循环，可以考虑使用Object.keys代替

9.7 属性的遍历

ES6一共有5种方法可以遍历对象的属性

1. for…in

for…in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）

2. Object.keys(obj)

Object.keys返回一个数组，包含对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）

3. Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）

4. Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj) 返回一个数组，包含对象自身的所有Symbol属性

5.Reflect.ownKeys(obj)

Reflect.ownKeys(obj) 返回一个数组，包含对象自身的所有属性，不管属性名是Symbol还是字符串，也不管是否枚举

总结：

以上五种方法遍历对象的属性都遵守同样的属性遍历次序规则：

首先遍历所有属性名为数值的属性，按照数字排序
其次遍历所有属性名为字符串的属性，按照生成时间排序
最后遍历所有属性名为Symbol值的属性，按照生成时间排序

9.8 对象的扩展运算符

9.8.1 解构赋值

对象的解构赋值用于从一个对象取值，所有的键和它们的值都会复制到新对象上面

let {x,y,...z} = {x:1,y:2,a:3,b:4}
//x 1
//y 2
//z {a:3,b:4}

使用细节：

如果等号的右边是undefined 或 null 就会报错，因为它们无法转为对象，所以会报错
```
let {x,y,...z}=null //运行时报错
```
解构赋值必须是最后一个参数
```
let {...x,y,z}=obj //句法错误
```
解构赋值是浅复制
解构赋值不会复制继承自原型对象的属性
```
var o=Object.create({x:1,y:2})
console.log(o.x); //1
o.z=3;


let {x, ...clone}=o

console.log(x) //1
console.log(clone.y) //undefine
console.log(clone.z) // 3
```
上面的代码中，x与y是o的原型对象的属性，使用解构赋值时，变量x只是单纯的解构赋值，但是clone解构赋值得到的对象中，是不会继承原型对象的属性的，所以clone中只有z，没有y

😄 用法：

解构赋值的一个用处就是扩展某个函数的参数，引入其他的操作

function baseFunction({a,b}){
    //...
}

function wrapperFunction({x,y,...restConfig}){
    return baseFunction
}

9.8.2 扩展运算符

let z={a:3,b:4}
let n={...z}
//n {a:3,b:4}

⭐️ 上面的方法只是赋值对象实例的属性，如果想要完整克隆一个对象，还要复制对象原型的属性，可以采用以下的方法：

//方法一
const clone1={
    _proto_:Object.getPrototypeOf(obj),
    ...obj
}

//方法二(推荐)
const clone2=Object.assign(
 Object.create(Object.getPrototypeOf(obj)),
    obj
)

使用细节：

如果用户自定义的属性放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖
与数组的扩展运算符一样，对象的扩展运算符后面可以带表达式

⭐️ 扩展运算符的参数对象之中如果有取值函数get ，这个函数会执行

//并不会抛出错误，因为x属性只是被定义，这个函数将会执行
let aWithXGetter={
    ...a,
    get x(){
		throw new Error('not throw yet')
    }
}

//会抛出错误，因为x属性被执行了
let runtimeError={
    ...a,
    ...{
        get x(){
            throw new Error('throw now')
        }
    }
}

9.9 NUll传导运算符

在编程实务中，如果读取对象内部的某一个属性，往往需要判断该对象是否存在，比如要读取 message.body.user.firstName，安全的写法

const firstName=(message && message.body && message.body,user && message.body.user.firstName) || 'default'

这样写十分麻烦，因此现在有一个提案，其中引入了 “ Null 传导运算符 ”

const firstName=message?.body?.user?,firstName || 'default'

上面的代码中有3个运算符，只要其中一个返回null 或 undefined 就不再继续运算，而是返回undefined

“NUll 传导运算符有四种用法：”

obj?.prop:读取对象属性
obj?.[expr]：同上
func?.(…args)：函数或对象方法的调用
new C ?.(…args)：构造函数的调用

子夜时辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【ES6标准入门】深入掌握JavaScript对象：属性简洁、Object.assign浅赋值、扩展运算符和属性可枚举性，对象扩展知识这篇就够啦！！！

以上五种方法遍历对象的属性都遵守同样的属性遍历次序规则：首先遍历所有属性名为数值的属性，按照数字排序其次遍历所有属性名为字符串的属性，按照生成时间排序最后遍历所有属性名为Symbol值的属性，按照生成时间排序。
复制链接

扫一扫