美文网首页
9. JavaScript对象与数组

9. JavaScript对象与数组

作者: 辘轳鹿鹿 | 来源:发表于2020-09-02 12:37 被阅读0次

对象是JavaScript最基本的数据类型之一,是一种复合的数据类型;数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。

9.1 创建对象的方法

JavaScript对象是拥有属性和方法的数据。例如,在现实生活中,一辆汽车是一个对象,它具有自己的属性, 如重量、颜色等,方法有启动、停止等。 JavaScript 中创建对象有以下几种方法。

9.1.1 使用内置对象创建

JavaScript 可用的内置对象可分为两种:一种是语言级对象,如 String、Object、Function 等;另一种是环境宿主级对象,如 window、document、body 等。通常,我们所说的使用内置对象,是指通过语言级对象的构造方法,创建出一个新的对象。

var str = new String("初始化String");
var str1 = "直接赋值的String";
var func = new Function("x","alert(x)"); //初始化func
var o = new Object(); //初始化一个Object对象

9.1.2 直接定义并创建

直接定义并创建对象,易于阅读和编写,同时也易于对其解析和生成。直接定义并创建采用“键/值对”集合的形式。在这种形式下,一个对象以“{”(左括号)开始,“ }”(右括号)结束。每个“名称”后跟 一个“:”(冒号),“ 键 / 值对”之间使用“,”(逗号)分隔。


<!DOCTYPE html>
<html>
<head>
<title>创建JavaScript对象</title>
</head>
<body>
<script>
    person={firstname:"刘",lastname:"天佑",age:3,eyecolor:"black"}
    document.write(person.firstname+person.lastname+"现在"+person.age+"岁了");
</script>
</body>
</html>

9.1.3 自定义对象构造创建

创建高级对象构造有两种方式:一种是使用this关键字构造;另一种是使用prototype构造。

//使用this关键字
function person()
{
this.name="刘天佑";
this.age=3;
}
//使用prototype
function person(){}
person.prototype.name="刘天佑";
person.prototype.age=3;
alert(new person().name);

9.2 常用内置对象

9.2.1 String对象

String(字符串)对象是 JavaScript 的内置对象,属于动态对象,需要创建对象实例后才能引用该对象的属性和方法,该对象主要用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。
1. 创建 String 对象

//第一种:直接创建
var txt = "string";
//第二种:使用new关键字来创建
var txt = new String("string");

2. String 对象属性

String对象的属性

3. String 对象的方法

String对象的方法

9.2.2 Date对象

1. 创建 Date 对象

var d = new Date(); //当前日期和时间
var d = new Date(milliseconds); //返回从1970年1月1日至今的毫秒数
var d = new Date(dateString);
vat d = new Date(year,month,day,hours,minutes,seconds,milliseconds);
<!DOCTYPE html>
<html>
<head>
<title>创建日期对象</title>
<script>
//以当前时间创建一个日期对象
var myDate1=new Date();
//将字符串转换成日期对象,该对象代表日期为2017年6月10日
var myDate2=new Date("June 10,2017");
//将字符串转换成日期对象,该对象代表日期为2017年6月10日
var myDate3=new Date("2017/6/10");
//创建一个日期对象,该对象代表日期和时间为2017年10月19日16时16分16秒
var myDate4=new Date(2017,10,19,16,16,16);
//创建一个日期对象,该对象代表距离1970年1月1日0分0秒20000毫秒的时间
var myDate5=new Date(20000);
//分别输出以上日期对象的本地格式
document.write("myDate1所代表的时间为:"+myDate1.toLocaleString()+"<br>");
document.write("myDate2所代表的时间为:"+myDate2.toLocaleString()+"<br>");
document.write("myDate3所代表的时间为:"+myDate3.toLocaleString()+"<br>");
document.write("myDate4所代表的时间为:"+myDate4.toLocaleString()+"<br>");
document.write("myDate5所代表的时间为:"+myDate5.toLocaleString()+"<br>");
</script>
</head>
<body>
</body>
</html>

2. Date 对象的属性

Date 对象的属性

3. Date 对象的常用方法
Date对象的方法可分为3大组:setXxx(用于设置时间和日期值)、getXxx(用于获取时间和日期值)、toXxx(将日期转换成制定的格式)。

<!DOCTYPE html>
<html>
<head>
<title>在网页中显示时钟</title>
<script>
function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    //在小于10的数前加个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    //表示的是在500毫秒之后执行function这个方法或者是代码。
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if(i<10){
        i="0"+i;
    }
    return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

9.2.3 Array对象

Array(数组)对象是JavaScript 中常用的内置对象之一,通过调用Array对象的各种方法,可以方便地对数组进行排序、删除、合并等操作

9.2.4 Boolean对象

Boolean(逻辑)对象用于转换一个不是Boolean 类型的值,转换的结果为 Boolean 类型值,包括 true 和 false。
1. 创建 Boolean 对象

//如果布尔对象无初始值或者其值为:0、-0、null、“”、false、undefined和NaN,那么对象的值为false。否则其值为true。
var myBoolean = new Boolean();

2. Boolean 对象的属性

Boolean对象的属性

3. Boolean 对象的方法

Boolean对象的方法

9.2.5 Math对象

Math(算术)对象的作用是:执行常见的算术任务。这是因为Math对象提供了大量的数学常量和数学函 数。在使用Math 对象时,不能使用关键字new 来创建对象实例,而应直接使用“对象名. 成员”的格式来 访问其属性和方法。
1. 创建 Math 对象

Math.[{property|method}]
var x=Math.PI
var y=Math.sqrt(16)

2. Math 对象的属性

Math对象的属性

3. Math 对象的方法

9.2.6 Number对象

Number(数值)对象是原始数值的包装对象,代表数值数据类型和提供数值的对象,如果一个参数值不能转换为一个数字将返回 NaN ( 非数字值 )。
1. 创建 Number 对象

//value为可选项,是新对象的数字值。如果忽略value,则返回值为0。
var num = new Number(value);

2. Number 对象的属性

Number对象的属性

3. Number 对象的方法

Number对象的方法

相关文章

网友评论

      本文标题:9. JavaScript对象与数组

      本文链接:https://www.haomeiwen.com/subject/agxnjktx.html