JavaScript学习_基础_14_常用对象之JSON、Math、Date

一、内置对象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当中基本数据类型操作的时候会有这么两个规定：

1. 当调用数字、字符串、布尔值的方法的时候，会首先把这个值包装成对象(临时的)，然后进行调用。
2. 包装对象的方法，调用完成之后，临时的包装对象会立即清除。

所以当我们“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(); // 系统流畅！