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
// 创建时间 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());
