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"]); // 输出: 25

person.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-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&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对象，从而方便地进行后续的数据处理。

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