JS基础知识05-对象、Ajax、JSON

目录

一、对象

1.1.对象(Object)

1.创建对象

对象的常用方法

1.2.Math对象

1.数学常数

2.数学函数

3.随机数生成

4.对数方法

1.3.Date对象

创建Date对象

获取日期和时间的方法

设置日期和时间的方法

日期的格式化方法

二、Ajax

1.创建XMLHttpRequest对象

2.配置请求

3.发送请求

4.处理响应

5.处理错误

三、JSON

3.1.JSON的基本概念

3.2.JSON的结构

1、JSON对象

2、JSON数组

3.3.JavaScript中处理JSON的方法

1.JSON.stringify()

示例

输出

2.JSON.parse()

使用方法

示例:

注意事项

使用reviver参数


一、对象

在JavaScript中,对象(Object)是一种复合值,它允许你将多个值(包括原始值和对象)组织成一个结构。对象是由键值对(key-value pairs)组成的,其中键(key)通常是字符串(也可以是Symbol),而值(value)可以是任何数据类型,包括函数、数组、对象等。

1.1.对象(Object)

1.创建对象

a.对象字面量

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello!");}
};

b.构造函数

function Person(name, age) {this.name = name;this.age = age;this.greet = function() {console.log("Hello!");};
}let person = new Person("Alice", 25);

c.Object.create方法

let personPrototype = {greet: function() {console.log("Hello!");}
};let person = Object.create(personPrototype);
person.name = "Alice";
person.age = 25;

4.类(ES6引入)

class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log("Hello!");}
}let person = new Person("Alice", 25);

2.访问和修改对象的属性

通过点(.)或方括号([])符号来访问和修改对象的属性:

let person = {name: "Alice",age: 25
};console.log(person.name); // 输出: Alice
console.log(person["age"]); // 输出: 25person.name = "Bob";
person["age"] = 30;console.log(person.name); // 输出: Bob
console.log(person["age"]); // 输出: 30

删除对象的属性

使用 delete 操作符来删除对象的属性

let person = {name: "Alice",age: 25
};delete person.name;console.log(person.name); // 输出: undefined

对象的遍历

使用 for...in 循环来遍历对象的可枚举属性

let person = {name: "Alice",age: 25,greet: function() {console.log("Hello!");}
};for (let key in person) {if (person.hasOwnProperty(key)) { // 过滤掉从原型链上继承的属性console.log(`${key}: ${person[key]}`);}
}

对象的常用方法

Object.keys(obj):返回一个数组,其元素是对象自身的(非继承的)可枚举属性名称。

Object.values(obj):返回一个数组,其元素是对象自身的(非继承的)可枚举属性对应的值。

Object.entries(obj):返回一个给定对象自身可枚举属性的键值对数组,其排列与通过手动遍历该对象属性返回的顺序一致(区别在于该方法的返回是一个数组)。

Object.assign(target, ...sources):用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

1.2.Math对象

Math对象是JavaScript中的一个内置对象,它提供了许多数学常数和函数,用于执行各种数学计算和操作。Math对象是一个静态对象,这意味着它不需要被实例化,可以直接通过Math对象来访问其属性和方法。

1.数学常数

Math对象提供了一些数学常量作为属性,这些常量包括:

Math.E:表示自然对数的底数e。        Math.PI:表示圆周率π。

Math.SQRT2:表示2的平方根。         Math.SQRT1_2:表示1/2的平方根。

Math.LN2:表示2的自然对数。         Math.LN10:表示10的自然对数。

Math.LOG2E:表示以2为底数e的对数。    Math.LOG10E:表示以10为底数e的对数。

2.数学函数

Math对象还提供了许多数学函数作为方法,这些方法可以执行各种数学计算,包括:

Math.round(x):返回四舍五入后的整数。

Math.ceil(x):返回向上取整后的整数。    Math.floor(x):返回向下取整后的整数。

Math.trunc(x):返回去除小数部分后的整数(ES6新增)。

Math.pow(x, y):返回x的y次幂。                         Math.sqrt(x):返回x的平方根。

Math.abs(x):返回x的绝对值。

3.随机数生成

Math.random()方法返回一个介于0(包含)和1(不包含)之间的随机浮点数。

4.对数方法

Math对象提供了几种对数方法,包括Math.log()(计算自然对数)、Math.log2()(计算以2为底的对数)和Math.log10()(计算以10为底的对数)。

1.3.Date对象

创建Date对象

使用new Date()创建一个表示当前日期和时间的date对象

获取日期和时间的方法

getFullYear():获取年份,四位数表示。

getMouth():获取月份,返回值为0到11(0表示1月,11表示12月)。

getDate:获取当前日期(一个月中的第几天),返回值为1到31。

getDay:获取星期几,返回值为0到6(0表示星期天,6表示星期六)。

getHours()、getMinutes()、getSeconds()、getMilliseconds():分别获取小时、分钟、秒、毫秒。

getTime():获取自1970年1月1日UTC零时起的毫秒数。

getTimezoneOffset():获取本地时间与UTC时间的差值,单位为分钟。

设置日期和时间的方法

setFullYear(year[,monthIndex[,day]])

setMouthIndex[,day]

setDate(day)

setHours(hours[,minutes[,seconds[,milliseconds]]])

setMinutes(minutes[,seconds[,milliseconds]])

setSeconds(seconds[.milliseconds])

setMilliseconds(milloseconds)

setTime(time)

日期的格式化方法

1、toLocaleDateString([locales[, options]]):根据本地格式,返回日期部分的字符串表示。

2、toLocaleTimeString([locales[, options]]):根据本地格式,返回时间部分的字符串表示。

3、toLocaleString([locales[, options]]):根据本地格式,返回完整的日期和时间的字符串表示。

4、toISOString():返回ISO 8601格式的日期字符串。

let person = {name: "Alice",age: 25
};console.log(Object.keys(person)); // 输出: ["name", "age"]
console.log(Object.values(person)); // 输出: ["Alice", 25]
console.log(Object.entries(person)); // 输出: [["name", "Alice"], ["age", 25]]let newPerson = {};
Object.assign(newPerson, person, { job: "Developer" });
console.log(newPerson); // 输出: { name: "Alice", age: 25, job: "Developer" }

二、Ajax

AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它允许网页异步地从服务器请求额外的数据,或者在后台与服务器进行通信,而无需干扰用户的当前操作。尽管AJAX这个名字中包含了“XML”,但实际上它并不局限于使用XML格式的数据;它同样支持JSON、HTML或纯文本等多种数据格式。

2.1.Ajax的使用

1.创建XMLHttpRequest对象

首先,创建XMLHttpRequest对象,这个对象允许发送http请求到服务器,并接受服务器的响应。

var xhr = new XMLHttpRequest();

2.配置请求

使用open方法来配置请求。你需要指定请求的类型(如GET或POST)、请求的URL以及是否异步处理请求。

xhr.open('GET', 'https://example.com/api/data', true);

3.发送请求

使用send方法发送请求到服务器。对于GET请求,通常不需要传递任何数据给send方法(或者传递null)。对于POST请求,你可以传递数据作为send方法的参数

xhr.send();

4.处理响应

在发送请求后,你需要设置一个事件监听器来监听服务器的响应。通常,你会监听onreadystatechange事件,该事件在XMLHttpRequest对象的状态改变时触发。

xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 请求完成且响应成功var response = xhr.responseText; // 获取响应数据// 处理响应数据...}
};

readyState属性表示请求的状态。它有几个可能的值,但最重要的是4,表示请求已完成且响应已就绪。status属性表示HTTP状态码,200表示请求成功。

5.处理错误

还应该处理可能出现的错误情况,例如网络问题、服务器错误等。这通常通过检查status属性是否不是200来实现

if (xhr.readyState === 4 && xhr.status !== 200) {// 处理错误...
}

JavaScript中,还提供了更高级的API来处理异步请求,如fetch API。fetch提供了一个更简洁、更强大的方式来执行网络请求,并返回一个Promise对象,这使得处理异步操作变得更加容易。

fetch('https://example.com/api/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析JSON数据}).then(data => {// 处理数据...}).catch(error => {// 处理错误...});

2.2.get请求

Ajax 无需刷新页面的情况下  更新网页内容
语法:get
get 和 post  put  delete
let xhr = new XMLHttpRequest();
创建ajax对象 (初始化)
xhr.open(请求类型,请求的接口地址(api));//建立链接
xhr.send()//发送请求  get里面什么都不需要写
xhr.readyState
0 请求未初始化
1 服务器连接建立
2 服务器接受到请求
3 请求处理中
4 请求处理完成 且数据已返回

xhr.onreadystatechange = function(){if(xhr.readyState == 4){// 接收数据// xhr.responseText 服务器返回的数据 存放在这个属性中// 只有 等于4 的时候 这个属性才有值}
}

fetch.api

fetch("https://example.com/api/data?param1=value1&param2=value2").then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

2.3.post请求

let xhr = new XMLHttpRequest();
// 创建ajax
xhr.open("POST","接口地址");//注意这里不允许 ?拼接字符
// 只有get请求可以
xhr.setRequestHeader("Content-type","")
// 设置请求头
// Content-type设置发送数据的格式
// 第一种 application/x-www-form-urlencoded
//第二种 application/json
//第三种 只能用于上传文件multipart/form-data
xhr.send("name=张三&age=22");//post在这里传递参数
xhr.onreadystatechange = function(){if(xhr.readyState == 4){console.log(xhr.responseText);}
}

请求示例:

原生js
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}
};
var data = "param1=value1&param2=value2";
xhr.send(data);
对于发送JSON数据,需要设置Content-Typeapplication/json
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);}
};
var data = JSON.stringify({ param1: "value1", param2: "value2" });
xhr.send(data);
使用fetch.API
fetch("https://example.com/api/data", {method: "POST",headers: {"Content-Type": "application/x-www-form-urlencoded"},body: "param1=value1&param2=value2"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
fetch发送JSON数据
fetch("https://example.com/api/data", {method: "POST",headers: {"Content-Type": "application/json"},body: JSON.stringify({ param1: "value1", param2: "value2" })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

三、JSON

3.1.JSON的基本概念

在JavaScript中,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于语言的文本格式来存储和表示数据。简单说,JSON是一种数据格式,不是一种编程语言,虽然它具有相同的语法形式,但它是JavaScript的一个子集。

3.2.JSON的结构

JSON对象在JavaScript中是以对象字面量的形式来表示的,它使用键值对的方式来存储数据。键(key)必须是字符串,而值(value)则可以是字符串、数字、布尔值、数组、对象或null。

1、JSON对象

{"key1": "value1","key2": 2,"key3": true,"key4": {"nestedKey": "nestedValue"},"key5": [1, 2, 3, "four"]
}

在JavaScript中,可以使用对象字面量来创建一个与上述JSON对象等价的JavaScript对象:

let person = {"key1": "value1","key2": 2,"key3": true,"key4": {"nestedKey": "nestedValue"},"key5": [1, 2, 3, "four"]
};

2、JSON数组

[{"name": "John", "age": 30},{"name": "Anna", "age": 22},{"name": "Peter", "age": 35}
]

在JavaScript中,可以使用数组字面量来创建一个与上述JSON数组等价的JavaScript数组

let people = [{name: "John", age: 30},{name: "Anna", age: 22},{name: "Peter", age: 35}
];

3.3.JavaScript中处理JSON的方法

在JavaScript中,处理JSON数据通常会用到两个方法:JSON.stringify()JSON.parse()

1.JSON.stringify()

JSON.stringify()方法可以将一个JavaScript值(通常是一个对象或数组)转换为一个JSON字符串。这个方法接收三个参数:

value:要转换的JavaScript值(对象、数组等)。

replacer(可选):一个函数或数组,用于控制哪些值应该被序列化到JSON字符串中。

space(可选):用于美化输出的字符串,可以是数字或字符串。如果是数字,表示每一级缩进的空格数;如果是字符串(如\t),则使用该字符串作为缩进。

示例
let obj = { name: "John", age: 30, city: "New York" };
let jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
输出
{"name": "John","age": 30,"city": "New York"
}

2.JSON.parse()

JSON.parse() 方法用于将JSON字符串解析为JavaScript对象。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于语言的文本格式来存储和表示数据。简单说,JSON是一种数据格式,不是一种编程语言,虽然它具有相同的语法形式,但它并不遵循JavaScript的语法规则。

使用方法

JSON.parse(text[,reviver])

text:必需,一个有效的JSON字符串

reviver:可选。一个转换函数,该函数将对键值对执行一次处理,然后再将结果返回

返回值:返回由字符串转换来的对象

示例:
// 一个简单的JSON字符串
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';// 使用JSON.parse()将JSON字符串转换为JavaScript对象
var obj = JSON.parse(jsonString);console.log(obj.name); // 输出: John
console.log(obj.age);  // 输出: 30
console.log(obj.city); // 输出: New York
注意事项

安全性:由于JSON.parse()会执行JSON字符串中的代码(如果有的话),因此不要解析不受信任的JSON字符串,因为这可能会导致安全问题,比如代码注入。

异常处理:如果传入的字符串不是有效的JSON格式,JSON.parse()会抛出一个SyntaxError异常。因此,在解析JSON字符串时,最好使用try...catch语句来捕获可能发生的错误。

使用reviver参数

reviver参数是一个可选的函数,它按照从外到内,从上到下的顺序(即先遍历最外层的键值对,然后是内层的,依此类推),对解析出来的对象的每个键值对执行一次处理。这个函数接收两个参数,键(key)和值(value),并返回一个新的值,这个值会被插入到结果对象中。如果返回undefined,则当前属性会从结果中被删除。

var jsonString = '{"name":"John", "age":30, "city":"New York"}';var obj = JSON.parse(jsonString, function(key, value) {if (key === "age") {return value + 1; // 将年龄加1}return value;
});console.log(obj.age); // 输出: 31

通过JSON.parse()方法,我们可以轻松地将JSON格式的字符串转换为JavaScript对象,从而方便地进行后续的数据处理。

亲们~~,没写完不小心点了发布,后续还会完善此文

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

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

相关文章

云服务器重装系统后 一些报错与解决[ vscode / ssh / 子用户]

碰见的三个问题: 1.vscode连接失败 2.登录信息配置 3.新建子用户的一些设置 思考:遇见问题,第一反应 应该如何解决 目录 1. 错误 解决方法 原因 步骤 1:找到known_hosts文件并编辑 步骤 2:通过VSCode终端输入…

QT实战-qt各种菜单样式实现

本文主要介绍了qt普通菜单样式、带选中样式、带子菜单样式、超过一屏幕菜单样式、自定义带有滚动条的菜单样式, 先上图如下: 1.普通菜单样式 代码: m_pmenu new QMenu(this);m_pmenu->setObjectName("quoteListMenu"); qss文…

基于BM1684的AI边缘服务器-模型转换,大模型一体机

介绍 我们属于SoC模式,即我们在x86主机上基于tpu-nntc和libsophon完成模型的编译量化与程序的交叉编译,部署时将编译好的程序拷贝至SoC平台(1684开发板/SE微服务器/SM模组)中执行。 注:以下都是在Ubuntu20.04系统上操…

Redis+Caffeine 多级缓存数据一致性解决方案

RedisCaffeine 多级缓存数据一致性解决方案 背景 之前写过一篇文章RedisCaffeine 实现两级缓存实战,文章提到了两级缓存RedisCaffeine可以解决缓存雪等问题也可以提高接口的性能,但是可能会出现缓存一致性问题。如果数据频繁的变更,可能会导…

计算机网络——不同版本的 HTTP 协议

介绍 HTTP,即超文本传输协议(HyperText Transfer Protocol),是应用层的一个简单的请求-响应协议,它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。本文将介绍 HTTP 协议各个版本。 HTTP/1.0 HTTP/1…

【WEB开发.js】HTTP请求和相应报文的头字段:Content-Type (巨巨巨巨详细好懂的举例详解)

Content-Type 是 HTTP 请求和响应报文中的头字段之一,用于指定发送的数据类型(MIME 类型)。它告诉服务器或客户端数据的格式,方便接收方正确解析和处理内容。 例如,在发送 JSON 数据时,会指定 Content-Typ…

【ArkTS】使用AVRecorder录制音频 --内附录音机开发详细代码

系列文章目录 【ArkTS】关于ForEach的第三个参数键值 【ArkTS】“一篇带你读懂ForEach和LazyForEach” 【小白拓展】 【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案” 【ArkTS】 一篇带你掌握“语音转文字技术” --内附详细代码 【ArkTS】技能提高–“用户授权”…

P1319 压缩技术 P1320 压缩技术(续集版)

题目传送门 P1319 压缩技术 P1320 压缩技术(续集版) P1319 压缩技术 输入格式 数据输入一行,由空格隔开的若干个整数,表示压缩码。 其中,压缩码的第一个数字就是 N N N,表示这个点阵应当是 N N N\t…

【CSS】一篇掌握CSS

不是因为有了希望才去坚持,而是坚持了才有了希望 目录 一.导入方式 1.行内样式 2.内部样式 3.外部样式(常用) 二.选择器 1.基本选择器(常用) 1.1标签选择器 1.2类选择器 1.3id选择器 2.层次选择器 2.1后代选择器 2.2子选择器 2.3相邻兄弟选择器 2.4通用兄弟选择器…

linux 获取公网流量 tcpdump + python + C++

前言 需求为,统计linux上得上下行公网流量,常规得命令如iftop 、sar、ifstat、nload等只能获取流量得大小,不能区分公私网,所以需要通过抓取网络包并排除私网段才能拿到公网流量。下面提供了一些有效得解决思路,提供了…

Rain后台权限管理系统,快速开发

这段时间一直没有更新,因为在写一个脚手架,今天Rain项目终于完工,已经发布到github,免费使用 项目github链接 https://github.com/Rain-hechang/Rain 简介 前端采用Vue3.x、Element UI。 后端采用Spring Boot、Spring Security、Redis &…

scroll-view组件,在iOS设备上禁用橡皮筋回弹效果

问题描述 在实现uniapp微信小程序的一个项目时,ios真机测试,scroll-view组件可以向下拉动一段距离然后又回弹。 如下图 解决方法: 可以通过设置scroll-view组件的属性来禁用橡皮筋回弹效果。如下,设置enhanced"true&…

【AI系统】昇腾异构计算架构 CANN

昇腾异构计算架构 CANN 本文将介绍昇腾 AI 异构计算架构 CANN(Compute Architecture for Neural Networks),这是一套为高性能神经网络计算需求专门设计和优化的架构。CANN 包括硬件层面的达芬奇架构和软件层面的全栈支持,旨在提供…

7-17 列出连通集

给定一个有 n 个顶点和 m 条边的无向图,请用深度优先遍历(DFS)和广度优先遍历(BFS)分别列出其所有的连通集。假设顶点从 0 到 n−1 编号。进行搜索时,假设我们总是从编号最小的顶点出发,按编号递…

华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(二)

文章目录 前言使用docker run总结前言 我们在上一篇文章华为NPU服务器昇腾Ascend 910B2部署通义千问Qwen2.5——基于mindie镜像一路试错版(一)中,介绍了一些准备工作。 我估计这些东西下载好还是需要一点时间的,如果你幸运地通过了这些考验,还想继续的话,就来看看这一篇…

在macOS上从源码部署RAGFlow-0.14.1

一、macOS配置 1. macOS配置 我使用MacBook Pro,chip 是 Apple M3 Pro,Memory是18GB,macOS是 Sonoma 14.6.1。 2.安装Docker和Docker compose 官方要求 Docker ≥ 24.0.0 & Docker Compose ≥ v2.26.1,我的版本如下&#x…

大数据量接口的异步处理方案详解

在现代分布式系统中,处理大数据量的接口是一个常见但复杂的场景。同步操作容易导致接口响应时间过长甚至超时,因此采用异步处理成为主流选择。本文将详细分析大数据量接口异步处理的常见方案,并结合实际应用场景进行优缺点对比。 1. 背景与挑…

csv文件的上传、解析和获得最后的数据

前端和node端解析、读取csv文件的区别 1、前端 运行环境为浏览器,受到浏览器安全策略的限制,例如跨域请求、文件访问权限等。对于大型CSV文件的处理可能会受到性能瓶颈的影响。前端运行在用户的浏览器中,受到浏览器安全策略的限制&#xff…

在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制

在 Windows Server 2022 Datacenter 上配置 MySQL 8.0 的主从复制。以下是详细的步骤: 1. 使用 root 用户登录 确保你以 root 用户登录到 MySQL 服务器。 mysql -u root -p输入你的 root 密码后进入 MySQL 命令行界面。 2. 配置主服务器 (master) 2.1 编辑 my.…

Git忽略除了指定文件以外的所有文件

前言:最近发现vs很多杂七杂八的文件都被传到gitee上了,但是我本意只是想把一些主要的文件如 .cpp文件传到gitee,因此考虑到了.gitignore文件的使用。 .gitignore文件的作用 .gitignore是一个特殊的文件,用于告诉Git哪些文件或目录…