Javascript基础语法(二)对象_js 对象保二级-优快云博客

本文链接：https://blog.youkuaiyun.com/asdasd1fdsyrt/article/details/110528753

Javascript基础用法

- 8.JS中的对象

8.JS中的对象

在这里插入图片描述

8.1 Array数组的创建

js：可以保存不同类型的数据，同时长度不固定。可以把其理解成Java中的ArrayList。

创建空数组：var arr = new Array();
创建指定容量的数组：var arr = new Array(size);
创建数组并填充元素：var arr = new Array(a,b,c...);
创建元素数组：var arr = [a,b,c...];

<script>
    // 定义一个数组, 并初始化元素
    var arr = ["aaa", 111, 88.7, true]; 
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 获取元素
        document.write(i + " = " + arr[i] + " <br />");
    }
    document.write("arr.length = " + arr.length + " <br />");
</script>

在这里插入图片描述

键值对

 var kv = {};
  kv["a"] = "A";
  kv["b"] = "B";
  console.log(kv);
  //{ a: "A", b: "B" }
  kv.c = "C";
  kv.d = "D";
  console.log(kv);
  //{ a: "A", b: "B", c: "C", d: "D" }
  
  var kv1 = { a: "A", b: "B" };
  console.log(kv1);
  //{ a: "A", b: "B" }
  
  var kv2 = { a: "A", b: "B" };//js对象
  var kv3 = { "aa": "A", "bb": "B" };//json格式的对象
 
  //json格式的对象 数组(可以嵌套)
  var arrayKV=[{ "aa": "A", "bb": "B" },{ "aa": "A", "bb": "B" },{ "aa": "A", "bb": "B" }];

8.2. Date日期对象

创建日期对象

创建当前日期时间：var date = new Date();
创建指定日期时间：var date = new Date(毫秒值);
//其中毫秒值为1970-01-01至今的时间毫秒值

时间获取方法

年：getFullYear()			以四位数字返回年份 
月：getMonth()			    返回月份 (0 ~ 11)
日：getDate() 				返回一个月中的某一天
星期：getDay()			    返回一周中的某一天 (0 ~ 6)，0代表周日
小时：getHours() 			返回小时（0 ~ 23）
分：getMinutes() 			返回分钟（0 ~ 59）
秒：getSeconds() 			返回秒数（0 ~ 59）
毫秒值：getTime()			返回 1970 年 1 月 1 日至今的毫秒数
toLocaleString()			把Date对象转换为字符串
toLocaleDateString()		把Date对象的日期部分转换为字符串
toLocaleTimeString()		把Date对象的时间部分转换为字符串

运用

<script>
    // 定义一个 Date 日期对象
    var date = new Date();
    document.write("当前日期对象 : " + date + "<br />");
    document.write("日期字符串 : " + date.toLocaleString() + "<br />");
    document.write("当前年月日 : " + date.toLocaleDateString() + "<br />");
    document.write("当前时分秒 : " + date.toLocaleTimeString() + "<br />");

    document.write("年 : " + date.getFullYear() + "<br />");
    document.write("月 : " + (date.getMonth() + 1) + "<br />");
    document.write("日 : " + date.getDate() + "<br />");
    document.write("时 : " + date.getHours() + "<br />");
    document.write("分 : " + date.getMinutes() + "<br />");
    document.write("秒 : " + date.getSeconds() + "<br />");
</script>

在这里插入图片描述
8.3 Math对象

Math.random() 返回 0.0 ~ 1.0 之间的随机double小数

运用：随机点名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机点名</title>
</head>
<body>
    <input type="button" value="开始！" />
    <input type="button" value="停止！" />
    <h1>等待抽奖！</h1>
</body>
 
<script>
    // 页面加载完成入口
    window.onload = function () {
        // 1. 获取标签 (数组)
        var inputs = document.getElementsByTagName("input");
        var h1 = document.getElementsByTagName("h1");
        //数组存储人名
        var arrayName = ["张三", "李四", "王五", "赵六", "田七"];
        // 定义一个定时器 timer 
        var timer;

        // 2. 开始 按钮单击事件
        inputs[0].onclick = function () {
            // **定时器的 bug, 开启新定时器之前, 必须先关闭就定时器.
            window.clearInterval(timer);
            // 3. 循环定时器
            timer = window.setInterval(function () {
                // 4. 生成一个随机下标
                var index = window.parseInt(Math.random() * arrayName.length + "");
                // 5. 根据下标取出对应的名称, 更换 h1 标签中的内容.
                h1[0].innerHTML = arrayName[index];
            }, 30);
        }

        // 停止 按钮单击事件
        inputs[1].onclick = function () {
            window.clearInterval(timer);    //关闭定时器
        }
    }
</script>
</html>

在这里插入图片描述