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 >请抽奖</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对象、时间对象、字符串对象）

相关推荐