系统自学Javascript的第四天

慢三步上篮

已于 2022-04-01 14:49:54 修改

阅读量1.1k

点赞数 5

分类专栏： javascript 文章标签： javascript 前端经验分享

于 2022-04-01 10:19:02 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45725653/article/details/123891196

版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JavaScript中的基础对象，包括JS对象创建、Number、String、Array、Date、Math、RegExp、DOM、Navigator和History对象。内容涵盖对象创建、数字处理、字符串操作、数组操作、日期操作、数学计算、正则表达式使用、文档对象模型以及浏览器相关信息的获取，是学习JavaScript的宝贵资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JS对象的创建与使用

var person = {
    name: "Sstep",
    age: 20,
    gender: "hanzi",
    displayName: function() {
        document.write(this.name);
    }
};

document.write("姓名：" + person.name );   
//输出 姓名：Sstep
document.write("年龄：" + person["age"]);  
//输出 年龄：20

/设置或修改
person.phone = "12345678";
person.age = 19;
person["name"] = "S3step";

/删除
delete person.gender;
delete person["phone"];    //这两种方法都可以

/调用对象
person.displayName();       
person["displayName"]();  //这两种方法都可以

2.JS number对象

Tips : JS中的数字并不区分整数和浮点数

    var x = 123;    // 整数
    var y = 3.14;   // 浮点数
    var z = 0xff;   // 十六进制数：255
    var x = 015;    //八进制数：13
    
    var a = new Number("123");
    var b = Number("456");
    var c = 789;
    var d = new Number("abc");
    document.write(typeof a + "<br>");      // 输出：object
    document.write(typeof b + "<br>");      // 输出：number
    document.write(typeof c + "<br>");      // 输出：number
    document.write(d + "<br>");             // 输出：NaN
    //NaN表示非数字

3.JS string(字符串)对象

<!DOCTYPE html>
<html>
<body>
<script>
    var str = new String('JavaScript');
    String.prototype.name = null;
    str.name = "Hello World!";
    var fruits = [ "apple", "orange", "mango" ];
    document.write(fruits[0] + "<br>");     // 输出：apple
    document.write(fruits[1] + "<br>");     // 输出：orange
    document.write(fruits[2] + "<br>");     // 输出：mango
    document.write(str.constructor + "<br>");       // 输出：function String() { [native code] }
    document.write(str.length + "<br>");            // 输出：10
    document.write(str.name);                       // 输出：Hello World!
</script>
</body>
</html>

4.JS array(数组)对象

<!DOCTYPE html>
<html>
<body>
<script>
        var cars = new Array("Saab", "Volvo", "BMW");
    Array.prototype.name = null;
    cars.name = "JavaScript";
    document.write(cars.constructor + "<br>");      // 输出：function Array() { [native code] }
    document.write(cars.length + "<br>");           // 输出：3
    document.write(cars.name + "<br>");             // 输出：JavaScript
</script>
</body>
</html>

5.JS Data对象

<!DOCTYPE html>
<html>
<body>
<script>
     var time1 = new Date();
    var time2 = new Date(1517356800000);
    var time3 = new Date("2011/12/25 12:13:14");
    var time4 = new Date(2022, 9, 12, 15, 16, 17);
    document.write(time1 + "<br>");     // 输出：Fri Jul 23 2021 13:41:39 GMT+0800 (中国标准时间)
    document.write(time2 + "<br>");     // 输出：Wed Jan 31 2018 08:00:00 GMT+0800 (中国标准时间)
    document.write(time3 + "<br>");     // 输出：Tue Dec 25 2011 12:13:14 GMT+0800 (中国标准时间)
    document.write(time4 + "<br>");     // 输出：Mon Oct 12 2022 15:16:17 GMT+0800 (中国标准时间)

    var time = new Date();
    Date.prototype.name = null;
    time.name = "JavaScript";
    document.write(time.constructor + "<br>");      // 输出：function Date() { [native code] }
    document.write(time.name + "<br>");             // 输出：JavaScript
</script>
</body>
</html>

6.JS Math对象

<!DOCTYPE html>
<html>
<body>
<script>
   document.write(Math.abs(-3.1415) + "<br>");    // 输出绝对值：3.1415
   document.write(Math.pow(2, 3) + "<br>");       // 输出x的y次幂：8
</script>
</body>
</html>

math函数太多了pop

7.JS RegExp(正则表达式)对象

Tips ：正则表达式是一种用于匹配字符串或特殊字符的一种逻辑公式，所谓逻辑公式就是由一些特定字符组合成的，用来表示某些规则的特殊字符串，可以表达对字符串数据的过滤逻辑。

<!DOCTYPE html>
<html>
<body>
<script>
    /*var patt = new RegExp(pattern, modifiers);
    var patt = /pattern/modifiers;
    pattern：正则表达式，按照正则表达式的语法定义的正则表达式；
    modifiers：修饰符，用来设置字符串的匹配模式*/
    
    var str = "Hello World!";
    var reg = /[a-g]/g;
    document.write(reg.exec(str) + "<br>");             // 输出：e
    document.write(reg.test(str) + "<br>");             // 输出：true
    document.write(reg.toString() + "<br>");            // 输出：/[a-g]/g
    document.write(str.search(reg) + "<br>");           // 输出：1
    document.write(str.match(reg) + "<br>");            // 输出：e,d
    document.write(str.matchAll(reg) + "<br>");         // 输出：[object RegExp String Iterator]
    document.write(str.replace(reg, "+") + "<br>");     // 输出：H+llo Worl+!
    document.write(str.split(reg) + "<br>");            // 输出：H,llo Worl,!
</script>
</body>
</html>

8.JS DOM（文档对象模型）

文档对象模型，是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。

//这个内容太多了,还要单独学一学pop

9.JS Navigator对象

JavaScript navigator 对象中存储了与浏览器相关的信息，例如名称、版本等，我们可以通过 window 对象的 navigator 属性（即 window.navigator）来引用 navigator 对象，并通过它来获取浏览器的基本信息。

由于 window 对象是一个全局对象，因此在使用 window.navigator 时可以省略 window 前缀，例如 window.navigator.appName 可以简写为 navigator.appName。

<!DOCTYPE html>
<html>
<body>
<script>
    document.write("navigator.appCodeName：" + navigator.appCodeName + "<br>");
    //返回浏览器的内部名称（开发代号）
    document.write("navigator.appName：" + navigator.appName + "<br>");
    //返回浏览器的官方名称
    document.write("navigator.appVersion：" + navigator.appVersion + "<br>");
    //返回浏览器的平台和版本信息
    document.write("navigator.cookieEnabled：" + navigator.cookieEnabled + "<br>");
    //返回浏览器是否启用 cookie，启用返回 true，禁用返回 false
    document.write("navigator.onLine：" + navigator.onLine + "<br>");
    //返回浏览器是否联网，联网则返回 true，断网则返回 false
    document.write("navigator.platform：" + navigator.platform + "<br>");
    //返回浏览器运行的操作系统平台
    document.write("navigator.userAgent：" + navigator.userAgent + "<br>");
    //返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称
</script>
</body>
</html>

10.JS History对象

JavaScript history 对象中包含了用户在浏览器中访问过的历史记录，其中包括通过浏览器浏览过的页面，以及当前页面中通过<iframe>加载的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        document.write(history.length + "<br>");
        //输出页面数
        document.write(history.scrollRestoration + "<br>");
        //是否支持滚动
        document.write(history.state + "<br>");
        //URL状态信息
    </script>
</body>
</html>