【温故而知新-Javascript】对象

简介:

1 创建对象

Javascript 支持对象的概率。有多种方法可以用来创建对象。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = new Object();
    myData.name = "Luka";
    myData.weather = "sunny";

    document.writeln("Hello "+myData.name+".");
    document.writeln("Today is "+myData.weather+".")
</script>
</body>
</html>
复制代码

输出结果:

Hello Luka. Today is sunny. 

 

1.1 使用对象字面量

用对象字面向量的方式可以一口气定义一个对象及其属性。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = {
        name:"Luka",
        weather:"sunny"
    };

    document.writeln("Hello "+myData.name+".");
    document.writeln("Today is "+myData.weather+".")
</script>
</body>
</html>
复制代码

 

1.2 将函数用作方法

对象可以添加属性,也能添加函数。属于一个对象的函数称为其方法。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = {
        name:"Luka",
        weather:"sunny",
        printMessage:function(){
            document.writeln("Hello "+this.name+".");
            document.writeln("Today is "+this.weather+".")
        }
    };

    myData.printMessage();
</script>
</body>
</html>
复制代码

 

2 使用对象

创建对象后,可以用来做许多事。

 

2.1 读取和修改属性值

对象最显而易见的操作是读取或修改属性值

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = {
        name:"Luka",
        weather:"sunny"
    };

    myData.name="Joe";
    myData["weather"]="raining";

    document.writeln("Hello "+myData.name+".");
    document.writeln("It is "+myData["weather"]+".");
</script>
</body>
</html>
复制代码

输出结果:

Hello Joe. It is raining. 

 

2.2 枚举对象

要枚举对象属性可以使用 for...in 语句。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = {
        name:"Luka",
        weather:"sunny",
        printMessages:function(){
            document.writeln("Hello "+this.name+". ");
            document.writeln("Today is "+this.weather+".");
        }
    };

    for(var prop in myData){
        document.writeln("Name: "+prop+" Value: "+myData[prop]+"<br />");
    }
</script>
</body>
</html>
复制代码

显示结果:

Name:name Value:Luka
Name:weather Value:sunny
Name:printMessages Value:function (){ document.writeln("Hello "+this.name+". "); document.writeln("Today is "+this.weather+"."); }

 

2.3 增删属性和方法

就算是用对象字面量生成的对象,也可以为其定义新属性。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = {
        name:"Luka",
        weather:"sunny"
    };

    //为对象添加新属性
    myData.dayOfWeek = "Monday";

    //为对象添加新方法
    myData.sayHello = function(){
        document.writeln("Hello");
    };

    //对象的属性和方法可以用 delete 关键字删除
    delete myData.name;
    delete myData["weather"];
    delete myData.sayHello;
</script>
</body>
</html>
复制代码

 

2.4 判断对象是否具有某个属性

可以用 in 表达式判断对象是否具有某个对象。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Object </title>
</head>
<body>
<script>
    var myData = {
        name:"Luka",
        weather:"sunny"
    };

    var hasName = "name" in myData;
    var hasDate = "date" in myData;

    document.writeln("HasName: "+hasName+"<br />");
    document.writeln("HasDate: "+hasDate);
</script>
</body>
</html>
复制代码

输出结果:

HasName: true
HasDate: false 




本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/5928005.html,如需转载请自行联系原作者
目录
相关文章
|
14天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
23天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
1月前
|
JavaScript 前端开发
JavaScript对象系列(菜菜出品,必看!!!)
JavaScript对象系列(菜菜出品,必看!!!)
|
2月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
28 0
|
17天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
存储 JavaScript 前端开发
在JavaScript中,对象和数组是如何进行扩展的?
在JavaScript中,对象和数组是如何进行扩展的?
22 4
|
1天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
11 3
|
3天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
8天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
10 0