目录
一、对象
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¶m2=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¶m2=value2";
xhr.send(data);
对于发送JSON数据,需要设置Content-Type
为application/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¶m2=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对象,从而方便地进行后续的数据处理。
亲们~~,没写完不小心点了发布,后续还会完善此文