当前栏目
一篇文章带你了解JavaScript属性
一、什么是属性?
属性是一个JavaScript对象关联的值。一个JavaScript对象是一个无序的性质集合,属性通常可以更改、添加和删除,但有些只读。
二、访问JavaScript属性
访问对象属性的语法是(3种表现形式):
第一种
- objectName.property // person.age
第二种
- objectName["property"] // person["age"]
第三种
- objectName[expression] // x = "age"; person[x]
表达式必须是一个正确的属性名
- <!DOCTYPE html>
- <html lang="en">
- <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.";
- </script>
- </body>
- </html>
- //复制上面代码,替换不同语句,实现功能。
- person["firstname"] + " is " + person["age"] + " years old.";
1 . 原型属性
JavaScript 对象继承它们的prototype属性。
delete 关键字不删除继承的属性,但如果删除原型属性,则会影响从原型继承的所有对象。
2. 添加新属性
可以添加新的属性到现有的对象,只要给它一个值.
假设person对象已经存在-你可以给它新的属性:
- person.nationality = "English";
完整代码:
- <!DOCTYPE html>
- <html lang="en">
- <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 + ".";
- </script>
- </body>
- </html>
注:
不能为属性(或方法)名称使用保留字。JavaScript的命名规则。
3. 删除属性
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 循环里面的每个属性将执行一次。
循环对象属性:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>项目</title>
- </head>
- <body style="background-color: aqua;">
- <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;
- </script>
- </body>
- </html>
四、总结
本文主要介绍了JavaScript 属性,介绍了如何访问一个属性,如何去创建原型属性,如何去添加一个新的属性,如何去删除一个属性,以及在for...in 语句遍历对象的属性的应用,都做了详细的讲解。通过用丰富的案例帮助大家更好理解。
希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?