文章目录
一、内置对象JSON
什么是JSON?
JSON(全大写)
是JavaScript当中的一个内置对象
,里面封装了对json(全小写)
格式数据的操作方法。
什么是json?json的作用?
json
是一种数据格式
,是前后端目前数据交互的主要格式。
json
通常情况下说的是字符串
也叫json串
。
在前端,json串
的格式就是对象或者对象组成的数组
,只不过要把这些数据转化成字符串形式
。
JSON对象的方法:
- stringify
- parse
我们用一个案例来说明两种方法各自的作用:
var dataTestArr = [{name:'赵丽颖',age:32},{name:'杨幂',age:33},{name:'热巴',age:28}]
var dataStr = JSON.stringify(dataTestArr);
console.log(dataStr);
console.log(typeof dataStr);
var data = JSON.parse(dataStr);
console.log(data);
console.log(typeof dataStr);
结果如下图所示:
由这两次操作可看出,第一次的stringify
,是为了把你前端JavaScript中的对象或者是对象数组
转化为json串
。
第二次的parse
,是为了把后端给你传过来的json串
转化为前端的对象或者对象数组
。
一个是正向一个是逆向。
二、Math工具对象
Math对象常用的几个方法:
-
round:四舍五入
console.log(Math.round(1.5)); // 四舍五入 2
-
floor:向下取整
console.log(Math.floor(1.23)); // 向下取整 1
-
ceil:向上取整
console.log(Math.ceil(1.8)); // 向上取整 2
-
random:0到1之间随机数(包含0不包含1)
console.log(Math.random());
-
max:返回最大值
console.log(Math.max(1,18,10,2,40)); // 返回多个数之间的最大值 40
-
min:返回最小值
console.log(Math.min(1,18,10,2,40)); // 返回多个数之间的最小值 1
-
PI:数学中的 π ,圆周率
console.log(Math.PI); // π ,圆周率
console.log(Math.sin(Math.PI/2)) // 三角函数在Math当中全部都要使用弧度而不是角度
-
pow:求数学当中的次方
console.log(Math.pow(8,4)); // 8的4次方
三、Date日期对象
直接使用代码说明:
var date = new Date();
console.log(date);
// 中国标准时间
console.log(date.getFullYear());
// 当下日期年(当下公元年份)
console.log(date.getMonth());
// 当下日期月份减一
// 拿到之后记得加一
console.log(date.getDate());
// 当下日期日
console.log(date.getHours());
// 当下时间小时
console.log(date.getMinutes());
// 当下时间分钟
console.log(date.getSeconds());
// 当下时间秒
console.log(date.toLocaleTimeString());
// 当地时间
console.log(date.toLocaleDateString());
// 当地日期
console.log(date.getTime());
// 1970 年 1 月 1 日之间的毫秒数
// 可以用它的时间差来检测程序运行时间
console.log(date.getDay());
// 当下星期数字
四、包装对象
先来看一个案例:
var a = 10;
console.log(a.toString()); // 10
console.log(typeof a.toString()); // string
分析“a.toString ”
:
a
显然是一个对象
,才会有方法调用。但是a
我们定义的时候是一个基本数据类型
,它是没有方法的。
但是JavaScript当中基本数据类型
操作的时候会有这么两个规定
:
- 当调用
数字、字符串、布尔值的方法
的时候,会首先把这个值包装成对象
(临时的),然后进行调用。 包装对象的方法
,调用完成之后,临时的包装对象会立即清除
。
所以当我们“var a = 10;”
时,实际上JS是在“a = new Number(10);”
,这就是包装对象。
举个例子:
var b = 'abc';
console.log(b.split(''));
// Array(3)
// 0: "a"
// 1: "b"
// 2: "c"
“b.split”
调用的是包装对象里的方法。调用完毕之后,那个包装对象就没有了。
五、练习
1.随机点名(80人)
当我们想要拿a~b之间的随机数时,一般这么做:
Math.random() * (b-a+1) + a // 结果里含有小数
注意点:
Math.random() * 80 + 1 // 结果含有小数
Math.floor(Math.random() * 80) + 1 // 只是拿1-80之间的随机整数
所以我们的随机点名程序这么写:
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var result = getRandom(1,80);
console.log(result);
2.随机8位验证码
准备验证码库:
// 准备码源——大小写字母和数字
var str='QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm';
拿8位随机码:
// 字符串也是有序的,所以字符串也有索引,可以和数组一样使用
// 但是字符串是值类型,是一个常量,无法更改
var targetStr = '';
for(var i = 0; i < 8; i++){
targetStr += str[Math.floor(Math.random()*str.length)]
}
console.log(targetStr);
将两步封装成一个函数:
function getRandomCode(len)
{
var str = 'QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm';
var targetStr = '';
for(var i = 0; i < len; i++)
{
targetStr += str[Math.floor(Math.random()*str.length)]
}
return targetStr;
}
console.log(getRandomCode(8));
3.输出格式化日期(年月日时分秒)
程序如下:
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
console.log(year + '年' + month + '月' + day + '日 '+ hour + ':' + min + ':' + sec);
封装函数实现格式化日期:
function getDateAndTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
return year + '年' + month + '月' + day + '日 '+ hour + ':' + min + ':' + sec;
}
console.log(getDateAndTime());
4.创建两个同一品牌的手机对象(要求品牌和方法在原型当中定义共享使用)
function Mobile(name,color,size,money){
this.name = name;
this.color = color;
this.size = size;
this.money = money;
}
Mobile.prototype.logo = 'Huawei';
Mobile.prototype.callPhone = function(){
console.log('信号好!');
};
Mobile.prototype.photo = function(){
console.log('像素高!');
};
Mobile.prototype.HarmonyOS = function(){
console.log('系统流畅!');
};
Mobile.prototype.kirin = function(){
console.log('性能强劲!');
};
var phone1 = new Mobile('P50', 'black', 6.5, 4999);
phone1.kirin(); // 性能强劲!
var phone2 = new Mobile('Mate40', 'white', 6.3, 4999);
phone2.HarmonyOS(); // 系统流畅!