ES6--》对象扩展方法

news2024/11/20 3:35:43

目录

对象扩展

name 属性

属性的遍历

super关键字

Object.is()

Object.assign()

Object.getOwnPropertyDescriptors()

Object.setPrototypeOf()

Object.getPrototypeOf()

Object.keys()、Object.values、Object.entries()、Object.fromEntries()

Object.hasOwn()


对象扩展

本文简单介绍以下ES6对对象新增的方法:

name 属性

函数的name属性,返回函数名。对象方法也是函数也有name属性。

<script>
    const obj = {
        name:'张三',
        age:18,
        sayName(){
            console.log('hello world');
        }
    }
    console.log(obj.sayName.name);//sayName
</script>

如果对象方法使用取值函数(getter)和存值函数(setter),需要该方法的属性的描述对象在对象get和set属性上面,返回值是方法名前加上get和set。

<script>
    const obj = {
        get foo(){},
        set foo(x){}
    }
    const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
    console.log(descriptor.get.name);//get foo
</script>

有两种特殊情况:

<script>
    // Function构造函数创造的函数,name属性返回anonymous。
    console.log((new Function()).name);//anonymous

    // bind方法创造的函数,name属性返回bound加上原函数的名字。
    var doSomething = function(){}
    console.log(doSomething.bind().name);//bound doSomething
</script>

属性的遍历

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

(1) for...in

循环遍历对象自身属性和继承的可枚举属性

(2)Object.keys(obj)

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

(3)Object.getOwnPropertyNames(obj)

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

(4)Object.getOwnPropertySymbols(obj)

返回一个数组,包含对象自身的所有Symbol属性的键名

(5)Reflect.ownKeys(obj)

返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是Symbol或字符串,也不管是否可枚举。

super关键字

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

下面代码中,super.say() 指向原型对象 obj 的say方法,但是绑定的this却还是当前对象obj,因此输出的结果不是hello而是world。

<script>
    const person = {
        x:'hello',
        say(){
            console.log(this.x);
        }
    }
    const obj = {
        x:'world',
        say(){
            super.say()
        }
    }
    Object.setPrototypeOf(obj,person)//,该对象将指定对象的原型(即内部[[Prototype]]属性)设置为另一个对象或为null。
    console.log(obj.say());//world
</script>

Object.is()

用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

<script>
    var obj = {
        name:'张三',
        name1:'张三',
        gender:'男',
        age:18,
        say(){
            console.log('hello world');
        }
    }
    console.log(Object.is(obj.name,obj.name1));//true
    console.log(Object.is(1,1));//true
    
    // Object.is() 和 === 的区别在于以下特殊例子
    console.log(+0 === -0);//true
    console.log(Object.is(+0,-0));//false
    console.log(NaN === NaN);//false
    console.log(Object.is(NaN,NaN));//true
</script>

Object.assign()

用于对象的合并,将源对象所有可枚举的属性,复制到目标对象上。

<script>
    var obj = {
        a:1,
        b:2,
        c:'我是c'
    }
    var obj1 = {
        a:2, //当目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性
        d:3,
        e:'我是e'
    }
    // console.log(Object.assign(target, source1, source2));
    console.log(Object.assign(obj,obj1));
</script>

用到对象合并我们可以就会遇到一些问题了,请看如下例子:

<script>
    // 参数不是对象,则会先转换成对象
    console.log(typeof Object.assign(2)); //object

    // null和undefined无法转对象,作为目标对象为false,但是作为源对象为true的
    // console.log(Object.assign(null,2));//报错提醒 Cannot convert undefined or null to object
    // console.log(Object.assign(2,null));//没报错

    // 其他类型像数值、字符串、布尔值虽然不会报错,但只有字符串会以数组形式拷入目标对象,其他值不会产生效果
    const x = 'abc'
    const y = 123
    const z = true
    console.log(Object.assign({},x));//{0: 'a', 1: 'b', 2: 'c'}
    console.log(Object.assign({},y));//{}
    console.log(Object.assign({},z));//{}
</script>

在使用这个ES6新增的方法时,应该注意以下内容:

<script>
    // Object.assign()实行的是浅拷贝,如果源对象发生任何变化,都会反映到目标对象上
    const obj1 = {a:1,b:2,c:{d:3}}
    const obj2 = Object.assign({},obj1)
    obj1.c.d = 3.14
    console.log(obj2.c.d);

    // Object.assign()可以用来处理数组
    console.log(Object.assign([1,2,3],[4,5]));// [4, 5, 3]

    // Object.assign()可以用来对取值函数进行处理,求值之后再处理
    const a = {
        get foo(){
            return 1
        }
    }
    console.log(Object.assign({},a));//{foo: 1}
</script>

Object.getOwnPropertyDescriptors()

返回指定对象所有自身属性(非继承属性)的描述对象。

<script>
    const obj = {
        num:12,
        get say(){
            return 'hello world'
        }
    }
    console.log(Object.getOwnPropertyDescriptors(obj));
</script>

Object.setPrototypeOf()

方法作用与__proto__相同,用来设置应该对象的原型对象(prototype),返回参数对象本身。

<script>
    let proto = {}
    let obj = {x:10}
    Object.setPrototypeOf(obj,proto)
    proto.y = 11
    proto.z = 12

    console.log(obj.x);//10
    console.log(obj.y);//11
    console.log(obj.z);//12
</script>

Object.getPrototypeOf()

方法用于读取一个对象的原型对象,与Object.setPrototypeOf()方法配套。

<script>
    function foo(){}
    const f = new foo()
    console.log(Object.getPrototypeOf(f) === foo.prototype);//true
    Object.setPrototypeOf(f,Object.prototype)//修改原型对象
    console.log(Object.getPrototypeOf(f) === foo.prototype);//false
</script>

Object.keys()、Object.values、Object.entries()、Object.fromEntries()

三种方法都是返回一个数组,之间的区别请看如下:

<script>
    // Object.keys() 返回所有可遍历的键名
    var obj = {aa:1,bb:'我是b',cc:2}
    console.log(Object.keys(obj));//['aa', 'bb', 'cc']

    // Object.values() 返回所有可遍历的属性的键值,键值排序按属性名数值大小排序i
    const obj1 = {12:'a',1:'b',18:'c'}
    console.log(Object.values(obj1));//['b', 'a', 'c']

    // Object.entries() 返回所有可遍历属性的键值对数组
    const obj2 = {1:'a','b':2,3:'c'}
    console.log(Object.entries(obj2));//[['1', 'a'],['3', 'c'],['b', 2]]

    // Object.fromEntries() 与 Object.entries()操作相反,将一键值对数组转为对象。
    console.log(Object.fromEntries([
        ['1', 'a'],
        ['3', 'c'],
        ['b', 2]
    ]));//{1: 'a', 3: 'c', b: 2}
</script>

Object.hasOwn()

方法可以判断某个属性是否为原生属性,接受两个参数,第一个是参数是要判断的对象,第二个是属性名。

<script>
    const obj = Object.create({a:12});
    obj.b = 34
    // 对象obj的属性a是继承属性,属性b是原生属性。
    console.log(Object.hasOwn(obj,'a'));//false
    console.log(Object.hasOwn(obj,'b'));//true
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409010.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何在 2022 年为 Web 应用程序选择技术堆栈

文章目录什么是技术堆栈&#xff1f;为 Web 开发选择技术堆栈时要考虑的事项选择熟悉的技术跟随趋势考虑项目的细节确保高安全级别记住你的最后期限选择前端技术栈框架编程语言选择后端技术栈编程语言数据库技术堆栈是您应用程序的核心选择最佳的 Web 应用程序堆栈并非易事&…

vue3+ts遇到的小问题

插件volar安装了没有提示。 解决&#xff1a;1. 检查是或否是最新的版本&#xff0c;是的话进入拓展设置&#xff0c;所有的选项都勾选 2. 还是不行就要更新vscoe了。一般的话会在力捕抓到一个错误。跟新就好了 TypeScript intellisense is disabled on template. To enab…

【简陋Web应用2】人脸检测——基于Flask和PaddleHub

文章目录&#x1f6a9; 前言&#x1f33a; 效果演示&#x1f966; 分析与设计&#x1f349; 实现&#x1f36c; 1. 部署人脸检测模型&#x1f36d; 2. 使用Flask构建app2.1 目录结构2.2 forms.py2.3 utils.py2.4 app.py2.5 index.html&#x1f95d; Bug(s)&#x1f6a9; 前言 本…

Vue根据网络文件路径下载文件【自定义属性 v-down】

Vue根据网络文件路径下载文件【v-down】标准使用方式企业级Vue开发集成(全局挂载)1.src目录下创建directive文件夹&#xff08;存在则忽略&#xff09;2.down.js文件3.directive根目录创建index.js文件4.main.js 注册自定义属性全局挂载提到下载文件大家首先肯定会想到 模拟点击…

vue2 使用 cesium 篇 【第一篇】

vue2 使用 cesium 篇 今天好好写一篇哈&#xff0c;之前写的半死不活的。首先说明&#xff1a;这篇博文是我边做边写的&#xff0c;小白也是&#xff0c;实现效果会同时发布截图&#xff0c;如果没有实现也会说明&#xff0c;仅仅作为技术积累&#xff0c;选择性分享&#xff0…

面试官:“ES6中新增的Set方法去重你会吗?”我:“看文章就知道了”

赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 。 文章目录 Set 的基本使用🍔前言🍏正文1. Set1.1 Set的基本使用1.2 Set 常见的属相和方法1.3 应用场景:使用Set对数…

vue组件通信2 | 父子组件通信v-model

引言&#xff1a;最近项目在vue2 升级vue3 &#xff0c;在这个过程中发现v-model 的变化最大。同时也发现了对于v-model 的不熟悉。 因此&#xff0c;本文从文档、vue2的使用方法、vue2 tsx 的使用方法、vue3的使用方法、使用场景来试图探究一下v-model。 一、文档及vue2中 v-…

vue页面刷新

vue页面刷新 首先我们都知道vue属于单页面应用&#xff0c;默认境况下是不会触发刷新页面操作的&#xff0c;所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1. wiindow.location.reload([bForceGet])该方法强迫浏览…

vue中组件的name属性含义与用法

vue中组件的name属性含义与用法 name属性&#xff1a;只有作为组件选项时起作用&#xff0c;用来注册组件名 1、注册组件名 局部注册组件&#xff0c;语法&#xff1a;export default{ components:{"组件名":组件对象}} 其中&#xff0c;"组件名"注册方…

从0搭建Vue3组件库(五): 如何使用Vite打包组件库

本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) 打包配置 vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安装 vite 以及vitejs/plugin-vue pnpm add vite vitejs/plugin-vue -D -w 在 componen…

基于Vue+Nodejs实现宿舍管理系统

​ 作者主页&#xff1a;编程指南针简介&#xff1a;Java领域优质创作者、CSDN博客专家 Java项目、简历模板、学习资料、面试题库、技术互助文末获取源码​ 项目编号&#xff1a;BS-QD-002 主要需求&#xff1a; 学生信息录入、修改、删除、查询宿舍管理评分学生早起率、懒…

js之promise

##### 仅做记录复习使用 #### 数据有点混乱 暂时不要看 promise promise是一个对异步操作进行封装并返回其结果的构造函数. 使代码更加简洁和避免回调地狱。 promise是浏览器引擎自带的&#xff08;但不是所有浏览器都支持promise&#xff09; promise的参数是一个函数且…

全网详细解决Set-Location : 找不到接受实际参数“xxx”的位置形式参数。 所在位置 行:1 字符: 1的错误,并深究该错误的原因。

文章目录1. 复现错误2. 分析错误3. 解决问题4. 文末总结1. 复现错误 今天使用PowerShell从C:\Users\baoya>目录切换到C:\Program Files\MySQL\MySQL Server 5.7\bin时&#xff0c;却报出如下图的错误&#xff1a; 即找不到接受实际参数“Files\MySQL\MySQL”的位置形式参数。…

vue最易理解且详细的调用swiper插件

我们最开始接触的是在操作dom时候的时候引入swiper,那么这次我就用之前的文档来教你在vue中如何调用swiper. 我们之前看的是swiper教程 那么我根据上面的教程一步一步来教你使用 1.首先创建好swiper组件.写好template 里面的标签内容(当然这里写了个插槽为了以后方便动态插入…

【跨域】一篇文章彻底解决跨域设置cookie问题!

一篇文章彻底解决跨域设置cookie问题&#xff01; 大家好我是雪人~~⛄ 之前做项目的时候发现后端传过来的 SetCookie 不能正常在浏览器中使用。 是因为谷歌浏览器新版本Chrome 80将Cookie的SameSite属性默认值由None变为Lax。 接下来带大家解决该问题。 原理讲解 我们可以看到…

Java - token的存储与获取

1. 获取token的工具类 问&#xff1a;为什么写工具类呢&#xff1f;&#xff1f;&#xff1f; 答&#xff1a;因为我们不知道前端将token怎么存储的&#xff0c;所以我们可以通过调用Token工具类来获取token。Token工具类会检查header、URL中的属性值、以及Cookie等等&#xff…

快速生成Vue2或者vue3模板

1.点击文件&#xff0c;再点击首选项&#xff0c;然后选择用户片段&#xff1b; 2.在弹出来的输入框中&#xff0c;选择第一行vue.json或者第二行新建全局代码片段文件都可&#xff0c;都是为了打开vue.json文件&#xff1b; 3.把下面代码复制到vue.json文件里&#xff0c;然后…

vue3搭建教程(基于vite+create-vue+ element-plus)

前言2021年8月5日&#xff0c;Vue正式发布3.2版本&#xff0c;同时&#xff0c;Vue的作者尤雨溪还在个人微博称&#xff1a;“ < script setup > TS Volar 真香 ”&#xff1b;2022年1月22日&#xff0c;Vue官方宣布Vue3成为了新的默认版本。如今的Vue3已经势不可挡&a…

【JavaScript-进阶】详解数据类型,内存分配,API元素对象获取

目录 前言 1.数据类型 1.简单数据类型和复杂数据类型 2.堆和栈 2.webApi 1.API 2.DOM是啥&#xff1f; 3.如何获取元素&#xff1f; 1.根据ID获取 ​编辑 2.根据标签名获取 3.通过HTML5新增的方法获取 4.特殊元素获取(body,html) 总结 前言 祝大家中秋节快乐…

Vue 实现简单的时间轴 时间进度条

项目需要按天播放地图等值线图功能&#xff0c;所以需要一个时间进度条&#xff0c;网上找了一下发现没有自己需要的样子&#xff0c;于是只能简单的写一个。 1、封装时间尺度组件 <!-- 时间尺度 --> <template><div class"time"><div class&…