当前位置：首页 > article >正文

实现Ajax请求、实现深拷贝

article 2025/2/4 4:59:13

文章目录

1 实现Ajax请求
2 实现深拷贝
- 2.1 方法1：JSON.stringify()
- 2.2 方法2：函数库lodash的_.cloneDeep方法
- 2.3 方法3：手写实现深拷贝函数

1 实现Ajax请求

Ajax（Asynchronous JavaScript and XML），是指通过JavaScript的异步通信，从服务器获取XML文档，从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。
创建AJAX请求的步骤：
1. 创建一个XMLHttpRequest对象。
2. 在这个对象上使用open方法创建一个HTTP请求。
3. 在发起请求前，为对象添加信息和监听函数。
4. 最后调用send方法向服务器发起请求。

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
xhr.open("GET", SERVER_URL, true);
xhr.onreadystatechange() = function () {
    if (this.status === 200) {
        handle(this.response);
    } else {
        console.error(this.statusText);
    }
}
xhr.onerror = function () {
    console.error(this.statusText);
}
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
xhr.send(null);

2 实现深拷贝

深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一个原有类型的引用。

2.1 方法1：JSON.stringify()

JSON.parse(JSON.stringify(obj));
利用JSON.stringify将js对象序列化(JSON字符串)，再使用JSON.parse来反序列化(还原)js对象。

2.2 方法2：函数库lodash的_.cloneDeep方法

var _ = require(‘lodash’);
var obj2 = _.cloneDeep(obj1);

2.3 方法3：手写实现深拷贝函数

function deepCopy(object) {
    if (!object || typeof object !== "object") return;
    let newObject = Array.isArray(object)? []: {};
    for(let key in object){
        if(object.hasOwnProperty(key)) {
            newObject[key] = typeof object[key] === "object"? deepCopy(object[key]): object[key];
        }
    }
    return newObject;
}