【JavaScript 进阶教程】对象新增方法 defineProperty 与 keys 的说明与使用

news2025/2/24 16:29:27

 文章导读:

       这篇文章给大家讲解在 ES5 中对象新增的两个常用方法:defineProperty(),keys(),

这两个方法可以让我们更方便的操作对象,获取对象属性,赋值修改等等操作,最重要的是,这些方法可以让我们设置无法修改对象属性值,下面跟我一起了解一下吧!

文章目录:

一:Object.defineProperty() 

1.1 参数说明

1.2 第三个参数 descriptor 的说明

1.3 实际使用

1.3.1 writable 特性

1.3.2 enumerable 特性

1.3.3 configurable 特性

二:Object.keys()


一:Object.defineProperty() 

   Object.defineProperty() 可以用来定义对象的新属性和修改属性值,设置属性值是否可修改(重点)等等,该方法共有三个参数

1.1 参数说明

Object.defineProperty( obj, prop, descriptor )
参数objpropdescriptor
含义要操作的对象名称对象中要操作的某个属性的名称这个参数有四个特性,该参数以对象形式书写,详细写法说明如下

1.2 第三个参数 descriptor 的说明

       其参数以对象形式书写,其内部有四个特性,例如修改值的操作,设置是否可重写,设置是否可枚举,是否可修改特性等等......

参数 descriptor 的操作类型valuewritableenumerableconfigurable
含义属性值操作,若本身有这个属性则是重新赋值,若本身没有这个属性,那么是添加属性设置是否可重写,true为可重写,false为不可重写,设置为不可重写后属性值不可重新赋值,新添加的属性默认为 false设置是否可枚举,简单来说就是是否可遍历,true为可枚举,false为不可枚举,新添加的属性默认为 false设置是否可以再次修改其属性,例如是否可以将这个属性删除,新添加的属性默认为 false,并且该特性只能设置一次,不可第二次重新设置!!

 1.3 实际使用

1.3.1 writable 特性

writeable 特性可以设置一个属性是否可被重写,true 为可重写,false 为不可重写,使用 defineProperty 新添加的属性默认为 false

    <script>
       var dog={
          'name':'旺财',
          'age':5
       }
       Object.defineProperty(dog,'sex',{
          value:'公',
          writable:false
       })
       dog.sex='母'    //更改属性值看其是否改变
       console.log(dog);
    </script>

可以看到我们虽然更改了 sex 的值,但是打印结果没有被更改 ,说明 writable : false 属性成功使其属性值不能重写,功能十分强大是不是!

  

注意事项:如果是使用 defineProperty 新添加的属性,那么 writable 默认为 false 不可修改,如果是本身就有的属性而去修改值,那其仍可以修改


1.3.2 enumerable 特性

enumerable 特性可以设置某个属性是否可被枚举,true 为可枚举,false 为不可枚举,使用 defineProperty 新添加的属性默认为 false

    <script>
        var dog={
            'name':'旺财',
            'age':5
        }
        Object.defineProperty(dog,'sex',{
            value:'公',
            enumerable:false
        })
        console.log(Object.keys(dog));
    </script>

可以看到我们遍历得不到设置过 enumerable:false 特性的属性 sex,证明了 false 不可枚举

  

注意事项:如果是使用 defineProperty 新添加的属性,那么 enumerable 默认为 false 不可枚举,如果是本身就有的属性而去修改值,那其仍可以枚举


 1.3.3 configurable 特性

 configurable 特性可以设置某个属性是否可被修改(删除),true 为可修改,false 为不可修改,使用 defineProperty 新添加的属性默认为 false

configurable 特性的参数只能设置一次,第二次设置会无效!!

    <script>
        var dog={
            'name':'旺财',
            'age':5,
        }
        Object.defineProperty(dog,'sex',{
            value:'公',
            configurable : false
        })
        delete dog.sex
        console.log(dog);
    </script>

可以看到我们删除不了设置过 configurable:false 特性的属性 sex,证明了 false 不可修改

  

注意事项:如果是使用 defineProperty 新添加的属性,那么 configurable 默认为 false 不可修改,如果是本身就有的属性而去修改值,那其仍可以修改


二:Object.keys()

keys() 可以用来获取对象的属性名,参数为要操作的对象名称。其返回一个数组元素为属性名的新数组(故需要定义一个数组去接收)

Object.keys( obj )

    <script>
        var dog={
            'name':'旺财',
            'age':5,
            'sex':'公'
        }
        var arr=Object.keys(dog)
        console.log(arr);
    </script>

成功返回了对象的属性名称 

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

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

相关文章

JS的同步与异步

js的同步与异步 ​ 众所周知&#xff0c;js是一个单线程的语言&#xff0c;学过java、c之类的都知道&#xff0c;其他语言有个叫类继承的东西&#xff0c;就相当于开辟另个一个流水线&#xff0c;是多线程 ​ 而javascript就像一条流水线&#xff0c;它无法开辟别的流水线&am…

猿创征文|【React 三】组件实例的三大属性(state、props、refs)

目录 一、 State 1.概念 2.State的简单用法3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二、props 1.概念 2.传参的基础方法、运算符传参 三、refs 定义 字符串形式的ref、回调函数下ref、createRef 创建ref容器 一、 State 1…

【微信小程序】-- 分包(四十四)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…

Vue3 + PDF.js 实现 PDF 预览

文章目录1 前言2 PDF 预览测试2.1 下载 PDF.js2.2 window.open 直接打开2.3 弹框形式打开3 修改配置项3.1 修改主题色为暗色系3.2 修改默认语言为简体中文3.3 打开 PDF 后默认跳转到某一页4 移除部分按钮4.1 简单按钮移除4.2 复杂按钮移除5 错误处理5.1 跨域报错5.2 默认语言为…

架构图以及vue的简介

架构图 前后端分离总架构图 ​ 前端架构设计图 ​ MVVM 架构模式 MVVM 的简介 MVVM 由 Model,View,ViewModel 三部分构成&#xff0c;Model 层代表数据模型&#xff0c;也可以在Model中定义数据修改和操作的业务逻辑&#xff1b;View 代表UI 组件&#xff0c;它负责将数据模…

养老院管理系统(Java+Web+MySQL)

目 录 摘 要 1 Abstract 2 第一章 绪论 6 一、 选题的依据及意义 6 二、 国内外现状研究 6 三、 研究目的 7 四、 本文研究的主要内容 7 五、 本文章节安排 7 六、 本章小结 8 第二章 设计技术与开发环境 9 一、 相关技术介绍 9 &#xff08;一&#xff09; JSP简介 9 &#xf…

在vue中使用echarts

欢迎大家加入我的社区&#xff1a;http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录1、安装2、在vue中引入&#xff08;全局引入&#xff09;3、在vue中的使用4、模板代码放在哪个位置5、完整的一个vue页面实例&#xff1a;6、实现效果7、可能遇到的问题&#xff0c;下载不…

vue3 解决各场景 loading过度 ,避免白屏尴尬!

Ⅰ、前言 当我们每次打卡页面&#xff0c;切换路由&#xff0c;甚至于异步组件&#xff0c;都会有一个等待的时间 &#xff1b;为了不白屏&#xff0c;提高用户体验&#xff0c;添加一个 loading 过度动画是 非常 常见的 &#xff1b;那么这几种场景我们应该把 loading 加在哪…

Vue3 - $attrs 的几种用法(1个或多个根元素、Options API 和 Composition API)

theme: smartblue 持续创作&#xff0c;加速成长&#xff01;这是我参与「掘金日新计划 6 月更文挑战」的第6天&#xff0c;点击查看活动详情 本文简介 点赞 关注 收藏 学会了 使用 Vue 开发时&#xff0c;肯定会接触到 组件 的概念&#xff0c;无可避免的也会接触到 组件通…

Vue:Vue事件整理

文章目录前言一、Vue基本事件this对象传递参数总结二、事件修饰符三、键盘事件keyup/keydown四、ElementUi前言 本篇复习Vue中的事件处理&#xff0c;包含事件基本响应、事件修饰符、键盘事件等内容 一、Vue基本事件 Vue中&#xff0c;设置点击、鼠标滚动和键盘输入等相应事…

vue3【列表渲染】v-for 详细介绍(vue中的“循环”)

vue 常用语法——列表渲染 v-for文章简介v-for 主要内容&#x1f53a;item in itemsv-for 变量的作用域v-for 与对象在 v-for 里使用范围值&#x1f53a;<template> 上的 v-forv-for 与 v-if&#x1f53a;通过 key 管理状态&#x1f53a;组件上使用 v-forsummary下期预告…

前端设置页面字体尺寸跟随屏幕大小而进行变化

越来越多的前端项目现在需要这个操作&#xff0c;其操作的原因很简单&#xff0c;你的项目可能跑在小尺寸分辨率的电脑上&#xff0c;也有可能在大尺寸的会议平板上&#xff0c;更有甚者是在LED上。那么如何让你的项目根据屏幕分辨率的大小而自动变化&#xff0c;修改页面展示字…

运行调试前端项目之ts

本文分四个部分&#xff1a; 直接node或ts-node运行ts通过package.json文件运行tsts翻译为js后运行js在ide中运行和调试ts — vscode中&#xff0c;配置launch.json文件&#xff0c;来调试ts&#xff0c;与js调试一致 — idea、webstorm中&#xff0c;安装“run configuration…

vue3 超好用的富文本编辑器

Ⅰ. 前言 quillEditor 毫无疑问一款非常强大的 富文本编辑器 在 vue 中一个也非常好用 &#xff0c;而且也十分轻量的&#xff1b; 然而如今的vue3 我们该如何使用它呢 &#xff1a; Ⅱ.vue3 中 安装 quillEditor ① 下载 npm install vueup/vue-quillalpha --save② 在ma…

vite首次打开界面加载慢问题/解决

写在前面 网上都说vite要比webpack快&#xff0c;但个人感受&#xff0c;默认情况下, vite项目的启动确实比webpack快&#xff0c;但如果某个界面是首次进入&#xff0c;且依赖比较多/比较复杂的话&#xff0c;那就会比较慢了。 这篇文章就是用来记录&#xff0c;关于vite慢的…

java实现文件的下载和删除(返回输出流至前端)

文章目录引言实现步骤下载文件删除文件删除目录&#xff08;及目录下全部文件&#xff09;实现代码测试引言 最近需求中有使用到文件的下载功能&#xff0c;在之前的学习过程中我没有去注重过文件处理方面的学习&#xff0c;所以写起来还是有点吃力&#xff0c;将写出的工具类…

浏览器的组成部分

什么是浏览器&#xff1f; Web 浏览器简称为浏览器&#xff0c;是一种用于访问互联网上信息的应用软件。浏览器的主要功能是从服务器检索 Web 资源并将其显示在 Web 浏览器窗口中。 Web 资源通常是 HTML 文档&#xff0c;但也可能是 PDF、图像、音频、视频或其他类型的内容。…

IDEA2022创建Web项目配置Tomcat(图文说明)

下面是在idea上面配置一个Tomcat的项目环境。 1.首先创建普通的一个Java项目&#xff0c;不要选择JavaEE 2.创建完成后按照下图所示&#xff0c;依次选择 File -> Add Framework Support -> Web Application -> 在WEB-INF文件夹下创建classes和lib文件夹 3.下面配置…

若依前后端分离版:增加新的登录接口,用于小程序或者APP获取token,并使用若依的验证方法

LoginController类 具体代码 /*** app 登录*/AnonymousAccessPostMapping("login")public AjaxResult login(RequestBody LoginBody loginBody) {AjaxResult ajax AjaxResult.success();// 生成令牌String token loginService.login(loginBody.getUsername(), logi…

【项目实战】登录与注册业务的实现(前端+后端+数据库)

本示例基于Vue.js和mint UI实现。 目录 一、数据库的创建 二、后端接口与数据库的连接 三、前端代码实现 1.注册页相关代码 2.注册页效果 3.登录页相关代码 4.登录页效果 四、注册登录演示 五、项目文件结构 一、数据库的创建 此处以Navicat软件进行创建&#xff0c;新…