JavaScript 属性

属性是与 JavaScript 对象关联的值。

JavaScript 对象是无序属性的集合。

属性通常可以更改、添加和删除，但有些属性是只读的。

访问 JavaScript 属性

访问对象属性的语法是：

objectName.property      // person.age

或者

objectName["property"]   // person["age"]

或者

objectName[expression]   // x = "age"; person[x]

该表达式的计算结果必须是属性名称。

实施例1

person.firstname + " is " + person.age + " years old.";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with .property:</p>

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

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

实施例2

person["firstname"] + " is " + person["age"] + " years old.";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Access a property with ["property"]:</p>

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

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

document.getElementById("demo").innerHTML = person["firstname"] + " is " + person["age"] + " years old.";
</script>

</body>
</html>

JavaScript for...in 循环

JavaScript for...in 语句循环访问对象的属性。

句法

for (let variable in object) {
      // code to be executed
 }

for...in 循环内的代码块将为每个属性执行一次。

循环遍历对象的属性：

例子

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
    txt += person[x];
 }

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Looping object property values:</p>

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

<script>
const person = {
  fname:"John",
  lname:"Doe",
  age:25
}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

添加新属性

您可以通过简单地给现有对象赋值来向其添加新属性。

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

例子

person.nationality = "English";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Add a new property to an existing object:</p>

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

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>

</body>
</html>

删除属性

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

例子

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

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

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person.age;

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

或删除人[“年龄”]；

例子

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Properties</h2>
<p>Deleting object properties.</p>

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

<script>
const person = {
  firstname: "John",
  lastname: "Doe",
  age: 50,
  eyecolor: "blue"
};

delete person["age"];

document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>

</body>
</html>

delete 关键字会删除属性的值和属性本身。

删除后，该属性在重新添加回来之前无法使用。

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

不应在预定义的 JavaScript 对象上使用 delete 运算符特性。它可能会使您的应用程序崩溃。

嵌套对象

一个对象中的值可以是另一个对象：

例子

myObj = {
  name:"John",
  age:30,
    
  cars: {
    car1:"Ford",
      
  car2:"BMW",
    car3:"Fiat"
    }
}

您可以使用点符号或方括号符号访问嵌套对象：

例子

myObj.cars.car2;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

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

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>

</body>
</html>

或者：

例子

myObj.cars["car2"];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

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

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj.cars["car2"];
</script>

</body>
</html>

或者：

例子

myObj["cars"]["car2"];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

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

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}
document.getElementById("demo").innerHTML = myObj["cars"]["car2"];
</script>

</body>
</html>

或者：

例子

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Access nested objects:</p>

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

<script>
const myObj = {
  name: "John",
  age: 30,
  cars: {
  car1: "Ford",
  car2: "BMW",
  car3: "Fiat"
  }
}

let p1 = "cars";
let p2 = "car2";
document.getElementById("demo").innerHTML = myObj[p1][p2];
</script>

</body>
</html>

嵌套数组和对象

对象中的值可以是数组，数组中的值也可以是对象：

例子

const myObj =
  {
  name: "John",
  age: 30,
    
  cars: [
    {name:"Ford", 
  models:["Fiesta", "Focus", "Mustang"]},
    
  {name:"BMW", models:["320", "X3", "X5"]},
      
  {name:"Fiat", models:["500", "Panda"]}
    ]
}

要访问数组内部的数组，请对每个数组使用 for-in 循环：

例子

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name 
  + "</h1>";
  for (let j in myObj.cars[i].models) {
    
  x += myObj.cars[i].models[j];
  }
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Nested JavaScript Objects and Arrays.</h2>

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

<script>
let x = "";
const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

for (let i in myObj.cars) {
  x += "<h2>" + myObj.cars[i].name + "</h2>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j] + "<br>";
  }
}

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

属性属性

所有属性都有一个名称。此外，它们也有其价值。

该值是属性的属性之一。

其他属性包括：可枚举、可配置和可写。

这些属性定义了如何访问该属性（是否可读？，是否可写吗？）

在 JavaScript 中，所有属性都可以读取，但只能读取 value 属性被更改（并且仅当属性可写时）。

（ ECMAScript 5 具有获取和设置所有属性的方法属性）

原型属性

JavaScript 对象继承其原型的属性。

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

JavaScript 属性

目录