2020 面试要记

最新推荐文章于 2024-03-27 09:26:30 发布

静默思想

最新推荐文章于 2024-03-27 09:26:30 发布

阅读量210

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_41871290/article/details/105421435

版权

js 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

1.防抖与节流
防抖是什么? 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟方法

//防抖debounce代码：
function debounce(fn) {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, 500);
    };
}
// 处理函数
function handle() {
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle));

节流是什么 ?高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return

//节流throttle代码：
function throttle(fn) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, 500);
    };
}

function sayHi(e) {
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));

总结：
函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

2.闭包
闭包:能够读取其他函数内部变量的函数。

JS数组去重你知道几种？

法一 For嵌套for 使用splice去重更改原数组正向遍历循环

遇到删掉原数组递减1

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        for(let i = 0; i < arr.length; i++) {
            for(let j = i + 1; j < arr.length ; j++) {
                if(arr[i] === arr[j]) {
                    arr.splice(j, 1)
                    j--;
                }
            }
        }
    } 
    
    distinct(arr)
    console.log(arr) // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null，返回的是去重后的原数组。
缺点：不能过滤掉 NaN、Object

法二 For嵌套for 使用splice去重更改原数组逆向遍历循环

逆向循环遍历遇到重复的直接删掉

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        for(let i = arr.length; i > 0; i--) {
            for(let j = i - 1; j > -1 ; j--) {
                if(arr[i] === arr[j]) {
                    console.log(arr[j])
                    arr.splice(j, 1)
                }
            }
        }
    } 
    
    distinct(arr)
    console.log(arr) // [1, "true", true, 15, false, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、`null``，返回的是去重后的原数组。
缺点：不能过滤掉 NaN、Object

法三：includes去重返回新数组

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(!newArr.includes(arr[i])) {
                newArr.push(arr[i])
            } 
        }
        return newArr
    }
    
    console.log(distinct(arr)) // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN，返回的是去重后的新数组。
缺点：不能过滤掉 Object

法四 indexOf去重返回新数组

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct (arr) {
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(newArr.indexOf(arr[i]) < 0) {
                newArr.push(arr[i])
            } 
        }
        return newArr
    }
    
    console.log(distinct(arr)) //  [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null，返回的是去重后的新数组。
缺点：不能过滤掉 NaN、Object

法五利用对象的属性key唯一的特性去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        let obj = {}
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(!obj[arr[i]]){
                obj[arr[i]] = 1
                newArr.push(arr[i])
            }
        }
        return newArr
    }

    console.log(distinct(arr)) // [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN、Object，返回的是去重后的原数组。
缺点：针对 NaN和'NaN', 对象的key会视为一个key，区分不了NaN和'NaN'

法六利用ES6的Set数据结构的特性

Set集合里的所有的元素都是唯一的

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        return Array.from(new Set(arr))
    }

    console.log(distinct(arr)) // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN，返回的是去重后的新数组。
缺点：不能过滤重复的Object。

法七利用ES6的Map数据结构的特性去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        let map = new Map()
        let newArr = []
        for(let i = 0; i < arr.length; i++) {
            if(!map.has(arr[i])) {
                map.set(arr[i])
                newArr.push(arr[i])
            }
        }
        return newArr
    }

    console.log(distinct(arr)) // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]
}
优点：该方法可以顾虑到重复的 String、Boolean、 Number、undefined、null、NaN，返回的是去重后的新数组。
缺点：不能过滤重复的Object。

法八利用sort()去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        let sortArr = arr.sort()
        let newArr = []
        for(let i = 1; i < sortArr.length; i++) {
            if(sortArr[i] !== sortArr[i-1]) {
                newArr.push(arr[i])
            }
        }
        return newArr
    }

    console.log(distinct(arr)) // [1, 15, NaN, NaN, "NaN", {…}, {…}, "a", false, null, "true", true, undefined]
}
该方法的缺陷很明显，针对'true','true',true,true,undefined,undefined, null,null，NaN, NaN,0, 0,{},{} 都不能很好的过滤去重，不建议使用该方法去重。

法九 reduce数组去重

{
    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}];
    function distinct(arr) {
        return arr.sort().reduce((init, current) => {
            if(init.length === 0 || init[init.length-1] !== current) {
                init.push(current);
            }
            return init;
        }, []);
    }

    console.log(distinct(arr)) // [0, 1, 15, NaN, NaN, "NaN", {…}, {…}, "a", false, null, "true", true, undefined]
}
该方法先对数组进行排序，在进行去重过滤，针对不能过滤重复的 NaN和Object。

从输入URL到页面加载发生了什么

总体来说分为以下几个过程:

DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

JS的5中基本数据类型(简单数据类型):undefined,null,boolean,number,string; 1种复杂数据类型:object.

typeof操作符--检测给定变量的数据类型
"undefined" -- 如果这个值未定义;
"boolean" -- 如果这个值是布尔值;
"string" -- 如果这个值是字符串;
"number" -- 如果这个值是数值;
"object" -- 如果这个值是对象或者null
"function" -- 如果这个值是函数

Object类型
object的每个实例都具有下列属性和方法.
constructor:保存着用于创建当前对象的函数. 构造函数(constructor)就是Object().

hasOwnProperty(propertyName): 用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在. 其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如: o.hasOwnProperty("name")).

isPrototypeOf(object): 用于检查传入的对象是否是当前对象的原型

propertyIsEnumerable(propertyName): 用于检查给定的属性是否能够使用for-in语法来枚举. 与hasOwnProperty()方法一样,作为参数的属性必须以字符串形式指定.

toLocaleString(): 返回对象的字符串表示, 该字符传与执行环境的地区对应.

toString(): 返回对象的字符串表示.

valueOf(): 返回对象的字符串,数值,或者布尔值表示.通常与toString()方法的返回值相同.

布尔操作符:
逻辑非(!) 逻辑与( && ) 逻辑或( || )

Array操作方法:
concat() 基于当前数组创建一个新的数组
var colors = ["red","green","blue"]
var colors2 = colors.concat("yellow",["block","good"] );
alert(colors2);

slice() 能够基于当前数组中的一或者多个创建一个新数组, slice可以接受一个或者两个参数,即要返回项的起始和结束位置. 在只有一个参数时, 返回从该参数指定位置到当前数组末尾的所有项. 在有两个参数的情况下, 返回的是起始和结束位置之间的项但不包含结束位置项.
var colors = ["red","green","blue"]
var colors2 = colors.slice(0);
var colors3 = colors.slice(1,4);
alert(colors2);
alert(colors3);
如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置.

splice()的主要用途是向数组的中部插入项
splice(0,2)删除数组中的前两项, 只需指定2个参数
splice(2,0,"red","blue") 会从当前数组的位置2开始插入字符串,需要指定3个参数
splice(2,2,"热的","冷的") 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数 (替换)

js数组乱序输出数组乱序排列
var arr = [1,2,3,4,5,6,7,8,9,10];
var newArr = [];
var len = arr.length;
for(var i=0; i<len; i++){
var index = Math.floor(Math.random()*arr.length);//随机下标
newArr.push(arr[index]);//将随机出的元素，存放新数组newArr中去
arr.splice(index,1);// 将随机出的元素在arr中删除
}
//arr中删除随机出的元素,arr.length-1,同时i++,导致循环不会10次,会是5次.最后得到newArr中只有一半的随机数字,arr中剩下另一半. 将其合并到一起,得到res
var res =[...newArr,...arr];
console.log(res)
js数组扁平化操作
var arr = [1,[2],[3,4],5]
function flatArray(arr){
return arr.reduce((result,item) =>{
return result.concat(Array.isArray(item) ? flatArray(item) : item);
}, [])
}
js字符串反转
1.var name = "My city is WH"; var resultStr = name.split('').reverse().join(''); console.log(resultStr); // HW si ytic yM
2.var strText = "akklafs555"
console.log([...strText].reverse().join('')); //555sfalkka