JS对象的用法

原创 于 2021-11-29 21:22:40 发布 · 412 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

一、string对象用法

①bold加粗字符串

②fontcolor变换颜色

③fontsize设置字符大小

④link将字符串渲染成超链接

⑤sup设置上标

⑥sub设置下标

⑦concat字符串拼接

⑧charAt获取指定位置的字符

⑨split字符串分割

⑩replace替换字符串

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS中string对象用法</title>

</head>

<body>

<script>

    var s1 = "hello";

    // 加粗字符串

    document.write(s1.bold());

    document.write("<br/>");

    // 变化颜色

    document.write(s1.fontcolor("red"));

    document.write("<br/>");

    // 设置字符大小

    document.write(s1.fontsize(6));

    document.write("<br/>");

    // 将字符串渲染成超链接

    document.write(s1.link("http://www.baidu.com"));

    document.write("<br/>");

    // 设置上标

    var i = "2";

    document.write(s1);

    document.write(i.sup());

    document.write("<br/>");

    // 设置下标

    document.write(s1);

    document.write(i.sub());

    document.write("<br/>");

    // concat字符串拼接

    var str1 = "hello";

    var str2 = "world";

    document.write(str1.concat(str2));

    document.write("<br/>");

    document.write(str1);

    document.write("<br/>");

    document.write(str1 + str2 );

    document.write("<br/>");

    // charAt获取指定位置的字符，与python中的切片类似

    var str3 = "hello world";

    document.write(str3.charAt(4));

    document.write("<br/>");

    // 获取某个元素第一次出现的位置

    document.write(str3.indexOf("l"));

    // 空格也算是一个位置

    document.write("<br/>");

    document.write(str3.indexOf("w"));

    document.write("<br/>");

    // split字符串分割

    var str4 = "my name is 123";

    //把空格变成逗号

    var res = str4.split(" ");

    document.write(str4);

    document.write("<br/>");

    document.write(res);

    document.write("<br/>");

    document.write(res.length);

    document.write("<br/>");

    // replace 替换字符串

    document.write(str4.replace("name","friend"));

</script>

</body>

</html>

二、array对象

①属性：length输出长度

②拼接concat()，不改变原来的数组

③数组转成字符串join()

④从尾部添加元素push()

⑤从头部添加元素unshift()

⑥删除最后一个元素pop()

⑦删除第一个元素shift()

⑧反转reverse()，最后一个元素作为第一个元素

⑨切片，截取slice()，其中的数为开区间， 包头不包尾

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS中array对象</title>

</head>

<body>

<script>

    var arr1 = [1, 2, 3, 4, 5];

    // 1、属性

    // 输出长度

    document.write(arr1.length);

    document.write("<hr/>");

    var arr2 = [123, "qwe", true];

    document.write(arr2);

    document.write("<hr/>");

    // 2、函数

    // 拼接concat()，不改变原来的数组

    var arr3 = [1, 2, 3, 4, 5];

    var arr4 = [6, 7, 8, 9, 10];

    document.write(arr3.concat(arr4));

    document.write("<br/>");

    document.write(arr3);

    document.write("<hr/>");

    // 3、join()

    // 数组转成字符串

    document.write(arr3.join("-"));

    document.write("<hr/>");

    //4、 添加元素

    // push()

    // 新建数组的另一种方式

    var arr5 = new Array(3);

    arr5[0] = "peipei";

    arr5[1] = "zhengzheng";

    arr5[2] = "shuoshuo";

    document.write(arr5);

    document.write("<br/>");

    document.write(arr5.push("yuanyuan"));

    document.write("<br/>");

    document.write(arr5);

    document.write("<hr/>");

    // 从头部添加

    // unshift()

    document.write(arr5.unshift("first"));

    document.write("<br/>");

    document.write(arr5);

    document.write("<hr/>");

    // 删除数组元素

    // pop() 删除最后一个元素

    document.write(arr5.pop());

    document.write("<br/>");

    document.write(arr5);

    document.write("<hr/>");

    // 删除第一个元素

    // shift()

    document.write(arr5.shift());

    document.write("<br/>");

    document.write(arr5);

    document.write("<hr/>");

    // 反转，最后一个元素作为第一个

    // reverse()

    document.write(arr5.reverse());

    document.write("<br/>");

    dcoument.write(arr5);

    document.write("<hr/>");

    // 截取数组，切片

    // slice()中的数组， 包头不包尾

    var arr6 = arr5.slice(0, 2);

    document.write("arr6:", arr6);

    document.write("<br/>");

    document.write("arr5:", arr5);

</script>

</body>

</html>

三、object对象

①方式一 先创建对象，然后在将值传入

②方式二 与python字典类似，创建对象的同时，将值一并传入

调用方法也与python的字典取值类似

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS object</title>

</head>

<body>

<script>

    // object

    // 方法一

    var p1 = new Object ();

    p1.name = "qqq";

    p1.age ="12";

    p1.say = function (){

        document.write(p1.name + p1.age);

    }

    p1.say();

    document.write("<hr/>");

    // 方法二

    var p2 = {

        name : "aaa",

        age : "34",

        show : function (){

            document.write(p2.name + p2.age);

        }

    }

    p2.show();

    // 通过字典方式获取

    document.write("<hr/>");

    document.write(p2.name);

    document.write("<br/>")

    document.write(p2["name"]);

</script>

</body>

</html>

四、data对象

①输出当前时间

Var d1= new Date();

Document.write(d1);

②输出指定时间

Var d2 = new Date(“2020-1-1”);

Document.write(d2);

Var d3 = new Date(2020-0-1);

Document.write(d3);

D2 和 d3输出时间一致，需注意d3的输出方式月份取值 范围为0-11

③获取年份、月份、几号

D2.getFullYear()

D2.getMonth()

D2.getDate()

④设置月份,如果月份在11-22之间，则年与之前相差一年

D2.setMonth()

⑤转换为日期+时间、日期、时间

D2.tolocaleString()

D2.tolocaleDateString()

D2.tolocaleTimesString()

⑥时间差-毫秒，如果相加，则变成字符串拼接

var d1 = new Date("2020-1-1 10:10:10");

var d2 = new Date("2020-1-15 10:10:10");

document.write(d2 - d1);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS date</title>

</head>

<body>

<script>

    // data

    // 创建

    var d1 = Date()

    // 输出当前时间

    // 方式一

    document.write(d1);

    document.write("<hr/>");

    // 方式二

    var d2 = new Date();

    document.write(d2);

    document.write("<hr/>");

    // 输出指定时间一

    var d3 = new Date("2020-1-1");

    document.write(d3);

    document.write("<hr/>");

    // 输出指定时间二

    var d4 = new Date(2020, 0, 1); // 与2020-1-1一致

    document.write(d4);

    document.write("<hr/>");

    // 获取时间

    // 获取年份

    document.write(d4.getFullYear());

    document.write("<hr/>");

    // 获取月份

    document.write(d4.getMonth()); // 月份取值范围 0-11

    document.write("<hr/>");

    // 获取几号

    document.write(d4.getDate())

    document.write("<hr/>");

    // 设置

    document.write(d2);

    document.write("<br/>");

    d2.setMonth(15);

    // 获取修改后的年份

    document.write(d2.getFullYear()); // 设置的月份大于11小于22，年与之前相差一年

    document.write("<br/>");

    d2.setMonth(10);

    // 获取修改后的月份

    document.write(d2.getMonth());

    document.write("<br/>");

    document.write(d2);

    document.write("<hr/>");

    // 转换为日期+时间

    document.write(d3.toLocaleString());

    document.write("<br/>");

    // 转换为 日期

    document.write(d3.toLocaleDateString());

    document.write("<br/>");

    // 转换为时间

    document.write(d3.toLocaleTimeString());

    document.write("<hr/>");

    // 时间差

    var d1 = new Date("2020-1-1 10:10:10");

    var d2 = new Date("2020-1-15 10:10:10");

    // 毫秒

    document.write(d2 - d1);

    document.write("<hr/>");

    // 相加为字符串拼接

    document.write(d2 + d1);

</script>

</body>

</html>

五、Math对象

①四舍五入Math.round()

②向下取整Math.floor()

③向上取整Math.ceil()

④最大值Math.max()

⑤最小值Math.min()

⑥绝对值Math.abs()

⑦平方根Math.sqrt()

⑧幂Math.pow(2, 3);

⑨随机数 Math.random()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS math</title>

</head>

<body>

<script>

    // 四舍五入

    console.log(Math.round(3.6));

    document.write(Math.round(2.4));

    document.write("<hr/>");

    // 向下取整

    document.write(Math.floor(3.1));

    document.write("<hr/>");

    // 向上取整

    document.write(Math.ceil(4.1));

    document.write("<hr/>");

    // 取极值

    // 最大值

    document.write(Math.max(2, 4, 3, 6, 7, 1));

    document.write("<hr/>");

    // 最小值

    document.write(Math.min(1, 3, -1, 10, 2, 3, 1));

    document.write("<hr/>");

    // 绝对值

    document.write(Math.abs(3));

    document.write("<br/>");

    document.write(Math.abs(-3));

    document.write("<hr/>");

    // 求平方根

    document.write(Math.sqrt(4));

    document.write("<hr/>");

    // 求幂

    document.write(Math.pow(2,3));

    document.write("<hr/>");

    // 随机数

    document.write(Math.random());

    document.write("<br/>");

    var a = Math.random();

    document.write(a);

    document.write("<br/>");

    document.write(parseInt(a) * 5);

    document.write("<br/>");

    document.write(parseInt(a) * 5 + 5);

</script>

</body>

</html>

霡霂小雨
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值