JavaScript课程——Day07（对象简介、Math对象、时间对象、字符串对象）

1、对象简介

在javaScipt中，一切皆为对象或者皆可以被用作对象

宿主对象：window，document
内置对象：Number String Boolean Array数组 Object Function Error错误对象 Date时间对象 RegExp正则
自定义对象：new XX();

包装对象：

// 真正的对象

var obj = {

    name: 'zs', // 属性

    age: 3,

    fn: function () { // 方法

        console.log(this.name);

    }

}

console.log(obj.name); // 打印属性

obj.fn(); // 调用方法

按照规则，基本类型没有属性和方法，只有对象有属性和方法
包装对象存在的意义：它是对基本类型说的，因为基本对象不是对象，但是它又要表现的像一个对象，就用包装对象来模拟

// 包装对象，当str调用length属性的时候，包装对象就过来了，它提供了length属性，接着，包装对象就消失了

console.log(str.length);

console.log(str.charAt(2));

面试题：

// 面试题

var str = '平头哥';

str.ab = 'abcd'; // 当str调用ab属性的时候，它的包装对象就过来了，在这个包装对象下面，添加了ab属性，接着，包装对象就消失了

console.log(str.ab); // undefined   读取ab属性的时候，包装对象就又过来了（此时过来的包装对象，不是上次的包装对象），它下面没有ab属性，所以undefined

var obj = {

    name: 'ls'

}

obj.ab = 'abcd';

console.log(obj.ab); // abcd

2、Math对象

// 常用数学方法

console.log(Math.floor(3.999)); // 3 向下取整 去掉小数部分

console.log(Math.ceil(3.001)); // 4 向上取整 只要有小数就进位

console.log(Math.round(3.14159)); // 3 四舍五入

console.log(Math.abs(-100)); // 100 绝对值

console.log(Math.max(1, 2, 36, 9)); // 36

console.log(Math.min(1, 2, 36, 9)); // 1

console.log(Math.pow(2, 10)); // 2的10次方  1024

console.log(Math.pow(3, 2)); // 3的平方 9

console.log(Math.sqrt(60)); // 开根号 7.745966692414834

随机数

随机数：大于等于0，小于1的一个数
适用场景：点名器、抽奖、验证码

// 公式推理

// 从3--8 或 2--6随机找一个数

// 3--8：3 4 5 6 7 8：

// 6个：8-3+1 --->  6 * 随机数 = 0--5.9999999 + 最小数 --> 3--8.99999  向下取整 3--8

// 2--6：2 3 4 5 6：

// 5个：6-2+1   ---> 5*随机数 = 0 --4.9999999 + 最小数 --> 2--6.99999 向下取整 2--6

// ---------------------------------

// 随机数公式

// 1、大减小加1

// 2、乘以随机数

// 3、加上最小数

// 4、向下取整

// 封装

function getRandom(min, max) {

    return Math.floor(Math.random() * (max - min + 1) + min);

}

for (var i = 0; i < 20; i++) {

    console.log(getRandom(10, 50));

}

抽奖案例：

<body>

    <div id="box">请抽奖</div>

    <button>抽奖</button>

    <script>

        var arr = ['谢谢惠顾', '一等奖：一百万', '谢谢惠顾', '二等奖：二百万', '谢谢惠顾', '二等奖：1 毛钱', '三等奖：负一百万', '谢谢惠顾', '三等奖：送你去泰国'];

        var box = document.getElementById('box');

        var btn = document.querySelector('button');

        var timer = null;

        btn.onclick = function () {

            if (this.innerText === '抽奖') {

                timer = setInterval(function () {

                    var index = getRandom(0, arr.length - 1); // 从数组中随机取出一个下标

                    box.innerText = arr[index]; // 取出数组中的某一项

                }, 50);

                this.innerText = '停止';

            } else {

                clearInterval(timer);

                this.innerText = '抽奖';

            }

        }

        function getRandom(min, max) {

            return Math.floor(Math.random() * (max - min + 1) + min);

        }

    </script>

</body>

3、时间对象

　　3.1、创建时间

// new Date()创建的时间，返回的都是一个对象

// 没有参数

var d = new Date(); // 创建的是当前电脑此时此刻的时间

console.log(typeof d); // 'object'

console.log(d.toLocaleString());

// 有参数

var d = new Date(2030, 10, 12, 13, 12, 10); // 传入数字：年 月 日 时 分 秒  （月：0-11代表1--12）

var d = new Date('2022-12-12 10:12:12'); // 传入字符 月为正常的月

var d = new Date('2022/11/12 10:12:12'); // 传入字符

var d = new Date('2022,11,13 10:12:12'); // 传入字符

console.log(d.toLocaleString());

　　3.2、时间字符串表示

var d = new Date();

console.log(d);

// 本地时间

console.log(d.toLocaleString()); // 2021/4/26下午7:21:48

console.log(d.toLocaleDateString()); // 2021/4/26

console.log(d.toLocaleTimeString()); //下午7:21:48

// 返回英文状态的时间

console.log(d.toString()); // Mon Apr 26 2021 19:21:48 GMT+0800 (中国标准时间)

console.log(d.toDateString()); // Mon Apr 26 2021

console.log(d.toTimeString()); // 19:21:48 GMT+0800 (中国标准时间)

　　3.3、获取时间某一部分

var d = new Date(); // d是一个对象，它里面有很多的属性和方法

var year = d.getFullYear(); // 年

var month = d.getMonth(); // 月 0--11 代表 1--12

var date = d.getDate(); // 日

var week = d.getDay(); // 星期 0--6 代表 周日--周六

var h = d.getHours(); // 时

var m = d.getMinutes(); // 分

var s = d.getSeconds(); // 秒

var ms = d.getMilliseconds(); // 毫秒

console.log(year, month, date, week, h, m, s, ms);

　　3.4、设置时间某一部分

var d = new Date();

// 有获取的方法，就有对应设置的方法

d.setFullYear(2025); // 设置年

d.setMonth(15); // 设置月 月要加1   具有容错的能力

d.setDate(36); // 设置日

console.log(d.toLocaleString());

　　3.5、时间戳

　　时间戳：返回的是1970年1月1日零时到现在经过的毫秒数

// 方式一

var d = new Date();

console.log(d.getTime()); // 1619418442234

// 方式二(IE8及以下不支持)

console.log(Date.now()); // 1619418442234

　　倒计时案例：

<body>

    <h1>距五一放假还有：xx天xx小时xx分xx秒</h1>

    <script>

        var h1 = document.querySelector('h1');

        var future = new Date(2021, 4, 1, 0, 0, 0); // 未来时间

        auto();

        var timer = setInterval(auto, 1000);

        function auto() {

            // 两个对象相减，都转成数字（时间戳）

            var now = new Date(); // 当前时间

            var d = Math.floor((future - now) / 1000); // 毫秒转成秒

            if (d <= 0) {

                clearInterval(timer);

                h1.innerText = '放假了';

                return;

            }

            var date = Math.floor(d / 86400); // 天

            var h = Math.floor(d % 86400 / 3600); // 小时

            var m = Math.floor(d % 3600 / 60); // 分钟

            var s = d % 60;

            h1.innerText = '距五一放假还有：' + date + '天' + h + '小时' + m + '分' + s + '秒';

        }

    </script>

</body>

　　3.6、moment.js

　　官网：http://momentjs.cn/

// 创建时间

var d = moment(); // 创建当前时间

var d = moment('2023-12-12 10:12:03'); // 创建当前时间

// -------------------------------

// 格式化时间

console.log(d.format('YYYY年MM月DD日 HH:mm:ss'));

console.log(d.format('YYYY')); // 年

console.log(d.format('MM')); // 月

// -----------------------------------

// 之前和之后

// 格式：时间.subtract(减少的数量, 时间的键);

// 格式：时间.add(增加的数量, 时间的键);

var d = moment().subtract(1, 'months');

console.log(d.format('YYYY年MM月DD日 HH:mm:ss'));

var d = moment().add(1, 'months');

console.log(d.format('YYYY年MM月DD日 HH:mm:ss'));

4、字符串对象

　　4.1、创建

var str1 = '平头哥'; // 推荐   字面量

console.log(str1, typeof str1);

var str2 = String('平头妹');

console.log(str2, typeof str2);

var str3 = new String('平头弟'); // 不建议用，认识

console.log(str3, typeof str3); // "object"

　　4.2、长度，下标，charAt

var str = '我来优就业学习 web 前端';

// 字符串.length   长度

console.log(str.length); // 14

// 字符串.charAt(下标)   返回下标对应的字符

// 字符串[下标]    IE7及以下不支持

console.log(str[1]); // 来

console.log(str.charAt(2)); // 优

// 字符串.charCodeAt(下标);  返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535之间的整数。

// 将文字转成编码

console.log(str.charCodeAt(1)); // 26469

console.log(str.charCodeAt(2)); // 20248

// 将编码转成文字

console.log(String.fromCharCode(26469, 20248)); // 来优

　　4.3、indexOf和lastIndexOf

字符串.indexOf(要查找的字符[,查找的起始位置]; 从前向后查找
字符串.lastIndexOf(要查找的字符[,查找的起始位置]); 从后向前查找

　　返回要查找的字符在字符串中首次出现的位置，如果没有，返回-1

　　如果没有第二个参数（查找的起始位置），从下标0开始查找

var str = 'abcdeabfabg';

console.log(str.indexOf('a')); // 0

console.log(str.indexOf('a', 1)); // 5

console.log(str.indexOf('A')); // -1

console.log(str.indexOf('ab', 1)); // 5

console.log(str.lastIndexOf('a')); // 8

console.log(str.lastIndexOf('ab')); // 8

案例：封装一个函数，用于字符去重

console.log(fn('abaabbccdc'));

console.log(fn('aaaaa'));

function fn(str) {

    var newStr = '';

    for (var i = 0; i < str.length; i++) {

        var v = str[i]; // 原字符串中的每一个字符

        if (newStr.indexOf(v) === -1) { // 等于-1，则证明newStr里面没有这个字符

            newStr += v;

        }

    }

    return newStr; // 去重以后的字符串返回

}

　　4.4、截取

字符串.slice(起始下标,结束下标)

// 字符串.slice(起始下标, 结束下标);     推荐使用

// 获取字符串中起始下标到结束下标之间的字符

// 第一个参数不能为负，第二个参数如果为负，则同长度相加

var str = 'abcdefg';

console.log(str.slice()); // abcdefg

console.log(str.slice(2)); // cdefg

console.log(str.slice(2, 5)); // cde  不包含第二个参数

console.log(str.slice(2, -2)); // cde  第二个参数为负，则和长度相加

字符串.substring(起始下标,结束下标)

// 字符串.substring(起始下标, 结束下标);

var str = 'abcdefg';

console.log(str.substring()); // abcdefg

console.log(str.substring(2)); // cdefg

console.log(str.substring(2, 5)); // cde  不包含第二个参数

console.log(str.substring(5, 2)); // cde  如果第二个参数比第一个小，则交换位置

console.log(str.substring(2, -2)); // ab  负数同0

字符串.substr

// 字符串.substr(起始下标, 截取的个数);

var str = 'abcdefg';

console.log(str.substr()); // abcdefg

console.log(str.substr(2)); // cdefg

console.log(str.substr(2, 3)); // cde

　　4.5、转大小写

字符串.toUpperCase(); 转大写
字符串.toLowerCase();　　转小写

var str = 'abc';

console.log(str.toUpperCase()); // ABC

var str2 = 'ABC';

console.log(str2.toLowerCase()); //abc

　　4.6、split

// 字符串.split(参数);

// 将字符串以参数拆分成数组

var str = '2020-11-12'; // ['2020', '11', '12']

console.log(str.split('-')); // ["2020", "11", "12"]

console.log(str.split()); // ["2020-11-12"]

console.log(str.split('')); // ["2", "0", "2", "0", "-", "1", "1", "-", "1", "2"]

// ------------------------------

// 数组.join(参数);

// 将数组以参数拼接成字符串

var arr = ['2020', '11', '12'];

console.log(arr.join('-')); // '2020-11-12'

console.log(arr.join()); // '2020,11,12'

console.log(arr.join('')); // '20201112'

　　4.7、replace

// 字符串.replace(被替换的字符, 新的字符)

// 返回替换以后的结果，不影响原字符串

var str = '老王吃饭了';

var v = str.replace('老王', '张新昊');

console.log(v); // 张新昊吃饭了

console.log(str); // 老王吃饭了

　　4.8、trim

// 字符串.trim(); 去除字符串左右空格

// IE9及以上支持，IE8及以下，我们用正则来解决

var str = '    平头哥    ';

console.log(str);

console.log(str.trim());

秒客网

JavaScript课程——Day07（对象简介、Math对象、时间对象、字符串对象）

相关文章