JavaScript保姆级教学_03

简介: JavaScript保姆级教学_03

这一期讲讲JavaScript内的内置对象,Math数学对象、Date 日期对象、字符串对象都是些平常比较常用的东西。

作者持续更新中~

一、Math数学对象

console.log(Math.max(1,2,3,45));  // 取多个值中的最大数
Math.min(1,2,3);  //取多个值中的最小数
Math.floor(3.4);  // 向下取整 3
Math.ceil(3.4);   // 向上取整 4
Math.round(1.1);  // 四舍五入
Math.abs(-3);     // 取绝对值 3
Math.pow(10,2)    // 10的2次方
Math.sqrt(100)    // 开平方
Math.random();    // 生成0~1之间的随机小数 (0,1) 

案例:实现随机一个区间的整数

实现思路:先用random()随机生成0~1的小数,然后根据自己的需求乘与相对应的数目然后取整即可
例如我需要
0~9的整数:Math.floor(Math.random() * 10);
0-99:Math.floor(Math.random() * 100);

二、Date 日期对象

Date 是一个构造函数,需要使用 new 来创建对象

var date = new Date();
console.log(date);  // Wed Apr 21 2021 19:34:46 GMT+0800 外国的显示方式
date.getFullYear(); // 返回当前年份
date.getMonth();    // 返回的月份小1月
date.getDate();     // 返回几号
date.getDay();      // 返回周几,周一是1,周日是0
date.getHours();    // 返回小时
date.getMinutes();  // 返回分钟
date.getSeconds();  // 返回秒数
//既然是构造函数,那就可以通过构造函数赋值
var date = new Date(1619005441955);  // 传入时间戳
var date = new Date(2015, 4, 1);    // 传入年、月、日(月份从0开始计数)
var date = new Date("2020-5-10");  // 字符串方式传入年-月-日

案例:用中国的方式显示时间

function xwtime(){
        //获取系统时间
        var time=new Date;
        //用中国的方式显示
        var y=time.getFullYear();//年
        var m=time.getMonth()+1;//月
        var d=time.getDate();//日
        var h=time.getHours();//小时
        var fzz=time.getMinutes();//分钟
        var s=time.getSeconds();//秒
        //判断时间是否为单数
        var mz=s<10?'0'+s:s;//秒
        var fz=fzz<10?'0'+fzz:fzz//分钟
        var xs=h<10?'0'+h:h//小时
        //拼接显示时间
      document.getElementById("wh").innerHTML="<h1>当前时间为  "+y+"年"+m+"月"+d+"日 &nbsp;&nbsp;"+xs+":"+fz+":"+mz+"</h1>";
        //每隔一秒自动刷新
        var mytime=setInterval("xwtime()",1000);
      }

三、字符串对象

字符串、数字、布尔值这三种原始类型的值,为什么会有对象调用方法?

这是因为 JS 引擎会自动将原始类型的值转换为包装对象,使用之后会立即销毁。

str = '123';
// 内部处理
var temp = new String('123');  // 实际上是将字符串对象化
str = temp;  // 然后将临时变量传递给str
temp = null;  // 销毁临时变量
str.length();  // 这时候 str 已经是对象了,可以调用方法

indexOf()和lastIndexOf() 的应用

查找字符位置和数组类似,可以将字符串也看做数组,第一个字符索引为0。

//语法: str.indexOf('要查找的字符', [起始的位置])
var str = '白日依山尽';
console.log(str.indexOf('山'));
console.log(str.lastIndexOf('山'));
//查找的字符串如果没有找到,则返回"-1"。

charAt()的应用

按索引返回字符串

var str = 'andy';
str.charAt(3);  // 返回index位置的字符 
str.charCodeAt(3);  // 返回 index 位置的 ASCII 码
str[3];  // 获取指定位置处字符

案例:遍历字符串中的字符

var str = "andy";
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}

concat() 拼接字符串

将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。

var str1 = "a";
var str2 = "b";
var str3 = "c";
var str4 = str1.concat(str2, str3);
console.log(str4);
// 输出结果
abc

substr() 按长度截取字符串

substr(start, length); 
 // 从start索引位置开始,length 为取的个数,不输入 length,截取到末尾
var anyString = "Mozilla";
console.log(anyString.substr(1,4));
// 输出结果ozil

slice() 截取字符串

slice(start, end);  
// 从 start 位置开始,截取到 end 位置(不包括end)。不输入 end 默认截取到结尾
var anyString = "Mozilla";
console.log(anyString.slice(1, 4));
// 输出结果ozi

replace() 替换字符串

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

语法:stringObject.replace(substr,replacement)
var anyString = "Hello World";
console.log(anyString.replace("World", "Javascript"));
// 输出 Hello Javascript

toUpperCase()和toLowerCase() 大小写转换

console.log("aBc".toUpperCase());
console.log("Abc".toLowerCase());
// 输出结果
ABC
abc

相关文章
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的教学管理系统附带文章源码部署视频讲解等
62 8
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
40 1
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的数据库课程在线教学附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的数据库课程在线教学附带文章和源代码部署视频讲解等
51 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学多媒体教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学多媒体教学管理系统附带文章源码部署视频讲解等
38 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学演示系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学演示系统附带文章源码部署视频讲解等
43 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
26 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
25 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的教学资源共享平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的教学资源共享平台附带文章源码部署视频讲解等
38 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的教学辅助系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的教学辅助系统附带文章源码部署视频讲解等
35 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生计算机基础网络教学系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生计算机基础网络教学系统附带文章源码部署视频讲解等
33 0