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)对象中的 key 和 value 都使用 双引号 包裹(数字和布尔可以不需要引号)。
(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 时间设置的方法