JavaWeb（4）JavaScript入门2—— JS的对象和JSON

一、JS的对象

1.声明语法1

通过new Object()直接创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        方式1 new Object（）

        方式2 {属性名：属性值，......,函数名：function（）{}}
        */

        var Person = new Object;
        //对象的属性？添加属性
        Person.name = "Theodore";
        Person.id = "theodore1022";
        //对象的方法？添加方法
        Person.write = function(blog){
            console.log("id为"+this.id+"，名字为："+this.name+"的博主正在写"+blog)
        }

        //访问属性

        console.log(Person.id)
        console.log(Person.name)

        //调用方法
        Person.write("有关JS的博客")

       
    </script>
</head>
<body>
    
</body>
</html>

2. 声明语法2

语法为 var person ={"属性名":"属性值","属性名","属性值","函数名":函数}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        方式1 new Object（）

        方式2 {属性名：属性值，......,函数名：function（）{}}
        */


        //方式2：
        var Person = {
            name:"andy",
            "id" : 10,
            "write" : function(blog){
                console.log("id为"+this.id+"，名字为："+this.name+"的博主正在写"+blog)
            }

        }

        Person.write("有关JS的博客")
    </script>
</head>
<body>
    
</body>
</html>

二、JSON

1.定义

JSON 就是一种字符串格式,这种格式无论是在前端还是在后端,都可以很容易的转换成对象,所以常用于前后端数据传递。

2.说明

JSON的语法

var obj="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}"
JSON字符串一般用于传递数据,所以字符串中的函数就显得没有意义,在此不做研究
通过JSON.parse()方法可以将一个JSON串转换成对象
通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串

3.代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        JSON格式的语法
            var personStr = '{"属性名":"属性值","属性名":"属性值","属性名"：{},"属性名":["","",""],"属性名":[{},{},{}]}'
            属性名必须用""包裹上
            属性值 字符串必须用“”包好，数字可以不处理
        */
        //JSON格式的字符串
        var personStr = '{"name":"theodore","age":"20","dog":{"dname":"大黄"},"loveSingers":["林俊杰","周杰伦","陶喆"],"friends":[{"fname":"唐三"},{"fname":"喜洋洋"},{"fname":"灰太狼"}]}'
        
        // console.log(personStr)
        // console.log(typeof personStr)
        // console.log(personStr.name)

        //通过JSON.parse() 可以将一个JSON串转换为一个对象
        var person = JSON.parse(personStr)
        console.log(personStr)
        console.log(person)
        console.log(person.dog.dname)
        console.log(person.loveSingers[0])
        console.log(person.friends[0].fname)
        //通过JSON.stringify()将一个对象转换为JSON串
        var personStr2 = JSON.stringify(person)
        console.log(personStr2)

    
    </script>
    
</head>
<body>

4.创建数组

new Array() 创建空数组
new Array(5) 创建数组时给定长度
new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写

5.常见对象

（1）Boolean对象

方法	描述
toString()	把布尔值转换为字符串，并返回结果。
valueOf()	返回 Boolean 对象的原始值。

（2）Date对象

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份。
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear()	已废弃。请使用 getFullYear() 方法代替。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds()	setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear()	已废弃。请使用 setFullYear() 方法代替。
toDateString()	把 Date 对象的日期部分转换为字符串。
toGMTString()	已废弃。请使用 toUTCString() 方法代替。
toISOString()	使用 ISO 标准返回字符串的日期格式。
toJSON()	以 JSON 数据格式返回日期字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，把 Date 对象转换为字符串。实例：`var today = new Date(); var UTCstring = today.toUTCString();`
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

（3）Math

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
tanh(x)	返回一个数的双曲正切函数值。
trunc(x)	将数字的小数部分去掉，只保留整数部分。

（4）Number

方法	描述
isFinite	检测指定参数是否为无穷大。
isInteger	检测指定参数是否为整数。
isNaN	检测指定参数是否为 NaN。
isSafeInteger	检测指定参数是否为安全整数。
toExponential(x)	把对象的值转换为指数计数法。
toFixed(x)	把数字转换为字符串，结果的小数点后有指定位数的数字。
toLocaleString(locales, options)	返回数字在特定语言环境下的表示字符串。
toPrecision(x)	把数字格式化为指定的长度。
toString()	把数字转换为字符串，使用指定的基数。
valueOf()	返回一个 Number 对象的基本数字值。

（5）String

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
endsWith()	判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll()	在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白。
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

总结

本篇对JS的对象创建和JSON进行了概述，便于学习与应用。部分内容来自网络，如有侵权，请联系作者删除，谢谢！