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());
JavaScript课程——Day07（对象简介、Math对象、时间对象、字符串对象）的更多相关文章
- java基础63 JavaScript中的Number、Math、String、Date对象（网页知识）
本文知识点(目录): 1.Number对象 2.Math对象 3.String对象 4.Date对象 (日历例子) 1.Number对象 1.1.Number对象的创建方式 方式1: ...
- JavaScript基础-05-数组、Date对象、Math、包装类、字符串方法
数组(Array) 1. 数组 数组也是一个对象,不同点:普通对象是使用字符串作为属性名的,数组是使用数字作为索引操作元素. 数组的存储性能比普通对象要好,在开发中经常使用数组来存储一些数据. 向数组 ...
- 关于Redis中的字符串对象
一.SDS redis中定义Object types有5种 /* Object types */ #define REDIS_STRING 0 #define REDIS_LIST 1 #define ...
- redis 系列10 字符串对象
一. 字符串对象编码 Redis中字符串可以存储3种类型,分别是字节串(byte string).整数.浮点数.在上章节中讲到字符串对象的编码可以是int, raw,embstr. 如果一个字符串对象 ...
- Redis设计与实现 -- 动态字符串对象（SDS）
1. 动态字符串( simple dynamic string, SDS) 在 Redis 中,当需要可以被重复修改的字符串时,会使用 SDS 类型 ,而不是 C 语言中默认的 C 字符串类型 .举个 ...
- javascript中的Date对象和Math对象
1.Date对象 1.创建Date对象 var time1=new Date() 方法1:不指定参数 var time1=new Date(); alert(time1.toLocaleString( ...
- JavaScript对象简介（一）
本节介绍js的9个对象:Array数组对象 Boolean(true false) Date日前对象 Math 数学对象 Number 数字对象 String 字符串对象 RegExp 正则表达式对象 ...
- Javascript进阶篇——( JavaScript内置对象---下)--Math对象---笔记整理
Math对象使用 Math 的属性和方法: <script type="text/javascript"> var mypi=Math.PI; var myabs=Ma ...
- JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点
Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...
随机推荐
- RabbitMQ之死信队列
1:何为死信队列 死信队列也是一个正常的队列,可以被消费. 但是,死信队列的消息来源于其他队列的转发. 2:如何触发死信队列 1:消息超时 2:队列长度达到极限 3:消息被拒绝消费,并不再重进队列,且 ...
- Ctf_show Web[1-8]
CTFshow_web1: F12查看JS即在代码里 CTFshow_web2: 进入网址后页面如下: ①:尝试使用admin登陆,发现页面无回显 ②:尝试单引号闭合,并且添加' or 1=1#,此时 ...
- 学习java的第二天
Java第二天 标识符 标识符开头只能以字母和_开头 严格区分大小写 不能以关键词命名 变量 变量是什么:就是可以变化的量 Java是一种强类型语言,定义变量必须声明后才能使用 Java变量是程序中最 ...
- 后端程序员之路 54、go 日志库
一个朋友写的日志库 https://github.com/vizee/echo go get -u -v github.com/vizee/echo package main import ( ...
- 面试系列二：精选大数据面试真题JVM专项-附答案详细解析
公众号(五分钟学大数据)已推出大数据面试系列文章-五分钟小面试,此系列文章将会深入研究各大厂笔面试真题,并根据笔面试题扩展相关的知识点,助力大家都能够成功入职大厂! 大数据笔面试系列文章分为两种类型: ...
- mysql添加远程连接权限
查看登录用户 mysql> select host,user,password from user; 想用本地IP登录,那么可以将以上的Host值改为自己的Ip即可. 这里有多个root,对应着 ...
- 使用syncthing和蒲公英异地组网零成本实现多设备实时同步
设想一个场景,如果两台电脑之间可以共享一个文件夹,其中一个增删更改其中的内容时,另一个也能同步更新,而且速度不能太慢,最好是免费的.那么syncthing就可以满足这个要求.syncthing可以实现 ...
- 解决VM 与 Device/Credential Guard 不兼容(全网有效解决思路)
为什么要写这篇文章先说背景:前段时间因为学习Linux系统需要,自己本机用的是Windows系统,那这里就需要用到虚拟机来创建虚拟环境用来支持Linux系统 1: 于是乎,自己很激动的下载了vm虚拟机 ...
- 源码解析之 Mybatis 对 Integer 参数做了什么手脚？
title: 源码解析之 Mybatis 对 Integer 参数做了什么手脚? date: 2021-03-11 updated: 2021-03-11 categories: Mybatis 源码 ...
- 【python+selenium的web自动化】- PageObject模式解析及案例
如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html PO模式 Page O ...