Javascript 从入门到精通之JavaScript属性

news2024/10/5 14:19:47

一、什么是属性?

属性是一个JavaScript对象关联的值。一个JavaScript对象是一个无序的性质集合,属性通常可以更改、添加和删除,但有些只读。

二、访问JavaScript属性

访问对象属性的语法是(3种表现形式):

第一种

objectName.property // person.age

第二种

objectName[“property”] // person[“age”]

第三种

objectName[expression] // x = “age”; person[x]

表达式必须是一个正确的属性名

<head>

    <meta charset="UTF-8">

    <title>项目</title>

</head>

<body style="background-color: aqua;">

    <p>有两种方法可以访问对象属性:</p>

    <p>你可以使用 .property 或者 ["property"].</p>

    <p id="demo"></p>

    <script>

        var person = {

            firstname: "John",

            lastname: "Doe",

            age: 50,

            eyecolor: "blue"

        };

        document.getElementById("demo").innerHTML =

            person.firstname + " is " + person.age + " years old.";
</body>

//复制上面代码,替换不同语句,实现功能。

person[“firstname”] + " is " + person[“age”] + " years old.";
在这里插入图片描述
1 . 原型属性

JavaScript 对象继承它们的prototype属性。

delete 关键字不删除继承的属性,但如果删除原型属性,则会影响从原型继承的所有对象。

  1. 添加新属性

可以添加新的属性到现有的对象,只要给它一个值.

假设person对象已经存在-你可以给它新的属性:

person.nationality = “English”;

完整代码:

<head>

    <meta charset="UTF-8">

    <title>项目</title>

</head>

<body style="background-color: aqua;">

    <p>你可以为现有对象添加新的属性.</p>

    <p id="demo"></p>

    <script>

        var person = {

            firstname: "John",

            lastname: "Doe",

            age: 50,

            eyecolor: "blue"

        };

        person.nationality = "English";

        document.getElementById("demo").innerHTML =

            person.firstname + " is " + person.nationality + ".";

</body>
![在这里插入图片描述](https://img-blog.csdnimg.cn/03281bd0d5864c41a51040ae04a8a411.png) 注:

不能为属性(或方法)名称使用保留字。JavaScript的命名规则。

  1. 删除属性

delete 关键字从对象中删除属性:

var person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”};

delete person.age; // or delete person[“age”];
在这里插入图片描述
delete 关键字同时删除属性的值和属性本身。

删除后,属性不能再使用之前的方法重新添加。

delete 运算符被设计用于对象属性。它对变量或函数没有影响

delete 运算符不得使用预定义JavaScript对象的属性。它可以使得你的应用程序崩溃。

三、JavaScript for…in 循环

JavaScript for…in 语句可以遍历对象的属性

语法

for (variable in object) {

code to be executed

}

for…in 循环里面的每个属性将执行一次。

循环对象属性:

<meta charset="UTF-8">

<title>项目</title>
<p id="demo"></p>

<script>

  var txt = "";

  var person = {

    fname: "John",

    lname: "Doe",

    age: 25

  };

  var x;

  for (x in person) {

    txt += person[x] + " ";

  }

  document.getElementById("demo").innerHTML = txt;
![在这里插入图片描述](https://img-blog.csdnimg.cn/fb1ffdaeec1d4b258e99e44add708b3c.png) 四、总结

本文主要介绍了JavaScript 属性,介绍了如何访问一个属性,如何去创建原型属性,如何去添加一个新的属性,如何去删除一个属性,以及在for…in 语句遍历对象的属性的应用,都做了详细的讲解。通过用丰富的案例帮助大家更好理解。

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

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

相关文章

哪种模式ip更适合你的爬虫项目?

作为一名爬虫程序员&#xff0c;对于数据的采集和抓取有着浓厚的兴趣。当谈到爬虫ip时&#xff0c;你可能会听说过两种常见的爬虫ip类型&#xff1a;Socks5爬虫ip和HTTP爬虫ip。但到底哪一种在你的爬虫项目中更适合呢&#xff1f;本文将帮助你进行比较和选择。 首先&#xff0c…

CompletableFuture基本概念及用法

CompletableFuture继承于java.util.concurrent.Future&#xff0c;它本身具备Future的所有特性&#xff0c;并且基于JDK1.8的流式编程以及Lambda表达式等实现一元操作符、异步回调以及事件驱动编程的异步类&#xff0c;可以用来实现多线程的串行关系&#xff0c;并行关系&#…

I.MX6ULL_Linux_驱动篇(45)linux INPUT子系统

按键、鼠标、键盘、触摸屏等都属于输入(input)设备&#xff0c; Linux 内核为此专门做了一个叫做 input子系统的框架来处理输入事件。输入设备本质上还是字符设备&#xff0c;只是在此基础上套上了 input 框 架&#xff0c;用户只需要负责上报输入事件&#xff0c;比如按键值、…

Zotero+坚果云解决存储空间不足

Zotero实现同步有三种思路&#xff1a;①zotero自带同步&#xff08;文件同步方式选择Zotero&#xff09;&#xff1b;②zotfile坚果云网盘同步&#xff1b;③zotero选项勾选文件同步坚果云WebDAV同步。由于第一种只有300M使用空间&#xff0c;使用一段时间就会提示存储空间不足…

动态规划(用空间换时间的算法)原理逻辑代码超详细!参考自《算法导论》

动态规划&#xff08;用空间换时间的算法&#xff09;-实例说明和用法详解 动态规划&#xff08;DP&#xff09;思想实例说明钢条切割问题矩阵链乘法问题 应用满足的条件和场景 本篇博客以《算法导论》第15章动态规划算法为本背景&#xff0c;大量引用书中内容和实例&#xff0…

【枚举,构造】CF1582 C D

Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 思路很简单&#xff0c;只删除一种&#xff0c;直接枚举删除的是哪一种即可 但是回文子序列的判定我vp的时候写的很答辩&#xff0c;也不知道为什么当时要从中间往两边扫&#xff0c;纯纯自找麻烦 然后就越改越…

题解:散列查找(拉链法)出现冲突时,在散列表冲突点向外延伸一条链表(单链表),怎么使用memset函数

一、链接 840. 模拟散列表 二、题目 维护一个集合&#xff0c;支持如下几种操作&#xff1a; I x&#xff0c;插入一个数 xx&#xff1b;Q x&#xff0c;询问数 xx 是否在集合中出现过&#xff1b; 现在要进行 NN 次操作&#xff0c;对于每个询问操作输出对应的结果。 输…

SAP 开发编辑界面-关闭助手

打开关闭助手时的开发界面如下&#xff1a; 关闭关闭助手后的界面如下&#xff1a; 菜单栏&#xff1a; 编辑--》修改操作--》关闭助手

VLC视频直播低时延配置

默认的VLC的播放时延是比较高的&#xff0c;一般是秒级别&#xff0c;默认配置的话&#xff0c;都是5秒左右&#xff0c;这种默认配置是为了利用缓存机制&#xff0c;使播放体验更加流畅&#xff0c;对于需要更低时延的播放测试的话&#xff0c;并不适合&#xff0c;需要调整一…

商城-学习整理-基础-商品服务API-属性分组(七)

目录 一、创建系统菜单二、开发属性分组1、将三级分类功能抽取出来2、编写后端代码3、属性分组新增功能4、属性分组修改回显功能 三、品牌管理1、分页显示有点问题&#xff0c;使用MyBatis-Plus有点问题&#xff0c;需要使用分页插件&#xff0c;给容器中放一个2、修改模糊查询…

Netty: 向ChannelPipeline中添加ChannelHandler的顺序

Netty中的ChannelHandler有inbound handler&#xff0c;处理接收数据的过程&#xff1b;有outbound handler&#xff0c;处理发数据的过程。当然&#xff0c;也有的handler既处理接收的数据 &#xff0c;也处理发送的数据。 每个channel对应一个ChannelPipeline。handler被添加…

多语言多用户跨境电商系统搭建--独立站源码制作

开发一个多语言多用户跨境电商系统搭建需要考虑以下几个方面&#xff1a; 1. 系统架构设计&#xff1a;选择一个适合多语言多用户跨境电商系统的开源框架或者自行设计系统架构。确保系统的稳定性和扩展性。 2. 多语言支持&#xff1a;设计一个多语言支持功能&#xff0c;使用…

电子邮件数据加密的工作原理

电子邮件数据加密是通过使用密码学算法对电子邮件的内容进行转换&#xff0c;使得只有授权的接收方能够解读邮件内容。下面是电子邮件数据加密的一般工作原理&#xff1a; 密钥生成&#xff1a;发送方和接收方分别生成自己的密钥对。密钥对通常包括公钥和私钥。公钥用于加密和验…

phonopy中频率单位的换算

phonopy给出的单位是THz&#xff0c;有时会向cm-1和eV单位进行转换。在phonopy中进行单位转换时&#xff0c; 主要是对在phonopy中使用的参数factor进行修改&#xff0c;我们平时声子谱导出使用命令是&#xff1a; phonopy band.conf &#xff08;导出的是默认单位THz&…

Redisson 3.23.1 正式发布,官方推荐的 Redis 客户端

导读Redisson 3.23.1 现已发布&#xff0c;这是一个 Java 编写的 Redis 客户端&#xff0c;具备驻内存数据网格&#xff08;In-Memory Data Grid&#xff09;功能&#xff0c;并获得了 Redis 的官方推荐。 此版本更新内容如下&#xff1a; Improvement 减少了 RLiveObjectSer…

别再被问倒了!Mysql索引竟然在这些情况下失灵?

嗨&#xff0c;亲爱的读者们&#xff01;小米又来啦~ 今天我们要聊一个在数据库面试中常常被问到的热门话题&#xff1a;Mysql索引失效。想要在面试中脱颖而出&#xff0c;掌握这个知识点可是必不可少哦&#xff01;废话不多说&#xff0c;咱们现在就深入剖析一下&#xff0c;看…

SQL Server 查询数据并汇总相关技巧 23.08.08

GROUPING 是一个聚合函数,它产生一个附加的列&#xff0c;当用 CUBE 或 ROLLUP 运算符添加行时&#xff0c;附加的列输出值为1&#xff0c;当所添加的行不是由 CUBE 或 ROLLUP 产生时&#xff0c;附加列值为0。 仅在与包含 CUBE 或 ROLLUP 运算符的 GROUP BY 子句相联系的选择…

【模拟 + 离线】CF1719 C

Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 手摸以下样例容易发现 对于最大值左边的数&#xff0c;答案可以直接模拟轮数得到 对于最大值&#xff0c;答案直接就是pos 对于最大值右边的数&#xff0c;答案就是0 接下来就是如何模拟轮数的问题了 一开始…

直流浪涌保护器与交流浪涌保护器的区别和作用

在现代社会&#xff0c;电力作为生产、生活的重要能源&#xff0c;其稳定供应显得尤为重要。然而&#xff0c;电力系统常常受到电压浪涌的干扰&#xff0c;这种突发的电压冲击可能给设备带来损害。为了应对这一问题&#xff0c;直流浪涌保护器和交流浪涌保护器应运而生&#xf…

Android车机录制视频报错,竟是编码器的锅 ?

1. 现象描述 工作中有一个项目&#xff0c;使用的是CameraView这个第三方相机库来调用相机。 CameraView封装了Camera1和Camera2&#xff0c;内部做了很多功能的封装&#xff0c;API使用起来相对比较简单。 在App中接入后&#xff0c;手机上能够正常录制视频&#xff0c;看上去…