首页 > 其他分享 >ES6对象的扩展

ES6对象的扩展

时间:2022-11-26 12:32:11浏览次数:40  
标签:ES6 obj ... 对象 Object 扩展 let 属性

对象中可以直接写变量
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
const foo = 'bar';
const obj = {foo}; //key值就是foo,value值是 foo变量对应的值
// 输出的是 {foo: "bar"}
console.log(obj)

对象中可以直接写函数-省略了function 声明
const obj = {
method() {
return "Hello!";
}
};
// 等价于下面的写法。
const obj = {
method: function() {
return "Hello!";
}
};

//输出 Hello
console.log(obj.method())
属性名表达式
JavaScript 定义对象的属性,有两种方法。
// 方法一
let obj={}
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
console.log(obj)
属性的可枚举性
对象的每个属性都有一个描述对象(Descriptor)用来控制该属性的行为。
Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。
感觉这个方法在实际中很少使用。
let obj = { foo: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
输出的值:
{
configurable: true
enumerable: true
value: 123 //这个属性的值
writable: true //这个属性可以修好
}
其中描述对象的enumerable属性,称为“可枚举性”。
如果该属性为false,就表示某些操作会忽略当前属性。
目前,有四个操作会忽略 enumerable 为 false 的属性。
目前,有四个操作会忽略enumerable为false的属性。
for...in循环:只遍历对象自身的和继承的可枚举的属性。 es5
Object.keys():返回对象自身的所有可枚举的属性的键名。es5
JSON.stringify():只串行化对象自身的可枚举的属性。 es5
Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。可以进行浅拷贝。 es6
其中,只有for...in会返回继承的属性,其他三个方法都会忽略继承的属性,只处理对象自身的属性。
引入“可枚举”(enumerable)的目的
实际上,引入“可枚举”(enumerable)这个概念的最初目的:就是让某些属性可以规避掉for...in操作。
不然所有内部属性和方法都会被遍历到。这样影响性能。
比如,对象原型的toString方法,以及数组的length属性,就通过“可枚举性”,从而避免被for...in遍历到。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

上面代码中,toString和length属性的enumerable都是false。
因此for...in不会遍历到这两个继承自原型的属性

另外,ES6 规定,所有 Class 的原型的方法都是不可枚举的。
Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false
属性的遍历
ES6 一共有 5 种方法可以遍历对象的属性。
(1)for...in
for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

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

(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举
对象的解构赋值
解构赋值:对象的解构赋值用于从一个对象中取值,
相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。
所有的键和它们的值,都会拷贝到新对象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

对象的解构赋值的-4个注意点
第一个:
由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。
let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

let { ...a } = {}; //不会报错
console.log(a) //输出的是对象 {}

第二个:
// 解构赋值必须是最后一个参数,否则会报错。
let { ...x, y, z } = {name:'张',age:12,num:1900, sex:'男'}; // 句法错误:因为不是最后一个值
console.log(x) //会报错

第三个:
注意,解构赋值的拷贝是浅拷贝。
即如果一个键的值是复合类型的值(数组、对象、函数)、
那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
下面特别说明:解构赋值的拷贝是浅拷贝

第四个:
扩展运算符的解构赋值,不能复制继承自原型对象的属性。
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined
解构赋值的拷贝是浅拷贝
Let oldObj={
code: 500,
isAxiosError: true,
request: {
onreadystatechange: null,
readyState: 4,
timeout: 30000,
withCredentials: false,
upload: XMLHttpRequestUpload,
},
response: undefined
}
//浅拷贝
let {...newObj } = oldObj
// 更改了新对象的值,
newObj.code=200
console.log('oldObj.code', oldObj.code) //输出 500
console.log('newObj.code', newObj.code) //输出 200

// 下面证明是浅拷贝
newObj.request.readyState=2
//更改新对象后,原始对象的值也跟着修改了。
console.log('oldObj.request.readyState', oldObj.request.readyState) //输出 2
console.log('newObj.request.readyState', newObj.request.readyState) //输出 2
说明了是浅拷贝
扩展运算符扩展函数的参数
函数wrapperFunction在baseFunction的基础上进行了扩展,
能够接受多余的参数,并且保留原始函数的行为。
这一种经常是用在封装一个方法。这个方法的参数是未知的。
这个时候就可以考虑使用扩展运算符 如下:
function Aa(a,b,...obj){
console.log('a',a)
console.log('b',b)
// 竟然是一个数组 [{name: "詹桑", age: 10, sex: "男"}]
console.log('obj',obj)
}
Aa('123','345',{name:'詹桑', age:10, sex:'男'})
扩展运算符--用于对象
对象的扩展运算符(...)用于取出对象的所有可遍历属性,拷贝到当前对象之中。
let obj = { a: 3, b: 4 };
let newObj = { ...obj };
newObj // { a: 3, b: 4 }
扩展运算符--用于数组
由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。
let oldArrr = { ...['a', 'b', 'c'] };
oldArrr
// {0: "a", 1: "b", 2: "c"}
扩展运算符--用于类
对象的扩展运算符,只会返回参数对象自身的、可枚举的属性,这一点要特别小心。
尤其是用于类的实例对象时。
class C {
p = 12;
m() {}
}

let c = new C();
let clone = { ...c };

clone.p; // ok
clone.m(); // 报错

c是C类的实例对象,对其进行扩展运算时,只会返回c自身的属性c.p。
而不会返回c的方法c.m(),因为这个方法定义在C的原型对象上
对象的扩展运算符等同于使用 Object.assign()方法
let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);


扩展运算符可以用于合并两个对象。
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。


作者:​​晚来南风晚相识​​

标签:ES6,obj,...,对象,Object,扩展,let,属性
From: https://blog.51cto.com/u_12553473/5888893

相关文章

  • 《ASP.NET Core技术内幕与项目实战》精简集-DDD准备5.3:值对象
    本节内容,部分为补充内容,部分涉及到9.3(P321-326)。主要NuGet包:无 一、使用值对象的两种情形及其EFCore映射配置1、没有标识符的从属实体类如商店的地理位置,包含经度和......
  • JAXB 实现java对象与xml之间互相转换
    首先熟悉一下JAXB实现对象与xml互转时常用的一些注解使用:1.@XmlRootElement,用于类级别的注解,对应xml的跟元素。通过name属性定义这个根节点的名称。2.@XmlAccessorType,定......
  • 服务器对象错误"ASP 0177:80040154"Server.CreateObject
    1,症状:试图运行一个使用Server.CreateObject实例化一个ActiveX组件的活动服务器页面(ASP)页时出现以下错误消息:服务器对象错误ASP0177:80040154Server.CreateObjec......
  • 关于C#函数对象参数传递的问题
      我们知道在.net里class是引用类型,在函数参数表中的对象传递的都是对象的引用,所以在函数体内对其对象参数的修改会影响函数外对应的对象本身,例如下面的程序:classProgr......
  • easylogging++的那些事(四)源码分析(二)日志记录宏(一)CLOG宏(二)writer对象的创建以
    目录构造函数construct接口initializeLogger接口在easylogging++的那些事(四)源码分析(二)日志记录宏(一)CLOG宏(一)宏展开中我们对CLOG宏展开了,今天来看看日志记录宏中......
  • ES6笔记 - 变量的解构赋值
    变量的解构赋值目录变量的解构赋值1.解构赋值2.对象的解构赋值3.其它解构赋值3.1字符串解构赋值3.2数值和布尔值的解构赋值3.3函数的解构赋值4.用途1.解构赋值=......
  • ES6笔记 - let和const命令
    let和const命令目录let和const命令1.let命令2.const命令3.块级作用域4.从function循环问题深入了解let1.let命令let命令的用法和var类似,其核心特点为只在let所在......
  • <八>通过new和delete重载实现对象池的应用
    MyQueue版本1#include<iostream>usingnamespacestd;template<typenameT>classMyQueue{private: structQueueItem{ QueueItem(T_data=T(),QueueItem......
  • 10、go的面向对象
    结构体结构体的定义//定义结构体,老师的结构体,各个属性统一放入结构体管理typeTeacherstruct{ //变量名大写开头外界可以访问 Namestring Ageint Scho......
  • 任务11 面向对象基础
    一、理解面向对象1、面向过程:面向过程是一种以过程为中心的编程思想其原理就是将问题分解成一个一个详细的步骤,然后通过函数实现每一个步骤,并依次调用。2、面向对象:......