JavaScript 对象属性

属性是所有 JavaScript 对象最重要的部分。

JavaScript 属性

属性指的是与 JavaScript 对象相关的值。

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

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

访问 JavaScript 属性

访问对象属性的语法是：

objectName.property           // person.age

或者

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

或者

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

表达式必须计算为属性名。

例子 1

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>访问对象属性有两种不同的方法：</p>
<p>您可以使用 .property 或 ["property"]。</p>
<p id="demo"></p>
<script>
var person = {
  firstname:"埃隆",
  lastname:"马斯克",
  age:50,
  eyecolor:"蓝色"
};
document.getElementById("demo").innerHTML = person.firstname + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>

运行一下

例子 2

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>访问对象属性有两种不同的方法：</p>
<p>您可以使用 .property 或 ["property"]。</p>
<p id="demo"></p>
<script>
var person = {
  firstname:"埃隆",
  lastname:"马斯克",
  age:50,
  eyecolor:"蓝色"
};
document.getElementById("demo").innerHTML = person["firstname"] + " 已经 " + person["age"] + " 岁了。";
</script>
</body>
</html>

运行一下

JavaScript for…in 循环

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

语法

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

for…in 循环中的代码块会为每个属性执行一次。循环对象的属性：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象属性</h2>
<p>循环对象的属性值:</p>
<p id="demo"></p>
<script>
const person = {
  firstname:"埃隆",
  lastname:"马斯克",
  age:50
};
let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

运行一下

添加新属性

您可以通过简单的赋值，向已存在的对象添加新属性。

假设 person 对象已存在 - 那么您可以为其添加新属性：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象属性</h2>
<p>添加一个新属性到已存在的对象:</p>
<p id="demo"></p>
<script>
const person = {
  firstname:"埃隆",
  lastname:"马斯克",
  age:50,
  eyecolor:"蓝色"
};
person.nationality = "美国人";
document.getElementById("demo").innerHTML =
person.firstname + " 是 " + person.nationality + ".";
</script>
</body>
</html>

运行一下

您不能使用预留词作为属性名（或方法名）。请使用 JavaScript 命名规则。

删除属性

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象属性</h2>
<p>删除对象属性</p>
<p id="demo"></p>
<script>
const person = {
  firstname:"埃隆",
  lastname:"马斯克",
  age:50,
  eyecolor:"蓝色"
};
delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>

运行一下

也可以这样删除：

delete person[age];

delete 关键词会同时删除属性的值和属性本身。

删除完成后，属性在被添加回来之前是无法使用的。

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

delete 操作符不应被用于预定义的 JavaScript 对象属性。这样做会使应用程序崩溃。

多层嵌套的对象

myObj = {
  name:"约翰",
  age:30,
  cars: {
    car1:"奔驰",
    car2:"宝马",
    car3:"玛莎拉蒂"
  }
}

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

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 对象属性</h2>
<p>访问多层嵌套对象:</p>
<p id="demo"></p>
<script>
const myObj = {
  name:"约翰",
  age:30,
  cars: {
    car1:"奔驰",
    car2:"宝马",
    car3:"玛莎拉蒂"
  }
}
document.getElementById("demo").innerHTML = myObj.cars.car2;
</script>
</body>
</html>

运行一下

或者这样

myObj.cars["car2"];

或者

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

再或者

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

嵌套数组和对象

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

const myObj = {
  name: "约翰",
  age: 30,
  cars: [
    {name:"奔驰", "models":["GLA", "GLC", "GLS"]},
    {name:"宝马", "models":["X1", "X3", "X5"]},
    {name:"保时捷", "models":["Macan", "Cayenne"]}
  ]
}

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

<!DOCTYPE html>
<html>
<body>
<h2>嵌套数组和对象</h2>
<p id="demo"></p>
<script>
let x = "";
const myObj = {
  name: "约翰",
  age: 30,
  cars: [
       {name:"奔驰", "models":["GLA", "GLC", "GLS"]},
    {name:"宝马", "models":["X1", "X3", "X5"]},
    {name:"保时捷", "models":["Macan", "Cayenne"]}
  ]
}
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 中，所有属性都是可读的，但是只有值是可修改的（只有当属性为可写时）。

原型属性

JavaScript 对象继承了它们的原型的属性。

delete 关键词不会删除被继承的属性，但是如果您删除了某个原型属性，则将影响到所有从原型继承的对象。

JavaScript 对象属性

JavaScript 属性

访问 JavaScript 属性

例子 1

例子 2

JavaScript for…in 循环

语法

添加新属性

删除属性

多层嵌套的对象

嵌套数组和对象

属性值

原型属性

分类导航