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

一、对象

1.1.对象（Object）

1.创建对象

对象的常用方法

3.3.JavaScript中处理JSON的方法

一、对象

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

1.1.对象（Object）

1.创建对象

a.对象字面量

javascript 复制代码

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

b.构造函数

javascript 复制代码

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方法

javascript 复制代码

let personPrototype = {
    greet: function() {
        console.log("Hello!");
    }
};

let person = Object.create(personPrototype);
person.name = "Alice";
person.age = 25;

4.类（ES6引入）

javascript 复制代码

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log("Hello!");
    }
}

let person = new Person("Alice", 25);

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

通过点（.）或方括号（[]）符号来访问和修改对象的属性：

javascript 复制代码

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 操作符来删除对象的属性

javascript 复制代码

let person = {
    name: "Alice",
    age: 25
};

delete person.name;

console.log(person.name); // 输出: undefined

对象的遍历

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

javascript 复制代码

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格式的日期字符串。

javascript 复制代码

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请求到服务器，并接受服务器的响应。

javascript 复制代码

var xhr = new XMLHttpRequest();

2.配置请求

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

javascript 复制代码

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

3.发送请求

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

javascript 复制代码

xhr.send();

4.处理响应

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

javascript 复制代码

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

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

5.处理错误

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

javascript 复制代码

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

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

javascript 复制代码

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 请求处理完成且数据已返回

javascript 复制代码

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

fetch.api

javascript 复制代码

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请求

javascript 复制代码

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

javascript 复制代码

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`：

javascript 复制代码

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

javascript 复制代码

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数据

javascript 复制代码

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对象

javascript 复制代码

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

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

javascript 复制代码

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

2、JSON数组

javascript 复制代码

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

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

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），则使用该字符串作为缩进。

示例

javascript 复制代码

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

输出

javascript 复制代码

{
  "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：可选。一个转换函数，该函数将对键值对执行一次处理，然后再将结果返回

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

示例：

javascript 复制代码

// 一个简单的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，则当前属性会从结果中被删除。

javascript 复制代码

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

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

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

一、对象

1.1.对象（Object）

1.创建对象

对象的常用方法

1.2.Math对象

1.数学常数

2.数学函数

3.随机数生成

4.对数方法

1.3.Date对象

创建Date对象

获取日期和时间的方法

设置日期和时间的方法

日期的格式化方法

二、Ajax

2.1.Ajax的使用

1.创建XMLHttpRequest对象

2.配置请求

3.发送请求

4.处理响应

5.处理错误

2.2.get请求

2.3.post请求

请求示例：

原生js

对于发送JSON数据，需要设置Content-Type为application/json：

使用fetch.API

fetch发送JSON数据

三、JSON

3.1.JSON的基本概念

3.2.JSON的结构

1、JSON对象

2、JSON数组

3.3.JavaScript中处理JSON的方法

1.JSON.stringify()

示例

输出

2.JSON.parse()

使用方法

示例：

注意事项

使用reviver参数

对于发送JSON数据，需要设置`Content-Type`为`application/json`：