json、本地存储、数学对象、时间对象

一、json格式

1.什么是json格式

json 格式是一种固定的 字符串格式
json 也是一种字符串的格式,和普通的字符串本质上没有什么区别,只是多了一些固定的格式。
主要作用:
在电脑网络传输的过程中,只能传递字符串,别的不好使,传递不了数组和对象数据类型,如果你想传递数组和对象数据类型,那么需要转换成字符串的格式传递。
json格式就是满足对象和数组数据结构的一种字符串。

2.JSON 转 JS

json 格式的字符串转换成 JS 的数组或对象。

语法:JSON.parse(你要转换的 json 格式字符串)
返回值: JS格式的数组或对象

Example:

		var str1 = '{ "name": "Tom", "age": 18, "gender": "男" }'
		var str2 = '[{ "name": "Tom", "age": 18, "gender": "男" }, {"name": "Jack", "age": 22, "gender": "女" }]'
		var str3 = 'hh'  
		
		var obj = JSON.parse(str1)
		var str = JSON.parse(str2)
		var a = JSON.parse(str3)
		 
		 console.log(obj)
		 console.log(str)
		 console.log(a)

在这里插入图片描述

var str3 = ‘hh’ 这不是json格式
在这里插入图片描述

3.JS 转 JSON

JS 的数组或对象转换成 json 格式的字符串。

语法:JSON.stringify(要转换的数组或对象)
返回值: 一个 json 格式的字符串

Example:

		var str1 = {
    
     name: 'Jack', age: 18, gender: '男'}
		var arr = [
			{
    
    name: 'Tom'},
			{
    
    age: 18},
			{
    
    gender: '女'}
		]
		
		var obj = JSON.stringify(str1)
		var str = JSON.stringify(arr)
		 
		 console.log(obj)
		 console.log(str)

在这里插入图片描述

4.json数据格式

(1)描述数组躲着对象数据类型。
(2)对象中的 keyvalue 都使用 双引号 包裹(数字和布尔可以不需要引号)。
(3)数组里面可以放多个对象。
(4)当多个数据的时候,最后一个数据后面不能有 逗号(,)
(5)一个 json 格式中,可以使用的符号只有 {},[],"",:,逗号 和 空格。

5.扩展

报错信息
Uncaught SyntaxError: Unexpected token h in JSON at position 0
你必然执行了一段代码, JSON.parse(xxx)
你的 xxx 不是一个 json 格式的字符串(不符合 json 格式)

二、本地储存

把一些数据记录在浏览器中

1.localStorage 永久缓存(除非手动删除)

语法:
1.

localStorage.setItem('名字', '值')
存储一条数据
当你重复设置同一个名字的时候,就是修改
	localStorage.setItem('name', 'Jack')
	
    var obj = {
    
     name: 'Jack', age: 18 }
    localStorage.setItem('obj', JSON.stringify(obj))
    
    localStorage.setItem('name', 'Rose')

在这里插入图片描述
2.

localStorage.getItem('名字')
获取一条数据
如果你获取一条没有名字的数据,那么就是 null
	// 获取 localStorage 里面存储的 name 数据
	var res = localStorage.getItem('name')
    var res2 = localStorage.getItem('obj')
    var res3 = localStorage.getItem('abcd')

	console.log(res)
	console.log(JSON.parse(res2))
    console.log(res3)

在这里插入图片描述
3.

localStorage.removeItem('名字')
删除一条数据
	localStorage.removeItem('name')

在这里插入图片描述
4.

localStorage.clear()
清除所有数据
	localStorage.clear()

在这里插入图片描述

2.sessionSrotage 会话缓存(关闭浏览器就没有了)

语法:
1.

sessionStorage.setItem('名字', '值')
增加一条数据
	sessionStorage.setItem('age', 18)
    var obj = {
    
     name: 'Jack' }
    sessionStorage.setItem('obj', JSON.stringify(obj))

在这里插入图片描述
2.

sessionStorage.getItem('名字')
获取一条数据
	var res = sessionStorage.getItem('age')
    console.log(res)

在这里插入图片描述
3.

sessionStorage.removeItem('名字')
删除一条数据
	sessionStorage.removeItem('obj')

在这里插入图片描述
4.

sessionStorage.clear()
清楚所有数据
	sessionStorage.clear()

在这里插入图片描述

3.两种方法的区别和共同点

区别:
localStorage 永久缓存,除非手动清楚( localStorage.clear() )。
sessionStorage 会话缓存,关闭浏览器就没有了。
共同点:
只能存储 字符串格式 的数据。
想储存对象数据结构,转换成 json 格式储存。
查看:
在控制台里面
application -> localStorage
application -> sessionStorage

三、数学对象

JS 里面有一个内置对象叫做 Math
里面存储了一些操作数字的方法

1.数学对象Math(内置对象)

1-1 random()

语法:Math.random()
返回值: 0 ~ 1 之间的随机小数,包含 0 不好含 1
	var res = Math.random()
    console.log(res)

在这里插入图片描述

1-2 round()

语法:Math.round(数字)
返回值: 四舍五入以后取整的数字
	var res = Math.round(10.499)
    console.log(res)

在这里插入图片描述

1-3 ceil()

语法: Math.ceil(数字)
返回值: 向上取整以后的数字
	var res = Math.ceil(-10.5)
    console.log(res)

在这里插入图片描述

1-4 floor()

语法: Math.floor(数字)
返回值: 向下取整以后的数字
    var res = Math.floor(-10.1)
    console.log(res)

在这里插入图片描述

1-5 pow()

语法: Math.pow(数字, 多少次幂)
返回值: 数字取幂以后的结果
    var res = Math.pow(2, 3)
    console.log(res)

在这里插入图片描述

1-6 sqrt()

语法: Math.sqrt(数字)
返回值: 数字的算数平方根
注意: 只能是平方根
    var res = Math.sqrt(9)
    console.log(res)

在这里插入图片描述

1-7 abs()

语法: Math.abs(数字)
返回值: 数字的绝对值
    var res = Math.abs(-10)
    console.log(res)

在这里插入图片描述

1-8 max()

语法: Math.max(数字1, 数字2, 数字3,...)
返回值: 若干个数字中的最大值
注意: 传递数组不好使
    var arr = [100, 200, -100, 33, 99, 104]
    var res = Math.max(100, 200, -100, 33, 99, 104)
    console.log(arr)
    console.log(res)

在这里插入图片描述

1-9 min()

语法: Math.min(数字1, 数字2, 数字3,...)
返回值: 若干个数字的最小值
注意: 传递数组不好使
    var res = Math.min(100, 200, -100, 33, 99, 104)
    console.log(res)

在这里插入图片描述

1-10 PI 属性

语法: Math.PI
得到: 近似于 派 的值
注意: 使用不需要 ()
	   两个字母都要大写
    console.log(Math.PI)

在这里插入图片描述

2.转换进制

2-1 十进制转换其他进制

使用方法: toString()
语法: 数字.toString(你要转换的进制)
返回值: 以字符串的形式返回给你转换好的数据 (如果不以字符串的形式返回,那么在 JS 里面自动转换成 十进制 )
注意: 返回值是一个 字符串
            不能直接加法;
            其他计算不能直接按照转数字的方法转换;
            如果想进行数学计算,要按照转换进制的方法转换回来;
Example:

	//将 100 转换为 八进制
	var num = 100
    var res = num.toString(8)
    console.log(res)

在这里插入图片描述

2-2 其他进制转换十进制

使用方法: parseInt()
语法: parseInt(要转换的数字,你把这个数字当作几进制)
返回值: 转换好以后十进制的数据
注意: 返回值虽然是一个 数字 ,但是你要是按照数学运算,考虑你是按照原先进制计算,还是按照十进制计算。

例子: 八进制 100 + 八进制 20
     转换完毕的结果是, 100 => 64, 20 => 16
     计算加法的时候, 100 + 20, 64 + 16

Example:

	//把 100 当作八进制
	var num = 100
	var res = parseInt(num, 8)
    console.log(res)

在这里插入图片描述

3.保留小数

指定保留几位小数

3-1 toFixed()

语法: 数字.toFixed(你要保留几位小数)
返回值: 以 字符串 的形式返回结果
               如果不够指定位数,会用 0 补齐;
               会以 四舍五入 的形式保留小数。

	var num = 100.34568
    var res = num.toFixed(4)
    console.log(res)

在这里插入图片描述

四、时间对象

1.创建时间对象

1-1 创建当前时间对象

JS 里面有一个 内置构造函数 叫做 Date()
专门用来创建时间对象的
时间对象是一个复杂数据类型

语法: var time = new Date()
返回值: 当前终端的当前时间(你电脑的时间,如果你修改电脑时间,这个时间也会发生改变的)
var time = new Date()
console.log(time)

在这里插入图片描述

1-2 创建指定日期的时间对象

(1) 传递数字

      第一个数字, 表示年
      第二个数字, 表示月
        -> 0 表示 1 月, 11 表示 12 月
      第三个数字, 表示日
      第四个数字, 表示时
      第五个数字, 表示分
      第六个数字, 表示秒
      第七个数字, 表示毫秒
      => 注意:至少传递两个参数,一个参数的时候,获取的是 格林威治时间
      => 注意: 除了年,之外的每一个数字都会自动进位
var time = new Date(2021, 11, 19, 12, 15, 53)
console.log(time)

在这里插入图片描述

(2)传递字符串

      'yyyy-mm-dd HH:MM:SS'
      'yyyy/mm/dd HH:MM:SS'
      => 注意: 
      1. 当你使用字符串这个形式的时候,1 表示 1月,12 表示 12月
      2. 年月日和时分秒中间有一个空格
var time = new Date('2021-11-19 12:09:56')
var time1 = new Date('2021/11/19 12:09:56')

console.log(time)
sonsole.log(time1)

在这里插入图片描述

2.获取时间对象中的信息

2-1 getFullYear()

语法: 时间对象.getFullYear()
返回值: 该时间对象的年份信息, number 数据类型

2-2 getMonth()

语法: 时间对象.getMonth()
**返回值:**该时间对象的月份信息,number 数据类型
注意: 0 表示 1 月, 11 表示 12 月

2-3 getDate()

语法: 时间对象.getDate()
**返回值:**该时间对象的日期信息, number 数据类型

2-4 getHours()

语法: 时间对象.getHours()
返回值: 该时间对象的小时信息, number 数据类型

2-5 getMinutes()

语法: 时间对象.getMinutes()
返回值: 该时间对象的分钟信息, number 数据类型

2-6 getSeconds()

**语法:**时间对象.getSeconds()
返回值: 该时间对象的秒钟信息, number 数据类型

2-7 getMilliseconds()

语法: 时间对象.getMilliseconds()
返回值: 该时间对象的毫秒信息, number 数据类型

2-8 getDay()

语法: 时间对象.getDay()
返回值: 该时间对象的一周中的第几天,周几的信息, number 数据类型
注意: 0 表示 周日 , 1 表示 周一 , 6 表示 周六 。

2-9 getTime()

语法: 时间对象.getTime()
返回值: 该时间对象的时间戳
时间戳: 时间对象 到 格林威治 时间的毫秒数
               格林威治时间:1970 年 1 月 1 日 0 点 0 分 0 秒 (计算机元年)

		var time = new Date()
		console.log(time)
		
		// 1. getFullYear()
		var year = time.getFullYear()
		console.log(year)
		
		// 2. getMonth()
		var month = time.getMonth()
		console.log(month)
		
		// 3. getDate()
		var date = time.getDate()
		console.log(date)
		
		// 4. getHours()
		var hours = time.getHours()
		console.log(hours)
		
		// 5. getMinutes()
		var minutes = time.getMinutes()
		console.log(minutes)
		
		// 6. getSeconds()
		var seconds = time.getSeconds()
		console.log(seconds)
		
		// 7. getMilliseconds()
		var ms = time.getMilliseconds()
		console.log(ms)
		
		// 8. getDay()
		var week = time.getDay()
		console.log(week)
		
		// 9. getTime()
		var t = time.getTime()
		console.log(t)

在这里插入图片描述

2-10 获取世界标准时间的时间信息

语法和前面一样

getUTCFullyear()
getUTCMonth()
getUTCDate()
getUTChours()
getUTCminutes()
getUTCseconds()
getUTCmilliseconds()

3.设置时间对象中的信息

3-1 setFullYear()

语法: 时间对象.setFullYear(你要设置的年)
作用: 修改该时间对象中的年份信息

3-2 setMonth()

语法: 时间对象.setMonth(你要设置的月份)
作用: 修改该时间对象中的月份信息

3-3 setDate()

语法: 时间对象.setDate(你要设置的日)
作用: 修改该时间对象中的日期信息

3-4 setHours()

语法: 时间对象.setHours(你要设置的时)
作用: 修改该时间对象中的小时信息

3-5 setMinutes()

语法: 时间对象.setMinutes(你要设置的分)
**作用:**修改该时间对象中的分钟信息

3-6 setSeconds()

语法: 时间对象.setSeconds(你要设置的秒)
作用: 修改该时间对象中的秒钟信息

3-7 setMillisceonds()

语法: 时间对象.setMilliseconds(你要设置的毫秒)
作用: 修改该时间对象中的毫秒信息

3-8 setTime()

语法: 时间对象.setTime(时间戳)
作用: 直接根据时间戳,定位到指定时间

Example:

		var time = new Date()
		
		// 1. setFullYear()
		time.setFullYear(2025)
		
		// 2. setMonth()
		time.setMonth(11)
		
		// 3. setDate()
		time.setDate(12)
		
		// 4. setHours()
		time.setHours(12)
		
		// 5. setMinutes()
		time.setMinutes(12)
		
		// 6. setSeconds()
		time.setSeconds(12)
		
		// 7. setMilliseconds()
		time.setMilliseconds(659)
		
		// 8. setTime()
		time.setTime(1597032581350)
		console.log(time)

在这里插入图片描述

3-9

一整套按照 UTC 时间设置的方法

猜你喜欢

转载自blog.csdn.net/qq_48937489/article/details/121414178