js相关知识点

1. js实现防抖，节流简单代码

防抖就是在动作停止以后一段时间内再触发，节流就是一段时间内只能触发一次。

防抖

function debounce(message, delay) {
            let timer = null;
            return function() {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    console.log(message);
                }, delay);
            }
        }
        window.addEventListener('resize', debounce('防抖', 100))
 

节流

function throttle(message, delay) {
            let canRun = true;
            return function() {
                if (canRun) {
                    canRun = false;
                    setTimeout(() => {
                        console.log(message);
                        canRun = true;
                    }, delay);
                }
            };
        }
        window.addEventListener('resize', throttle('节流', 500));
 

3. 实现对象的拷贝

Object.assign可以实现对象的拷贝，现在我们来手动实现以下：Object.keys不会遍历原型链身上的属性，所以下面使用Object.keys(src[i])

Object.myassign = function(target, ...src) {
    let length = src.length;
    for (let i = 0; i < length; i++) {
        if (src[i] !== null && src[i] !== undefined) {
            for (let key of Object.keys(src[i])) {
                target[key] = src[i][key];
            }
        }
    }
    return target;
}
 

4.对url地址'?username=xll&age=23&grades=90' 进行解析

使用URLSearchParams构造函数

let str = '?username=xll&age=23&grades=90';
let searchParams = new URLSearchParams(str);
let res = [];
for (let item of searchParams) {
    res[item[0]] = item[1];
}
searchParams.set('page', 2);
console.log(searchParams.toString());//username=xll&age=23&grades=90&page=2
console.log(res);//[ username: 'xll', age: '23', grades: '90' ]
 

使用split+map

let str = '?username=xll&age=23&grades=90';
//通过location.search可以得到上面的字符串str
str = str.slice(1);
let res = [];
// console.log(str);
for (let item of str.split('&').map(x => x.split('='))) {
    //[[username=xll],[age=23],[grades=90]]
    //map之后得到[[username,xll],[age,23],[grades,90]] item循坏这个数组
    res[item[0]] = item[1];
}
console.log(res);
 

5. 拍平数组

使用递归去判断数组里面是否有数组；使用函数收集参数的方式...arr可以实现多个数组连接

const concatArray = function(...arr) {
    let newArray = [];
    const concatarray = function(arr) {
        arr.forEach((item, index, array) => {
            if (!Array.isArray(item)) {
                newArray.push(item);
            } else {
                return arguments.callee(item);
            }
        });
        return newArray;
    }
    return concatarray(arr);
}
 

...未完待续