Javascript 从入门到精通之JavaScript属性

一、什么是属性?

属性是一个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 关键字不删除继承的属性，但如果删除原型属性，则会影响从原型继承的所有对象。

添加新属性

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

假设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的命名规则。

删除属性

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 语句遍历对象的属性的应用，都做了详细的讲解。通过用丰富的案例帮助大家更好理解。

Javascript 从入门到精通之JavaScript属性

猜你喜欢