当前位置: 首页 > news >正文

es6对象的扩展、对象的新增方法

es6对象的扩展、对象的新增方法

属性的简写

const obj = {foo} => const obj = {foo:foo};
let s = {getName(){}} => let s = {getName:function(){}}

属性名的表达式

let prop = foo;
let obj = {
	s:1
	[prop]:true
}
console.log(obj.s);
console.log(obj[prop])

属性的可枚举属性,和遍历

        let obj = {
            name:'james',
            age:18
        };        console.log(Object.getOwnPropertyDescriptor(obj,'name'));

在这里插入图片描述
enumerable就是是否可枚举的属性

目前,有四个操作会忽略enumerable为false的属性。
for…in循环:只遍历对象自身的和继承的可枚举的属性,这就是为什么我们使用for in循环时必须加上判断循环出的属性名是否是当前对象的还是继承父元素的。

        for (const key in object) {
            if (Object.hasOwnProperty.call(object, key)) {
                const element = object[key];
            }
        }

Object.keys():返回对象自身的所有可枚举的属性的键名。
JSON.stringify():只串行化对象自身的可枚举的属性。
Object.assign(): 忽略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 或字符串,也不管是否可枚举。

以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。

  • 首先遍历所有数值键,按照数值升序排列。
  • 其次遍历所有字符串键,按照加入时间升序排列。
  • 最后遍历所有 Symbol 键,按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性2和10,其次是字符串属性b和a,最后是 Symbol 属性。

super关键字

我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

对象新增的方法

  • Object.is(),ES5 比较两个值是否相等,只有两个运算符:相等运算符()和严格相等运算符(=)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。
    Object.is()与===基本相同,不同之处只有两个:一是+0不等于-0,二是NaN等于自身。
  • Object.assign(),Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target),Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象,
    注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

如果只有一个参数,Object.assign()会直接返回该参数。

const obj = {a: 1};
Object.assign(obj) === obj // true

如果目标对象不是对象就会先转成对象,由于undefined和null无法转成对象,所以如果它们作为参数,就会报错,如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错。
Object.assign()有很多功能例如,浅拷贝、为对象添加属性等

  • Object.getOwnPropertyDescriptors()
    ES5 的Object.getOwnPropertyDescriptor()方法会返回某个对象属性的描述对象(descriptor)。ES2017 引入了Object.getOwnPropertyDescriptors()方法,返回指定对象所有自身属性(非继承属性)的描述对象
const obj = {
  foo: 123,
  get bar() { return 'abc' }
};

Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }
  • Object.setPrototypeOf()
    为一个对象设置原型,Object.setPrototypeOf(目标对象,源对象);当目标对象不是对象时会自动转成对象,但当目标对象是undefined或者null,因为它们不能转为对象所以会报错。
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40
  • Object.getPrototypeOf()
    该方法与Object.setPrototypeOf方法配套,用于读取一个对象的原型对象,和setPrototypeOf()一样,不是对象转对象,undefined和null会报错。
  • Object.keys(),Object.values(),Object.entries() ,Object.fromEntries()
    ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
    Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
    Object.entries()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
    Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。
console.log(
    Object.fromEntries(
        [
            ['key',1],
            ['key2',2]
        ]
    )
)
VM266:1 {key: 1, key2: 2}
  • Object.hasOwn()
    JavaScript 对象的属性分成两种:自身的属性和继承的属性。对象实例有一个hasOwnProperty()方法,可以判断某个属性是否为原生属性。ES2022 在Object对象上面新增了一个静态方法Object.hasOwn(),也可以判断是否为自身的属性。
    Object.hasOwn()可以接受两个参数,第一个是所要判断的对象,第二个是属性名。

参考网站,阮老师

相关文章:

  • Stream流
  • DRM系列(8)之prepare_signaling
  • 企业级C++项目那些事(1):VSQt相关设置
  • 基于51单片机温湿度控制器proteus仿真设计
  • adb常用命令总结[持续更新]
  • 二分查找练习
  • 【Unity面试】 Lua语言基础核心 | 面试真题 | 全面总结 | 建议收藏
  • 结构化编程(SP,structured programming)
  • Python 博客园快速备份脚本
  • Vue - 列表拖曳排序 / 鼠标拖动改变顺序排列高效简洁组件(支持PC端与移动端触屏拖动,也可在滚动条内排序自动滚动,流畅丝滑无 BUG)
  • JavaWeb三大组件之Servlet------Servlet详细讲解
  • 解决nacos集群搭建,服务注册失败
  • 瑞吉外卖Linux
  • 准备去「技术出海峰会」看看
  • Java毕设项目-OA办公系统
  • 实现windows 窗体的自己画,网上摘抄的,学习了
  • .pyc 想到的一些问题
  • C++类中的特殊成员函数
  • CentOS从零开始部署Nodejs项目
  • Create React App 使用
  • es6--symbol
  • ESLint简单操作
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • Iterator 和 for...of 循环
  • java 多线程基础, 我觉得还是有必要看看的
  • Python学习之路16-使用API
  • Spring Security中异常上抛机制及对于转型处理的一些感悟
  • 初识MongoDB分片
  • 大主子表关联的性能优化方法
  • 给github项目添加CI badge
  • 和 || 运算
  • 机器学习中为什么要做归一化normalization
  • 利用阿里云 OSS 搭建私有 Docker 仓库
  • 如何优雅的使用vue+Dcloud(Hbuild)开发混合app
  • 数据仓库的几种建模方法
  • 用jQuery怎么做到前后端分离
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 选择阿里云数据库HBase版十大理由
  • #我与Java虚拟机的故事#连载04:一本让自己没面子的书
  • %@ page import=%的用法
  • (2)MFC+openGL单文档框架glFrame
  • (2020)Java后端开发----(面试题和笔试题)
  • (汇总)os模块以及shutil模块对文件的操作
  • (三)c52学习之旅-点亮LED灯
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • (转)jQuery 基础
  • (转)Mysql的优化设置
  • ***微信公众号支付+微信H5支付+微信扫码支付+小程序支付+APP微信支付解决方案总结...
  • *1 计算机基础和操作系统基础及几大协议
  • .NET : 在VS2008中计算代码度量值
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .Net Core和.Net Standard直观理解
  • .NET 同步与异步 之 原子操作和自旋锁(Interlocked、SpinLock)(九)
  • .net6使用Sejil可视化日志
  • .NET基础篇——反射的奥妙