ES6 数组对象的几个新方法

ES6 数组对象的几个新方法,第1张

push() 方法可向数组的末尾添加一掘碧拍个或多个元素,并返回新的长度。

语法:

arrayObject.push(newelement1,newelement2,....,newelementX)

参数:

newelement1必需。要添判羡加到数组的第一个元素。

newelement2可选。要添加到数组的第二个元素。

newelementX可选。可添加多个元慧滚素。 实例在本例中,我们将创建一个数组,并通过添加一个元素来改变其长度:<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.push("James") + "<br />")document.write(arr)</script>输出:George,John,Thomas4George,John,Thomas,James

Set 对羡局举象存储的值总是唯一的

Set 对象方法

方法 描述

add 添加某个值,返回腊迅Set对象本身。

clear 删除所有的键/值对,没有返回值。

delete 删除某个键,返回true。如果删除失败,返回false。

forEach 对每个元素执行指定 *** 作。

has 返回一个布尔值,表示某个键是否在当前 Set 对象之中。

Set 对象作用

数兄碧组去重

并集

交集

差集

1)创建对象的方式不同

new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。

Object.create() es6创建对象的另一种方式,可以理解为继承一个对象, 添加的属性是在原型下。

Object.create()方法创建的对象时,属性是在原型下面的,也可以直接访问 b.rep // {rep: "apple"} ,

此时这个值不是吧b自身的,是它通过原型链 proto 来访问到b的值。

2)创建对象属性的性质不同

Object.create() 用第二个参数来创建非空对象的属性描述符默认是为false的,而构造函数或字面量方法创建的对象属性的描述符默认为true。看下图解析:

[图片上传失败...(image-ee8b47-1638233974390)]

3)创建空对象时不同

[图片上传失败...(image-45d6a0-1638233974390)]

当用构造函数或对象字面量方法创建空对象时,对象时有原型属性的,即有 _proto_

当用Object.create()方法创建空对象时,对象是没有原型属性的。

4) __proto__ 属性

JavaScript 的对象继承是通过原型链实现的。ES6 提供了更多原型对象的 *** 作方法。

__proto__ 属性(前后各两个下划线),用来读取或设置当前对象的prototype对象。目前只有浏览器环境必须部署有这个属手枯性,其他运行环境不一定要部署,因此不建议使用这个属性,而是使用下面这些来 Object.setPrototypeOf() (写 *** 作)、 Object.getPrototypeOf() (读 *** 作)、 Object.create() (生成 *** 作)代替。

[图片上传失败...(image-6a4995-1638233974390)]

如果是不用Object,create()方法御埋,我们是如何给对象原型添加属性和方法的?

------ 通过构造函数或者类,例如:

[图片上传失败...(image-6fb928-1638233974390)]

[图片上传失败...(image-deee8f-1638233974390)]

现在有 Object.create() 就简单的多了

[图片上传失败...(image-fbb13e-1638233974390)]

输出结果中看出,添加的方法是在原型上的。就类似于

4.1)原型属性的继承

这里结合一个例子来说说这几个方法的使用:

场景:拷贝一个构造函数的实例。

打印出 实例c 看看结构是怎样的

[图片上传失败...(image-f8e3d9-1638233974390)]

其中 color 属性在实例上,而其他的原型上。

现在来拷贝一个 实例 c2

因为 Object.assing 是不能拷贝到继毕拆洞承或原型上的方法的。所以 实例c2 没有 a 这个属性。那要怎么要才能拷贝到原型上的方法呢?

4.1.1)第一种方法

这样就实现了原型属性的拷贝。

Object.getPrototypeOf(c) 既 originProto 得到的是原型上的 //{a: 1, b: 2, c: 3};

Object.create(originProto) 既 originProto2 既是创建了一个 {a: 1, b: 2, c: 3} 在原型上的新对象;

Object.assign(originProto2, c) 在源对象originProto2 上合并对象 c;

4.1.2)第二种方法 (推荐)

可以把Object.create()的参数理解为:第一个参数是放在新对象的原型上的,第二个参数是放在新对象的实例上的。

所以上面例子

Object.getPrototypeOf() 得到的是 c 对象的原型,然后作为第一个参数,所以会在新对象c2 的原型上。

Object.getOwnPropertyDescriptors() 得到是 c 对象自身属性(包括可枚举和不可枚举的),作为第二个参数,放在 c2 的实例上。

为什么说推荐这个方法呢? 因为Object.assign() 方法不能正确拷贝 get ,set 属性。

例如,我们给 c 实例添加一个 "colorGet" 属性,并设置该属性的get 描述符:

结果如下:

[图片上传失败...(image-60e708-1638233974390)]

这里没有拷贝到 "colorGet" 的 get 描述符,而是直接把获取到的值赋值给 "colorGet" 。

那对于 get 描述符要怎么获取呢? Object.getOwnPropertyDescriptors就专为解决这问题而生。

而又因为要拷贝原型上的属性,所以结合Object.create、Object.getPrototypeOf 方法一起使用。即上面的第二种实现方法,如下:

结果如下:

[图片上传失败...(image-505bf1-1638233974390)]

此时已经成功的拷贝到了get描述符啦。

虽然说实际开发上很少会要去修改 get 描述符,但是知道多一种方法,遇到这种情况时就知道该怎么去解决了。

注意: 这些都只是一个层级的深拷贝。

上面实现 原型属性拷贝 中的两种方法中用到了 Object.getOwnPropertyDescriptors 、 Object.assing() 、 Object.create 、 Object.getPrototypeOf() 方法,通常这几种方法都有一起结合使用。

如果上面的例子还不理解,这里把他简单的拿到 对象的继承 来讲解。理解的话就可以忽略啦。

4.2)原型属性的继承

以前,继承另一个对象,常常写成下面这样。

ES6 规定 __proto__ 只有浏览器要部署,其他环境不用部署。如果去除 __proto__ ,可以用 Object.create() 和 Object.assign() 来实现。

但是 Object.assign() 无法正确拷贝get属性和set属性的问题。例如:

[图片上传失败...(image-55279a-1638233974390)]

上图中,obj 对象的 foo 属性是一个取值函数,Object.assign不会复制这个取值函数,只会拿到值以后,将这个值赋上去。

而 Object.getOwnPropertyDescriptors() 可以解决这个问题 实现get 、set 属性的正确拷贝,即方法3 ,如下:

[图片上传失败...(image-df3c31-1638233974390)]

说了那么多种拷贝方法,怎么去选择呢,还是要看实际应用中的情况:

如果只是拷贝 自身可枚举属性,就可以只用 Object.assign 方法;

如果是要拷贝原型上的属性,就需要 Object.assign , Object.create, Object.getPrototypeOf 方法结合使用

如果是拷贝get /set 属性,就需要 结合 Ojbect.getOwnPropertyDescriptors 方法

参考资料:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11979138.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存