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

时间:2022-06-27 23:24:02

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());