JavaWeb(4)JavaScript入门2—— JS的对象和JSON

news2024/9/19 18:36:06

一、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进行了概述,便于学习与应用。部分内容来自网络,如有侵权,请联系作者删除,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1942463.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux——vi和vim编辑器

目录 基本介绍 vi和vim常用的三种模式 vi和vim的常用快捷键 基本介绍 vi和vim常用的三种模式 vi和vim的常用快捷键 网上找的快捷键盘图

docker搭建ES 8.14 集群

参考&#xff1a;【docker搭建es8集群kibana】_docker 安装生产级 es 8.14 集群-CSDN博客 1、之前已搭建一台单机版的dockerES集群 参见 Elasticsearch docker 安装_docker 安装es8.14.3-CSDN博客 2、现在需要重新搭建为docker ES集群 准备新搭建3个点 一、准备工作 提前开…

txt格式单词导入有道词典生词本 (java代码方式)

txt格式单词导入有道词典生词本 (java代码方式) 首先要求txt文档里单词的格式&#xff0c;大概需要像这种&#xff1a; 每行是一个单词&#xff0c;格式为&#xff1a;英文单词空格词性单词意思。 注意 导出单词本的名字就是你 txt 文件的名字 我这里是 公共英语三级 单词本 …

WPF项目实战视频《二》(主要为prism框架)

14.prism框架知识&#xff08;1&#xff09; 使用在多个平台的MVVM框架 新建WPF项目prismDemo 项目中&#xff1a;工具-NuGet包管理&#xff1a;安装Prism.DryIoc框架 在git中能看Prism的结构和源代码&#xff1a;git链接地址 例如&#xff1a;Prism/src/Wpf/Prism.DryIoc.Wpf…

Linux中tomcat下载教程

一.安装tomcat 1.安装 EPEL 仓库&#xff1a; sudo yum install epel-release2.安装 Tomcat&#xff1a; sudo yum install tomcat3.启动 Tomcat 服务&#xff1a; sudo systemctl start tomcat4.启用 Tomcat 服务开机启动&#xff1a; sudo systemctl enable tomcat5.检查…

SpringCloud 环境工程搭建

SpringCloud 环境&工程搭建 文章目录 SpringCloud 环境&工程搭建1. SpringCloud介绍2. 服务拆分原则2.1 单一职责原则2.2 服务自治2.3 单向依赖2.4 服务拆分示例 3. 数据准备4. 工程搭建4.1 创建父工程4.2 创建子工程4.2.1 子项目-订单服务4.2.2 子项目-商品服务 4.3 完…

物联网专业创新人才培养体系的探索与实践

一、引言 随着物联网&#xff08;IoT&#xff09;技术的迅猛发展&#xff0c;物联网领域的人才需求日益增加。物联网技术作为新一轮信息技术革命的核心&#xff0c;已经渗透到社会生活的各个领域&#xff0c;对推动经济转型升级、提升国家竞争力具有重要意义。因此&#xff0c…

Redis 7.x 系列【26】集群模式动态扩容、动态缩容

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 动态扩容1.1 安装、启动1.2 加入新节点1.3 分配哈希槽1.4 加入从节点 2. 缩容2.1 删…

PHP场地预约共享茶室棋牌室小程序系统源码

&#x1f375;&#x1f3b2;【聚会新宠】场地预约神器&#xff0c;共享茶室棋牌室小程序大揭秘&#xff01;&#x1f389; &#x1f3e1;【开篇&#xff1a;告别繁琐&#xff0c;聚会新选择】&#x1f3e1; 还在为找不到合适的聚会场地而烦恼吗&#xff1f;想要一个既私密又舒…

python+onlyoffice+vue3项目实战20240722笔记,环境搭建和前后端基础代码

开发后端 先创建data目录,然后在data目录下创建一个test.docx测试文档。 后端代码: import json import req import api from api import middleware, PlainTextResponseasync def doc_callback(request):data = await api.req.get_json(request)print("callback ==…

微信小程序-CANVAS写入图片素材、文字等数据生成图片

微信小程序中&#xff0c;CANVAS写入图片素材、文字等数据生成图片&#xff0c;最终可将生成的 base64 格式图片保存至相册操作 Tips&#xff1a; 1、canvas 标签默认宽度 300px、高度 150px canvas 生成图片时&#xff0c;写入图片素材、文字等数据前&#xff0c;需要根据实…

git的一些使用技巧(git fetch 和 git pull的区别,git merge 和 git rebase的区别)

最近闲来无聊&#xff0c;虽然会使用git操作&#xff0c;但是 git fetch 和 git pull 的区别&#xff0c;git merge 和 git rebase的区别只是一知半解&#xff0c;稍微研究一下&#xff1b; git fetch 和 git pull 的区别 git fetch git fetch 是将远程仓库中的改动拉到本地…

鸿蒙仓颉语言【扩展Redis仓颉语言客户端】

2. 扩展Redis仓颉语言客户端 2.1 Redis命令处理模块的架构 Redis命令处理的架构图如下&#xff1a; RedisCommand类 Redis命令的实现类 包含以下成员&#xff1a; commandType: Redis命令的名称 commandArgs: Redis命令的参数列表 response: Redis命令的响应消息&#xff…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(十)-无人机A2X服务

引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 【免费】3GPPTS23.256技术报告-无人机系…

当当网数据采集:Scrapy框架的异步处理能力

在互联网数据采集领域&#xff0c;Scrapy框架以其强大的异步处理能力而著称。Scrapy利用了Python的异步网络请求库&#xff0c;如twisted&#xff0c;来实现高效的并发数据采集。本文将深入探讨Scrapy框架的异步处理能力&#xff0c;并展示如何在当当网数据采集项目中应用这一能…

npm 安装报错(已解决)+ 运行 “wue-cli-service”不是内部或外部命令,也不是可运行的程序(已解决)

首先先说一下我这个项目是3年前的一个项目了&#xff0c;中间也是经过了多个人的修改惨咋了布置多少个人的思想&#xff0c;这这道我手里直接npm都安装不上&#xff0c;在网上也查询了多种方法&#xff0c;终于是找到问题所在了 问题1&#xff1a; 先是npm i 报错在下面图片&…

下拉菜单过渡

下拉过渡&#xff0c;利用Y轴的transform&#xff1a;scaleY(0) —》transform&#xff1a;scaleY(1) 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" cont…

实战:MyBatis适配多种数据库:MySQL、Oracle、PostGresql等

概叙 很多时候&#xff0c;一套代码要适配多种数据库&#xff0c;主流的三种库&#xff1a;MySQL、Oracle、PostGresql&#xff0c;刚好mybatis支持这种扩展&#xff0c;如下图所示&#xff0c;在一个“namespace”&#xff0c;判断唯一的标志是iddatabaseId&#xff0c;刚好写…

学习vue3的搭建

Vue3 Vite项目构建 环境准备 1. NodeJs安装 安装NodeJs&#xff0c;安装成功后&#xff0c;以管理员身份打开命令行&#xff0c;输入命令 node -v查看NodeJs版本&#xff1b;输入命令 npm -v查看npm版本。 2. 安装cnpm 因为npm是国外的&#xff0c;下载资源的时候会翻墙&…

mysql面试(一)

前言 从今天开始&#xff0c;更新一些mysql的基础知识&#xff0c;面试会遇到的知识点之类的内容。比如四个隔离级别&#xff0c;mvcc机制&#xff0c;三大日志&#xff0c;索引&#xff0c;B树的形成等等&#xff0c;从数据库的底层来剖析索引和树是怎么形成的&#xff0c;以…