一篇文章带你了解JavaScript属性

╰+哭是因爲堅強的太久メ 2023-10-16 15:22 36阅读 0赞

原创 前端进阶者[一篇文章带你了解JavaScript属性][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.";

![图片][fe283dcf1303846c1ce6b0a952949ff0.png]

##### 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>

![图片][f773a4e05284be6959da2652369ea64f.png]

注：

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

##### 3. 删除属性 #####

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

*  
 *

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};delete person.age;   // or delete person["age"];

![图片][77bfa2a8efbf9323a1acde697518d36a.png]

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>

![图片][5165bd25064f2389d680bf585364a4ec.png]

### 四、总结 ###

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

希望大家可以根据文章的内容，积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

使用JavaScript 语言，方便大家更好理解，希望对大家的学习有帮助。

[JavaScript]: https://mp.weixin.qq.com/s/aYNShIgIJWkWt84L_X8mDQ
[fe283dcf1303846c1ce6b0a952949ff0.png]: https://img-blog.csdnimg.cn/img_convert/fe283dcf1303846c1ce6b0a952949ff0.png
[f773a4e05284be6959da2652369ea64f.png]: https://img-blog.csdnimg.cn/img_convert/f773a4e05284be6959da2652369ea64f.png
[77bfa2a8efbf9323a1acde697518d36a.png]: https://img-blog.csdnimg.cn/img_convert/77bfa2a8efbf9323a1acde697518d36a.png
[5165bd25064f2389d680bf585364a4ec.png]: https://img-blog.csdnimg.cn/img_convert/5165bd25064f2389d680bf585364a4ec.png