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:参数为日期字 ...
随机推荐
- ImageApparate(幻影)镜像加速服务让镜像分发效率提升 5-10 倍
作者介绍 李昂,腾讯高级开发工程师,主要关注容器存储和镜像存储相关领域,目前主要负责腾讯容器镜像服务和镜像存储加速系统的研发和设计工作. 李志宇,腾讯云后台开发工程师.负责腾讯云 TKE 集群节点和运 ...
- WPF权限控制框架——【4】抛砖引玉
写第一篇"权限控制框架"系列博客是在2021-01-29,在这不到一个月的时间里,收集自己零碎的时间,竟然写出了一个"麻雀虽小,五脏俱全"的权限控制框架:对于一 ...
- ViewPager 高度自适应
public class ContentViewPager extends ViewPager { public ContentViewPager(Context context) { super(c ...
- 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)
浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...
- PAT-1152（Google Recruitment）字符串+素数
Google Recruitment PAT-1152 本题最需要注意的是最后输出要以字符串形式输出,否则可能会出现前导0的情况. /** * @Author WaleGarrett * @Date ...
- HDOJ-1540(线段树+较复杂的单点修改和区间查询)
Tunnel Warfare HDOJ-1540 这题关于线段树的操作有一定的难度,需要较好的思维能力. 关于题目的详细解答已经在代码中体现了. #include<iostream> #i ...
- TKE 容器网络中的 ARP Overflow 问题探究及其解决之道
作者朱瑜坚,腾讯云后台开发工程师,熟悉 CNI 容器网络相关技术,负责腾讯云 TKE 的容器网络的构建和相关网络组件的开发维护工作,作为主力开发实现了 TKE 下一代容器网络方案. 1. 问题背景 1 ...
- git clone 提速
将类似于 git clone https://github.com/graykode/nlp-tutorial 的命令改成 https://github.com.cnpmjs.org/graykode ...
- CSV 注入实战
oxo1 前言 之前看到过 CSV 注入的文章,具体想了解的请搜索学习,这里不多作介绍.今天刚好碰到了导出功能,就随手测试一波,没想到还真的存在 CSV 注入漏洞. oxo2 经过 1.测试漏洞 看到 ...
- LNMP配置——Nginx配置 —— Nginx的访问日志
一.配置 先来看看Nginx的日志格式 #grep -A2 log_format /usr/local/nginx/conf/nginx.conf log_format combined_realip ...