前端手写代码练习

1、手写数组的乱序输出

  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        for (let i = 0; i < arr.length; i++) {
            const randIndex = Math.floor(Math.random() * (arr.length - i - 1)) + i;
            let temp = arr[i]
            arr[i] = arr[randIndex];
            arr[randIndex] = temp;
        }
        console.log(arr)

2、手写深拷贝

 // 使用JSON.stringify()
        let obj1 = {
            a: 0,
            b: {
                c: 0
            }
        };

        let obj2 = JSON.parse(JSON.stringify(obj1));
        console.log(obj2)

        obj1.b.c = 16

        console.log(obj1, obj2)
       // 函数库的lodash的.cloneDeep方法
        // 不能直接用,需要转义
        var _ = require('lodash');
        var obj3 = {
            a: 1,
            b: {
                f: {
                    g: 1
                }
            },
            c: [1, 2, 3]
        }
        var obj4 = _.cloneDeep(obj3);
        console.log(obj3.b.f === obj4.b.f)

递归实现深拷贝函数

function deepClone(obj) {
            let cloneObj = new Object();
            // 判断当输入的数据是简单数据类型时,直接复制
            if (obj && typeof obj !== 'object') {
                cloneObj = obj
            } else if (obj && typeof obj === 'object') {
                // 当输入的对象是对象或数组时
                cloneObj = Array.isArray(obj) ? [] : {};

                // 遍历数据对象
                for (let key in obj) {
                    // 判断对象是否存在key值
                    if (obj.hasOwnPropery(key)) {
                        // 若当前元素为对象时,递归调用
                        cloneObj = deepClone(obj[key])
                    } else {
                        cloneObj[key] = obj[key]
                    }
                }
            }
            return cloneObj
        }

3、实现AJAX请求

        const server_url = '/server'
        let xhr = new XMLHttpRequest();
        // 创建HTTP请求
        xhr.open('GET', server_url, true);
        // 设置状态监听函数
        xhr.onreadystatechange = function() {
            if (this.readyState !== 4) return;
            if (this.status === 200) {
                handle(this.response);
            } else {
                console.log(this.statusText)
            }
        }

        // 设置请求失败时的监听函数
        xhr.onerror = function() {
                console.log(this.statusText)
            }
            // 设置请求头信息
        xhr.responseType = 'json';
        xhr.setRequestHeader('Accept', 'application/json')
            // 发送HTTP请求
        xhr.send(null)
上一篇:重写post和get方法


下一篇:SVM官方教程:SVR 简易教程