-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
小职
2020-11-11
来源 ：「前端进阶学习交流」
阅读 1306
评论 0
摘要：属性是一个JavaScript对象关联的值，本篇主要介绍了Web前端JavaScript属性，希望对web前端的学习有所帮助。
属性是一个JavaScript对象关联的值，本篇主要介绍了Web前端JavaScript属性，希望对web前端的学习有所帮助。
一、什么是属性?
属性是一个JavaScript对象关联的值。一个JavaScript对象是一个无序的性质集合，属性通常可以更改、添加和删除，但有些只读。
二、访问JavaScript属性
访问对象属性的语法是(3种表现形式):
第一种
objectName.property // person.age
第二种
objectName["property"] // person["age"]
第三种
objectName[expression] // x = "age"; person[x]
表达式必须是一个正确的属性名
<!DOCTYPE html>
<html>
<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.";
1 . 原型属性
JavaScript 对象继承它们的prototype属性。
delete 关键字不删除继承的属性，但如果删除原型属性，则会影响从原型继承的所有对象。
2. 添加新属性
可以添加新的属性到现有的对象，只要给它一个值.
假设person对象已经存在-你可以给它新的属性:
person.nationality = "English";
完整代码：
<!DOCTYPE html>
<html>
<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>
注：
不能为属性(或方法)名称使用保留字。JavaScript的命名规则。
3. 删除属性
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 循环里面的每个属性将执行一次。
循环对象属性:
<!DOCTYPE html>
<html>
<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>
四、总结
本文主要介绍了JavaScript 属性，介绍了如何访问一个属性，如何去创建原型属性，如何去添加一个新的属性，如何去删除一个属性，以及在for...in 语句遍历对象的属性的应用，都做了详细的讲解。通过用丰富的案例帮助大家更好理解。
关注“职坐标在线”（Zhizuobiao_Online）公众号，免费获取最新技术干货教程资源哦
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
