JavaScript 对象属性

属性是任何JavaScript对象最重要的部分

JavaScript 属性

属性指的是与 JavaScript 对象相关的值。JavaScript 对象是无序属性的集合。属性通常可以被修改、添加和删除,但是某些属性是只读的。

访问 JavaScript 属性

访问对象属性的语法是:

objectName.property           // person.age

或者:

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

或者:

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

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

例子 1

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script>
        var person = {
            firstname: "Rose",
            lastname: "li",
            age: 20,
            color: "pick"
        };
        document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old.";
    </script>
</body>

</html>
//Rose is 20 years old.

例子 2

<!DOCTYPE html>
<html>

<body>

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

    <script>
        var person = {
            firstname: "Rose",
            lastname: "li",
            age: 20,
            color: "pick"
        };

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

</body>

</html>
//Rose is 20 years old.

JavaScript for...in 循环

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

for (variable in object) {
    要执行的代码
}

for...in 循环中的代码块会为每个属性执行一次

<!DOCTYPE html>
<html>

<body>

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

    <script>
        var txt = "";
        var person = { fname: "Rose", lname: "Li", age: 20 };
        var x;
        for (x in person) {
            txt += person[x] + " ";
        }

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

</body>

</html>
//Rose Li 20

添加新属性

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

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

实例

<!DOCTYPE html>
<html>

<body>

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

    <script>
        var person = {
            firstName: "Rose",
            lastName: "Li",
            age: 20,
            color: "blue"
        }
        person.nationality = "China";
        document.getElementById("demo").innerHTML = person.firstName + " is " + person.nationality + " .";
    </script>

</body>

</html>
//Rose is China .

删除属性

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

<!DOCTYPE html>
<html lang="en">
<body>
    <p id="demo"></p>
    <script>
        var person={
            frirstname:"Rose",
            lastname:"Tina",
            age:20,
            color:"blue"
        }
        delete person.age;
        document.getElementById("demo").innerHTML=
        person.frirstname+" is "+person.age+" years old";
    </script>

</body>
</html>
//Rose is undefined years old

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

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

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

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

属性值

所有属性都有名称。此外它们还有值。值是属性的特性之一。

其他特性包括:可列举、可配置、可写。

这些特性定义了属性被访问的方式(是可读的还是可写的?)

在 JavaScript 中,所有属性都是可读的,但是只有值是可修改的(只有当属性为可写时)。

(ECMAScript 5 拥有获取和设置所有属性特性的方法)

原型属性

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

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

相关推荐
燃先生._.3 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
fantasy_arch4 小时前
CPU性能优化-磁盘空间和解析时间
网络·性能优化
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
2401_857600956 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600956 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL6 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
小白学大数据6 小时前
如何使用Selenium处理JavaScript动态加载的内容?
大数据·javascript·爬虫·selenium·测试工具
是Dream呀6 小时前
Python从0到100(七十八):神经网络--从0开始搭建全连接网络和CNN网络
网络·python·神经网络