前端面试题

￡神魔★判官ぃ 2022-05-15 18:12 506阅读 0赞

*  ## [前端面试题《CSS》][CSS] ##
 *  ## [前端面试题《JS》][JS] ##
 *  ## [前端面试题《vue》][vue] ##
 *  ## [前端面试题《网络&浏览器》][Link 1] ##
 *  ## [前端面试题《webpack&打包构建&项目优化》][webpack] ##
 *  ## [前端面试题《手写代码》][Link 2] ##

### DocumentType有什么用？ ###

> DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。
> 
> 要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
> 
> Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

### 给100个里绑定点击事件 ###

>       利用事件代理， 详见我的另一篇博客：[https][]：//blog.csdn.net/Web\_J/article/details/83900073

### function print() \{let person1=\{ name:"小黄" \};let person2=person1 ###

### var a=\{x:100\}  function A(obj) \{var b=obj  b.x=200 ###

### 作用域 ###

var count=10;//全局作用域 标记为f1
    function add(){
        var count=0;//函数全局作用域 标记为f2
        return function(){
            count+=1;//函数的内部作用域
            alert(count);
        }
    }
    var s=add()
    s();//输出1
    s();//输出2

**[详看：https：//blog.csdn.net/Web\_J/article/details/84866582][https_blog.csdn.net_Web_J_article_details_84866582]**

### class Animal \{constructor()\{this.type = 'animal'\} ###

class Animal {
        constructor(){
            this.type = 'animal'
        }
        says(say){
            setTimeout(function(){
                console.log(this.type + ' says ' + say)  //setTimeout()的this指向window或global对象
            }, 1000)
        }
    }
     
    var animal = new Animal()
    animal.says('hi')  //undefined says hi

**[详看：https：//blog.csdn.net/Web\_J/article/details/84941963][https_blog.csdn.net_Web_J_article_details_84941963]**

### **倒计时10秒** ###

window.onload = function(){
                let i = 10;
                let timer = setInterval(function(){
                i<0 ? clearInterval(timer) : document.body.innerHTML = i--
                },1000);
     
            }

### ('b' + 'a' + + 'a' + 'a').toLowerCase()输出什么？ ###

好吧，才疏学浅的我看到这题的答案是：baaa

先说下正确答案，以便大家跟着我一个思路：banana

既然这么说了，那这一定是错误答案了，下面我们来解析一下这个题：

**1. js运算优先级和隐式转换**

仔细一想，这题估计和JavaScript运算符优先级、隐式转化有关系。  
于是先去MDN查了一下JavaScript运算符优先级  
我先把上面代码用到的运算符和优先级列举出来：

*圆括号（20）>一元正号（16）>加法（13）*

好了，现在我们来解析一下这个代码：

> 'b' + 'a' + （+ 'a'） + 'a'
> 
> 一元正号的优先级高于加法，所以我们这样用括号会让这个代码更加清晰<br> 先运算优先级高的，也就是括号里面的，在与运算括号外面的

**2. 一元正号 运算**

这时候就涉及到第二个重要的知识点，一元正号的运算，先来看官方文档：

> 一元正号运算符位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。
> 
> 尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。
> 
> 它可以将字符串转换成整数和浮点数形式，也可以转换非字符串值true，false和null。小数和十六进制格式字符串也可以转换成数值。
> 
> 负数形式字符串也可以转换成数值（对于十六进制不适用）。如果它不能解析一个值，则计算结果为 NaN。

注意看上面的这段话：如果操作数不是一个数值，会尝试将其转换成一个数值和如果它不能解析一个值，则计算结果为 NaN

那上面代码的+ 'a'就是会变成NaN，过程如下：

> 'b' + 'a' + NaN + 'a'
> 
> // to
> 
> 'b' + 'a' + "NaN" + 'a'

最终在调用toLowerCase函数转成小写，就变成了banana

### let a = \{n : 1\};let b = a;a.x = a = \{n: 2\};  ###

>         let a = \{n : 1\};  
>         let b = a;  
>         a.x = a = \{n: 2\};   
>         console.log(a.x)  
>         console.log(b.x)
> 
> 答案：[https://blog.csdn.net/Web\_J/article/details/107471318][https_blog.csdn.net_Web_J_article_details_107471318]

### **你知道的网页制作会用到的图片格式有哪些 ？** ###

> 1.**png-8 、 png-24 、 jpeg 、 gif 、 svg**  
> 2.但是上面的那些都不是面试官想要的最后答案。面试官希望听到的是**Webp , Apng** 。（是否有关注新技术，新鲜事物）    
> 3.Webp： WebP 格式，姑歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积⼤约只有 JPEG 的 2/3 ，并能节省流量的服务器带宽资源和数据空间。  
>   Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。  
> 4.在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小 40% 。  
> 5.Apng：全称是 “Animated Portable Network Graphics” , 是PNG的位图动画扩展，可 以实现png格式的动态图⽚效果。04年诞生，但一直得不到各浏览器支持，直到  
>   目前得到iOS safari 8 的支持，有望代替 GIF 成为下代动态图标准

### 实现函数柯里化（使用多个参数的一个函数转换成一系列使用一个参数的函数） ###

function currying(fn) {
      let args_arr = [], max_length = fn.length
      let closure = function (...args) {
        // 先把参数加进去
        args_arr = args_arr.concat(args)
        // 如果参数没满，返回闭包等待下一次调用
        if (args_arr.length < max_length) return closure
        // 传递完成，执行
        return fn(...args_arr)
      }
      return closure
    }
    function add(x, y, z) {
      return x + y + z
    }
    curriedAdd = currying(add)
    console.log(curriedAdd(1, 2)(3))

[https://blog.csdn.net/weixin\_34329187/article/details/91396617][https_blog.csdn.net_weixin_34329187_article_details_91396617]

### js实现栈 ###

### 单页面和多页面的区别 ###

![b969e436a90caece1893d2523528013d.png][]

### 引入cdn字体会发生什么 ###

> **字体跨域 **
> 
> 字体文件在CDN服务器上、项目部署在自己的服务器上，字体文件就出现了跨域加载的问题。
> 
> 处理这种跨域，只要设置Access-Control-Allow-Origin，允许目标域名访问就可以了，Access-Control-Allow-Origin是HTML5新增的一个特性，在资源类的域名下做如下配置（nginx的配置，apache相似处理）
> 
> location ~ .\*\\.(eot|ttf|ttc|otf|eot|woff|woff2|svg)(.\*) \{ add\_header Access-Control-Allow-Origin http://www.yourdomain.com; \}

### JS扁平化数组 ###

**`flat()`**默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将`flat()`方法的参数写成一个整数，表示想要拉平的层数，默认为1。如果不管有多少层嵌套，都要转成一维数组，可以用`Infinity`关键字作为参数。

[1, 2, [3, [4, 5]]].flat()
    // [1, 2, 3, [4, 5]]
    
    [1, 2, [3, [4, 5]]].flat(2)
    // [1, 2, 3, 4, 5]
    
    [1, [2, [3]]].flat(Infinity)
    // [1, 2, 3]

**递归**

**扩展运算符**

function flatten(arr) {
        while(arr.some(item=>Array.isArray(item))) { 
            //some() 方法用于检测数组中的元素是否满足指定条件
            arr = [].concat(...arr);
        }
        return arr;
    }

### js事件监听和JQ事件监听的写法 ###

> **       详见[https://blog.csdn.net/Web\_J/article/details/83900073][https]**

### 计算字符串中每个字符出现的次数 ###

### 去除字符串中的无效字符和乱码 ###

/\*\*  
   \* 请处理给定字符串:  
   \*   - 去掉无用字符和乱码, 只保留大小写英文字母, 单引号, 和空格  
   \*   - 把一个或多个连续无用字符和乱码换成一个空格  
   \* @param str: 字符串, 例 "I'm我driving是to乱Beijing码after breakfast"  
   \* @return str: 例 "I'm driving to Beijing after breakfast"  
   \*/

decode=str => {
        var reg = /([a-z]|[A-Z]|\'|\s)+/g // \s查找空白字符。
        var b = str.match(reg) //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
        return b.join(' ');
    
      }
      var str = "I'm我driving是to乱Beijing码after breakfast"
      decode(str)

### JS大数相加 ###

### git版本回退 ###

> git reset --hard id

### Function.prototype.a = 'a';Object.prototype.b = 'b';function Person()\{\}; ###

Function.prototype.a = 'a';
    Object.prototype.b = 'b';
    function Person(){};
    var p = new Person();
    console.log('p.a: '+ p.a); // p.a: undefined
    console.log('p.b: '+ p.b); // p.b: b

> 不少人第一眼看上去就觉得很疑惑，p不是应该继承了Function原型里面的属性吗，为什么p.a返回值是undefined呢？  
> 其实，只要仔细想一想就很容易明白了，Person函数才是Function对象的一个实例，所以通过Person.a可以访问到Function原型里面的属性，但是new Person()返回来的是一个对象，它是Object的一个实例,是没有继承Function的，所以无法访问Function原型里面的属性。
> 
> 但是,由于在js里面所有对象都是Object的实例，所以，Person函数可以访问到Object原型里面的属性，Person.b => 'b'

### qiankun的原理 ###

>  *  **HTML Entry 接入方式**，让你接入微应用像使用 iframe 一样简单。
>  *  **样式隔离**，确保微应用之间样式互相不干扰。
>  *  **JS 沙箱**，确保微应用之间 全局变量/事件 不冲突。
> 
> 为什么不用iframe
> 
>  *  url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
>  *  UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..
>  *  全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
>  *  慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

### arr = \[1,2,3,4\]，如何得到arr.fn = \[1,2,3,4,1,2,3,4\]？ ###

> 1.arr.concat(arr)  //concat()方法生成了一个新的数组，并不改变原来的数组。
> 
> 2.arr.push.apply(arr,arr) //使用apply劫持数组的push方法
> 
> 3.\[...arr,...arr\] //扩展运算符（...）

### 杨辉三角的JS实现 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70][]

###  二分查找 ###

> 可用递归和非递归两种方式，折半查找
> 
> [https://blog.csdn.net/Web\_J/article/details/114642207][https_blog.csdn.net_Web_J_article_details_114642207]

[CSS]: https://blog.csdn.net/Web_J/article/details/115797451
[JS]: https://blog.csdn.net/Web_J/article/details/115797725
[vue]: https://blog.csdn.net/Web_J/article/details/115797597?spm=1001.2014.3001.5502
[Link 1]: https://blog.csdn.net/Web_J/article/details/115797613
[webpack]: https://blog.csdn.net/Web_J/article/details/115797845
[Link 2]: https://blog.csdn.net/Web_J/article/details/115280608?spm=1001.2014.3001.5502
[https]: https://blog.csdn.net/Web_J/article/details/83900073
[https_blog.csdn.net_Web_J_article_details_84866582]: http://xn--https-si33a//blog.csdn.net/Web_J/article/details/84866582
[https_blog.csdn.net_Web_J_article_details_84941963]: http://xn--https-si33a//blog.csdn.net/Web_J/article/details/84941963
[https_blog.csdn.net_Web_J_article_details_107471318]: https://blog.csdn.net/Web_J/article/details/107471318
[https_blog.csdn.net_weixin_34329187_article_details_91396617]: https://blog.csdn.net/weixin_34329187/article/details/91396617
[b969e436a90caece1893d2523528013d.png]: /images/20220503/24510bb520324ce09404a717885cf403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dlYl9K_size_16_color_FFFFFF_t_70]: /images/20220503/c3afa79655c348cf9d1ceacf2dd50ab1.png
[https_blog.csdn.net_Web_J_article_details_114642207]: https://blog.csdn.net/Web_J/article/details/114642207