综合面试题-js深入版

最新推荐文章于 2024-06-16 18:09:06 发布
最新推荐文章于 2024-06-16 18:09:06 发布
阅读量312 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/betterangela/article/details/127213909
版权

综合面试题-js深入版

  1. 数组扁平化

一维数组：数组中只有一级

二维数组：数组中有两级

多维数组：数组中有两级及以上

变成一维数组的操作——扁平化

  1. flat

es6中新增的方法

ps.不知道的api找mdn

去重

  1. 对象键值对

  2. 新开一个数组 for循环 indexOf includes来判断

  3. new Set来去重

  4. ……

经典算法

  1. toString

思路：将数组变为字符串

toString是会把一个数组直接变为一个字符串，字符串里绝对不会出现中括号[]，而把每项用逗号, 分隔；

toString会自动扁平化，以逗号连接

这里扩展一下Object.prototype.toString.call({name:'angela',age:18})

Object.prototype.toString() - JavaScript | MDN

join也是一样的

ps.map改变每项的值，返回啥就改成啥

  1. JSON.stringify

stringify和toString的区别在于 stringify是有中括号的

let arr=[1,2,[3,8],[35,87,[26,9]]]
let arr1=[{name:'angela',age:18},{name:'tom',age:18}]
// 1.flat方法
console.log('1.flat方法--------------------')
console.log(arr.flat(Infinity));
// 2.toString和join
console.log('2.toString和join--------------------')
console.log(arr.toString().split(',').map(i=>Number(i)));
console.log(arr.join().split(',').map(i=>Number(i))); // join同toString是一样
console.log(arr1.flat(Infinity));
console.log(arr1.toString().split(',')); // 有局限的
console.log(arr.join('|').split(/,|\|/g)); // 有局限的
// 3.JSON.stringify
console.log('3.JSON.stringify--------------------')
console.log(JSON.stringify(arr).replace(/\[|\]/g,'').split(','))
console.log(JSON.stringify(arr1).replace(/\[|\]/g,''));

  1. concat(...array)

前言：

用函数制定一个规则，检测数组中的某一项是否符合这个规则

some做检测

ps.forEach map some find

Array.isArray手动改原型链依然判为false 检测数据类型

...arr：每次只展开一级，展开不了很深

// 4.concat(...arr)
console.log('4.concat(...arr)--------------------')
console.log([].concat(...arr))
while(arr.some(i=>Array.isArray(i))){
    arr=[].concat(...arr)
}
console.log(arr);

  1. 递归处理

递归思路：

fn执行的时候又调了自己

循环当前这个数组的每一项：

  • 不是数组，创建一个新数组存起来；

  • 当前是数组，再调这个方法（先不管这个），重新进来

// res放在外面
let res=[]
function deep(arr){
    for(let i=0;i<arr.length;i++){
        if(arr[i] instanceof Array){
            deep(arr[i]);
            continue;
        }
        res.push(arr[i])
    }
}

let arr=[1,2,[3,8],[35,87,[26,9]]]
deep(arr);
console.log(res);
// res放在里面
function myFlatter(arr){
    let res=[]
    arr.forEach(i=>{
        if(Array.isArray(i)){
            res=res.concat(myFlatter(i))
        }else{
            res.push(i)
        }
    })
    return res;
}
res=myFlatter(arr);
console.log(res);
function flatter(arr){
    return arr.reduce((total,i)=>{
        // if(Array.isArray(i)){
        //     total=total.concat(flatter(i));
        // }else{
        //     total.push(i)
        // }
        // return total;
        return Array.isArray(i)?total.concat(flatter(i)):[...total,i]
    },[])
}
res=flatter(arr);
console.log(res);

JavaScript数组扁平化的五种方式_二九君的博客-CSDN博客_javascript数组扁平化

【JavaScript】实现数组扁平化_程序媛小y的博客-CSDN博客_js数组扁平化处理

  1. _new方法

作为构造函数执行的步骤：

扩展一下Object.create

+创建一个空对象

+该对象的__proto__指向你传的参数（它所属构造函数的实例）。合理下传入的应该是一个原型对象proto，那么创建出来的空对象就是proto所属构造函数(该proto的constructor指向)的实例。

这里有一点绕口令：

Fn.prototype属于哪个构造函数的原型？Fn

function Dog(name){
    this.name=name;
}
Dog.prototype.bark=function(){
    console.log('wang wang')
}
Dog.prototype.sayName=function(){
    console.log('my name is' + this.name);
}


let sanmao=new Dog('sanmao');
console.dir(sanmao);


// function _new(Dog,name){
//     const obj={};
//     obj.name=name;
//     obj.__proto__=Dog.prototype;
//     return obj;
// }
function _new(Fn,...args){
    // let obj={}
    // obj.__proto__=Fn.prototype;
    let obj=Object.create(Fn.prototype);
    Fn.call(obj,...args);
    return obj;
}
sanmao=_new(Dog,'liumao')
console.dir(sanmao);

  1. 数组合并?题意本身不是很明确

数组合并concat

(function(){
    let arr1=['A1','A2','B1','B2','C1','C2','D1','D2']
    let arr2=['A','B','C','D']


    let arr=[]
    for(let i=0;i<arr1.length-1;i++){
        if(arr1[i][0]<arr1[i+1][0]){
            let alpha=arr2.find(item=>item===arr1[i][0])
            alpha?arr.push(arr2.shift()):null;
            continue;
        }
        arr.push(arr1[i])

    }

    if(arr2.length){
        // 如果原来数组是乱序的这里还得改一下
        arr=arr.concat(arr2);
    }

    console.log(arr);
    console.log(arr1);
    console.log(arr2);
})()

function method2(){
    let arr1=['A1','A2','B1','B2','C1','C2','D1','D2']
    let arr2=['A','B','C','D']


    let arr=[]
    arr2.forEach((alpha)=>{
        let index=arr1.findLastIndex(i=>i[0]===alpha)
        arr1.splice(index+1,0,alpha);
    })
    console.log(arr);
    console.log(arr1);
    console.log(arr2);
}
method2();

  1. 闭包

let形成块级作用域

let形成块级作用域。当前i的值存在当前块级作用域里，定时器回调触发的时候找的i是当前块级作用域中的i

大闭包

  1. 循环体里面整个是一个大函数，保存变量i

for(var i=0;i<10;i++){
    (function(i){
        // i为参数
        setTimeout(()=>{
            console.log(i)
        },1000)
    })(i)
    
}

把回调处理成闭包*

  1. 另一种思路是在setTimeout的回调做文章，这里也是一个函数

for(var i=0;i<10;i++){
    // setTimeout((function(i){
    //     return ()=>console.log(i)
    // })(i),1000)
    // return一个function是在这里做文章
    setTimeout(((i)=>()=>console.log(i))(i),1000)
    
}
function timer(){
    return i=>{
        setTimeout(()=>console.log(i),1000)
    }
}

  • 思路一样，使用bind

for(var i=0;i<10;i++){
    var fn=function(i){
        console.log(i)
    }
    setTimeout(fn.bind(null,i),1000)
    
}

  1. 匿名函数

匿名函数如果设置了函数名

  1. 外面反而不能用，里面是能用的

  2. 里面AAA就相当于是一个const变量，

  • 你改这个值是没有效果的，但是它不会报错(非strict)

  • 但是你前面加了var，本身这个函数名就失效了

设置了名字带来的问题：

外面不能用，里面用了还不能改

当一个变量前没有var let const，沿着上级作用域链查找

  1. a==1 & a==2 & a==3

    1. toString类型转换

两个等号叫比较

三个等号叫绝对比较

（一个等号叫赋值）

==：若数据类型不一样，先转换成一样的再进行比较

===：类型一样值也一样

var a={
    i:0,
    valueOf:function(){
        this.i++;
        console.log(this.i);
        return this.i;
    },
    [Symbol.toPrimitive]:function(){
        return ++this.i;
    }
}
console.log(a==1)

这道题思路：

number类型不可能，bool也不行，字符串……

Array.prototype.toString 以逗号连接数组中的每一项

Object.prototype.toString 用来检测数据类型的

所属类原型上的方法

  1. Object.defineProperty

对某个属性的描述，设置某个属性的相关特征

参数：对象 键 描述符

获取这个属性的时候，就会走get函数

// 简单版
let n=0;
Object.defineProperty(window,'a',{
    get(){
        return ++n;
    }
})
if(a==1 && a==2 & a==3){
    console.log('OK')
}



Object.defineProperty(window,'a',{
    get(){
        // 这时的this代表这个属性
        this.value?this.value++:this.value=1;
        return this.value;
    }
})
if(a==1 && a==2 & a==3){
    console.log('OK')
}

  1. Array.prototype.push原理

  1. 数组经典排序算法

  1. 冒泡排序

冒泡：越大的气泡越在上。

当前项和后一项进行比较，最大的排在后面

动图效果：

1662627592813.mp4

引申一下：交换

外层循环控制比较的轮数，n个数我只需要比较n-1次，因为我只需要把n-1个数依次放到末尾；

内层循环控制每轮要比较的次数，

整体思路：

外循环控制多少轮，里层循环控制比较次数，不用跟自己比，做多length-1，然后减掉末尾的数；

  1. 插入排序

将抓入的牌依次和手里的牌进行比较；

从后往前看，手上的牌小了，就往前挪；大了就插过去

let arr=[9,16,28,18,98,63,3];
for(let i=1;i<arr.length;i++){
    // arr[i]:要插入的元素
    let insert=arr[i]
    let j=i-1;
    for(;j>=0;j--){
        // 插入的数大于(等于)比较的元素 j+1
        if(insert>=arr[j]){
            // j+1 -> i-1 往后挪
            for(let p=i-1;p>=j+1;p--){
                arr[p+1]=arr[p];
            }
            arr[j+1]=insert;
            break;
        }
    }
    // 出循环没插入
    if(j<0){
        // 0 -> i-1 往后挪
        for(let p=i-1;p>=0;p--){
            arr[p+1]=arr[p];
        }
        arr[0]=insert;
    }
}
console.log(arr);


let arr=[9,16,28,18,98,63,3];
for(let i=1;i<arr.length;i++){
    // arr[i]:要插入的元素
    let insert=arr[i]
    let j=i-1;
    for(;j>=0;j--){
        // 插入的数大于(等于)比较的元素 j+1
        if(insert>=arr[j]){
            // 用splice一定要先删除再插入
            // 这里删除的位置一定大于插入的位置，所以不会产生数组塌陷
            arr.splice(i,1);
            arr.splice(j+1,0,insert)
            break;
        }
    }
    // 出循环没插入
    if(j<0){
        // 用splice一定要先删除再插入
        arr.splice(i,1);
        arr.splice(0,0,insert)
    }
}
console.log(arr);

或者就像视频中新开一个数组，视频中的方法是新开一个数组

https://www.jianshu.com/p/bd0ed19bc158

JavaScript插入排序 - 帕图纳克斯 - 博客园

js 实现排序算法 -- 插入排序（Insertion Sort）

网上很多是这样：

let arr=[9,16,28,18,98,63,3];
for(let i=1;i<arr.length;i++){
    // arr[i]:要插入的元素
    let insert=arr[i]
    let j=i-1;
    while(j>=0 && insert<arr[j]){
        arr[j+1]=arr[j];
        j--;
    }
    arr[j+1]=insert;  

}
console.log(arr);

自己总结：

插入排序其实就是抓牌，将新的牌与手中已有的牌进行比较，从后往前比，当新的牌大于(等于)当前比较的元素时，这个时候插入进去。

所以代码上是：

首先取0号位置作为已排序数组，所以外层循环从1号位置开始循环，i=1;i<length;i++;

从后往前扫描，j=i-1；并且用一个变量temp保存这张新牌即arr[i]，从后往前扫描的同时元素依次往后挪，边比较边往后挪，内层循环的条件是 while j>=0 && temp<arr[j]，当出循环的时候，j+1号位置就是我们要插入的位置。

  1. 快速排序

思路：

let arr=[18,24,56,90,3,7,65]
function quick(arr){
    let i=Math.floor(arr.length/2);
    let middle=arr[i];
    arr.splice(i,0);
    let left=[],right=[];
    arr.forEach(item=>{
        if(item<middle) left.push(item)
        if(item>=middle) right.push(item)
    })

    if(left.length>=1) left=quick(left);
    if(right.length>=1) right=quick(right)
    return left.concat(middle).concat(right)

}

console.log(quick(arr));

JavaScript 实现快速排序 - 知乎

快速排序（Quicksort）的Javascript实现 - 阮一峰的网络日志

diff算法 阮一峰_JavaScript实现十大排序算法_短腿胖胖小笨猪的博客-CSDN博客

自己总结：

首先在数组中选一个元素作为基准点，比如一般选中间值，比这个值小的都放到左边，比这个值大的都放到右边，然后分别对左边和右边依次递归，最后返回的是左中右的拼接。

    1. 递归

一门语言：

语法本身，设计模式，底层原理，框架，服务器部署，数据库；

这3个排序是入门级别的，二叉树&三叉树，

  1. 数组填充

let obj={
    1:22,
    2:333,
    12:878,
}

let arr=new Array(12).fill(null);
arr.forEach((i,index)=>{
    obj[index+1]?arr[index]=obj[index+1]:null;
})
// 这里用map会更好
arr=new Array(12).fill(null).map((_,index)=>{
    return obj[index+1] || null;
})
console.log(arr);

map改变之前的值

let obj={
    1:22,
    2:333,
    12:878,
}

obj.length=13;
arr=Array.from(obj).slice(1).map(i => i || null)
console.log(arr);

  1. 求交集

注意一下重复元素的情况

let arr1=[1,2,2,76,39,22];
let arr2=[2,39,67,36];
let arr=arr1.reduce((total,item)=>{
    let index=arr2.indexOf(item)
    if(index>-1){
        arr2.splice(index,1)
        total.push(item);
    }
    return total;
},[])
console.log(arr);

思考题：交差并补

  1. 旋转数组（其实就是将数组平移k个位置）

k写几就是把最后几位放前面

方法一：slice支持负数作为索引

方法二：splice返回删除的数组

方法三：pop unshift

数组切割再拼接

let arr=[1,2,3,4,5,6,7,8]
function rotate(arr,k){
    let length=arr.length;
    k=k%length;
    arr=arr.map((value,index)=>{
        return {
            value,
            index:(index+k)%length
        }
    })
    arr.sort((a,b)=>{
        return a.index-b.index;
    })
    arr=arr.map(i=>(i.value))
    return arr;

}

arr=rotate(arr,3);
console.log(arr);

  1. 函数柯理化

比较简单的做法，这样也行

function add(n1,n2,n3){
    return n1+n2+n3;
}
function currying(...args){
    if(args.length>=3){
        return add(...args)
    }
    return (...arg)=>{
        return currying(...args,...arg);
    }
}
console.log(currying(1,2)(3))
console.log(currying(1)(2,3))
console.log(currying(1)(2)(3))
console.log(currying(1,2,3))

call & apply & bind 与柯理化

betterangela
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端面试题--js
weixin_44501366的博客
10-09 3649
SetES6 新增的一种新的的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。成员不能重复；只有键值，没有键名，有点类似数组；可以遍历，方法有add: 新增，相当于array里的pushdelete: 存在即删除集合中的valuehas: 判断集合中是否存在valueclear: 清空集合Set 结构可以利用Array.from或者 扩展运算符 转化为数组。
java面试题综合
10-11
【Java面试题综合】 在Java面试中，面试官通常会关注候选人的基础知识、技术深度、实战经验以及问题解决能力。以下是一些常见的Java面试知识点： 1. 购物车实现：购物车功能通常涉及数据结构（如ArrayList或...
js实现数组扁平化
bidepanm的博客
05-05 235
递归 function flatArr(arr) { let result = []; for (let i = 0; i< arr.length; i++ ){ if (Array.isArray(arr[i])) { result = result.concat(flatArr(arr[i])); } else { result.push(arr[i]); } } return result; } 先通过toString()把数组转成String对象，再结合.
json面试题_15个近期JavaScript高频手写面试题
weixin_39925031的博客
11-21 339
作为前端开发工程师，JavaScript是我们技术能力中最重要的一环，最近结束了面试的高峰期，来给大家总结了一下最近比较高频出现的15道JavaScript手写面试题，一起来肝吧！01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一：使用flat(...
前端面试题-综合.md
weixin_45407236的博客
03-17 137
HTTP有什么特点 简单快速：客户向服务器请求服务时，只需传送请求方法和路径 灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记 无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接 (深入-持久连接、管线化) 无状态：HTTP协议是无状态协议( Cookie 的出现) http和https协议有什么区别 http: 是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从.
10万字208道Java经典面试题总结(附答案)
热门推荐
学Java，找哪吒
08-02 97万+
1、JDK 和 JRE 有什么区别？ JDK（Java Development Kit），Java开发工具包 JRE（Java Runtime Environment），Java运行环境 JDK中包含JRE，JDK中有一个名为jre的目录，里面包含两个文件夹bin和lib，bin就是JVM，lib就是JVM工作所需要的类库。 2、== 和 equals 的区别是什么？ 对于基本类型，==比较的是值； 对于引用类型，==比较的是地址； equals不能用于基本类型的比较； 如果没有重写equa
【前端高频面试题--微信小程序篇】
qq_45832651的博客
02-09 1496
最新前端微信小程序高频面试题，不信来看！
js的综合面试题
2401_84150165的博客
05-13 408
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
面试总结-2023届安全面试题总汇
lza20001103的博客
09-16 6483
2023届安全面试题总汇 文章目录2023届安全面试题总汇前言0x01 秋招目录（随时更新）0x02 各大安全厂商面试题资料链接一个2023届毕业生在毕业前持续更新、收集的安全岗面试题及面试经验分享 前言 最近发现一个宝贵的面试文章，写了各个以分安全为业务的公司汇总，也是面试官经常会问到的问题，以及CTF经历也是面试官所看好的，大家平时要多多打打CTF和靶机实战呀，这样我们的实战能力才会所有提高。 0x01 秋招目录（随时更新） 有最新的公司校招信息可以随时发布，第一时间更新主要安全行业的公司，主要放不以安
前端面试题总结（react版）
hyqhyqhyqq的博客
12-29 1512
​ 1.对象式的setState是函数式的setState的简写方式(语法糖)​ 2.使用原则：​ (1).如果新状态不依赖于原状态 ===> 使用对象方式​ (2).如果新状态依赖于原状态 ===> 使用函数方式​ (3).如果需要在setState()执行后获取最新的状态数据,​ 要在第二个callback函数中读取。
2022JAVA面试题附答案(长期更新)
weixin_38399962的博客
05-17 14万+
该博客囊括了Java面试中95%的面试题，不包含算法题。如有遗漏或错误，请立刻联系我，十分感谢。
java面试题以及技巧
11-25
├─JavaScript 面试题 │ 新建 文本文档.txt │ ├─Java基础 │ └─SCJP │ │ 2006_02_01_SCWJD_EXAM.pdf │ │ Assertions.doc │ │ Collections.doc │ │ Desktop_.ini │ │ Fundamentals of the Java ...
一站式学习Vue教程加面试题资源
06-13
面试题目详解：本资源提供了一系列针对Vue框架的面试题，包括常见问题、综合题目和实际项目题目等，有助于读者了解Vue的应用和相关开发知识点，提升面试竞争力。 多种学习方式：除了文字教程外，本资源还提供视频...
Java面试题大全.doc
09-30
总的来说，【Java面试题大全.doc】提供了全面的准备策略，不仅关注技术层面，也强调了求职者的综合能力，对于准备Java高级软件工程师面试的求职者具有很高的参考价值。在实际准备时，应结合文档内容深入学习相关知识...
java面试题及技巧3
11-25
├─JavaScript 面试题 │ 新建 文本文档.txt │ ├─Java基础 │ └─SCJP │ │ 2006_02_01_SCWJD_EXAM.pdf │ │ Assertions.doc │ │ Collections.doc │ │ Desktop_.ini │ │ Fundamentals of the Java ...
工具链--nuxt框架 简介（一）
最新发布
qq_35876316的博客
06-16 337
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1461
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
JS-12-es6常用知识-async
m0_68467925的博客
06-13 621
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 576
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
《2021测试面试题- pdf
07-22
《2021测试面试题 - pdf》是一本面试题集合，以PDF格式呈现。这本书可能包含了各种不同类型的面试题，涵盖了不同领域和层级的职位。 阅读这本书可以提供一些关于面试准备的指导，帮助应聘者了解常见的面试问题，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值