JavaScript交互式网页设计 • 【第5章 JavaScript对象】

是小鞠同学呀

已于 2022-11-29 16:39:08 修改

阅读量103

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2022-11-29 14:05:43 首次发布

本文链接：https://blog.csdn.net/weixin_63078247/article/details/128096355

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript • 【第5章 JavaScript对象】

5.1 Object 对象和 Date 对象

5.1.1 JavaScript 的内部对象

JavaScript 提供了一些非常有用的内部对象，按使用方式可分为两种

实例对象。在引用该对象的属性和方法时，必须先使用 new 关键字创建一个对象实例，然后再使用“对象实例名 . 成员”的格式来进行访问

静态对象。在引用该对象的属性和方法时不需要使用 new 关键字来创建对象实例，可以直接使用“类名 . 成员”的格式来进行访问

5.1.2 Object对象

Object 对象提供了一种创建自定义对象的简单方式，因为它不需要开发人员定义构造函数
在程序运行时可以为JavaScript 对象添加属性，因此使用 Object 对象创建出自定义对象非常简便

对象的属性可以使用索引运算符“[ ]”进行访问

5.1.3 Date对象

通过创建 Date 对象，可以获取本地计算机中的日期与时间
初始化 Date 对象有 4 种方式

new Date() // 当前日期和时间
new Date(milliseconds) // 返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

//制作页面时钟
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1 id="getLocalTime"></h1>
        <script>
        function getLocalTime(){
            var date = new Date();
            document.getElementById("getLocalTime").innerHTML = date.toLocaleString();
        }   
        /* 重复调用 */
        setInterval("getLocalTime()", 1000);
        </script>
    </body>
</html>

每个Date对象都只是计算机的一个毫秒级快照，Date对象只是保存了它被创建时的时间信息

Date 对象的常用方法

方法	功能
getDay()	返回一个月中的某一天（1 ～ 31）
getDay()	返回一周中的某一天（0 ～ 6），0 为周日，1 为周一，以此类推
getFullYear()	以四位数返回年份
getHours()	返回小时（0 ～ 23）
getMilliseconds()	返回毫秒
getMinutes()	返回分钟（0 ～ 59）
getMonth()	返回月份（0 ～ 11），0 为一月，1 为二月，以此类推
getSeconds()	返回秒数（0 ～ 59）
getTime()	返回 1970 年 1 月 1 日至今的毫秒数

5.2 Image对象和Math对象

5.2.1 Image对象

网页中使用图片，只需要调用标签，然后在 src 属性中设置图片的绝对路径或相对路径即可

5.2.2 Math对象

JavaScript 中的基本数值运算符可以用来进行一些简单的数学计算，而使用Math 对象可以进行更多的高级运算，如平方根、三角函数、对数和随机数等

Math对象中常用的方法

方法	功能
Math.abs(number)	返回number 的绝对值
Math.ceil(number)	对number 向上取整
Math.floor(number)	对number 向下取整
Math.max(number1,number2)	返回number1 与number2 中的较大值
Math.min(number1,number2)	返回number1 与number2 中的较小值
Math.pow(x,y)	返回x 的y 次幂
Math.random()	返回0 和1 之间的伪随机数，可能为0，但总是小于1
Math.round(number)	返回最接近number 的整数
Math.sqrt(number)	number 的平方根

5.3 数组和String对象

5.3.1 数组

1、数组列表
数组列表用于表示一组数据的集合，它由一对方括号（[]）包围，列表中的每个元素用逗号分隔，数组元素可以是任意类型的数据（包括其他数组），数组的定义
语法：

var arr=["happy",12,45.6];

每个数组变量都有一个length属性，表示该数组中元素的个数

定义一个数组变量后，就可以使用“数组变量名[索引号]”的格式来访问每个数组元素

数组列表中的第一个元素的索引号为0，其后的每个元素的索引号依次递增，最后的元素索引为数组的长度-1

如果数组元素本身是一个数组，那么这个元素称为子数组，可以使用“数组变量名[子数组索引号][子数组中的元素索引号]”的格式来访问子数组中的元素

2、Array

JavaScript 中提供了一个名为Array 的内部对象，可用它来创建数组。通过调用Array 对象的各种方法，可以方便地对数组进行排序、删除和合并等操作
Array 对象创建数组常用的3种方式
语法：

var arr=new Array()      //数组初始元素个数为0
var arr=new Array(4); //创建具有指定大小的Array 对象
var arr=new Array(1,2,3); //用指定的元素列表去初始化Array 对象，数组的长度是设置的元素的数目

一维数组

var students = new Array();
students = ["张三", "男", 20, 88.5];

var students = new Array("张三", "男", 20, 88.5);

var students = ["张三", "男", 20, 88.5];

二维数组

var area["昆明市"] = ["五华区", "官渡区", "盘龙区", "西山区", "呈贡区", "东川区", "晋宁区"];

数组排序

数组名.sort();

5.3.2 String对象

当某字符串使用单引号或双引号标注时，可以被当作字符串对象实例进行处理，从而直接调用String 对象的属性和方法
常用属性：length
常用方法

方法	描述
charAt()	返回字符串对象中指定索引处的字符，索引从0 开始，如"Hello World".charAt(3)，返回字符"l"
indexOf()	返回某个子字符串在目标字符串中首次出现的位置，如"Hello World".indexOf(“a”)，返回-1，在目标字符串中没有子字符串"a"，故返回-1
substr()	从指定索引位置开始截取指定长度的字符串，如"Hello World".substr(2,3)，返回"llo"。第一个参数表示从索引为2 的字符开始截取，即"l"，第二个参数表示截取的长度
substring()	返回指定索引范围内的字符串，如"Hello World".substring(2,3)，返回"l"，返回索引2和3 间的字符串，并且包括索引2 对应的字符，不包括索引3 对应的字符
toLowerCase()	将字符串转化为小写
toUpperCase()	将字符串转化为大写，如"Hello World".toUpperCase()，返回" HELLO WORLD"
split()	返回按照指定分隔符拆分的若干子字符串数组，如var arr=“hello,world”.split(“,”);arr 是数组变量，其中第一个元素是"hello"，第二个元素是"world"

5.4 对象的创建及常用语句

5.4.1 创建对象

类（class）是一个模板，模板描述了本类中所有对象共同的属性和行为
定义JavaScript 类，需要编写一个函数，函数名为对象的类名，在函数体中定义属性和方法，即JavaScript 中的函数也是对象

用function 创建类时，要求属性和方法必须使用this 关键字来引用，表示当前类的实例。

5.4.2 对象常用语句

1、with 语句
在一段连续的程序代码中，在with 关键字后的小括号中写出这个对象的名称，就可以在其后大括号里的执行语句中直接引用该对象的属性名或方法名，省略对象实例名和点（.）
语法：

with( 对象名称){
      执行语句块
}

2、for…in 语句
对某个对象的所有属性进行循环操作，它将某个对象的所有属性名称逐一赋值给一个变量，不需要事先知道对象属性的个数

根据索引取出每个数组元素
语法：

for( 变量 in 对象){
      执行语句
}