21道前端面试题，值得收藏～

不念不忘少年蓝@ 2022-12-11 12:30 152阅读 0赞

不点蓝字，我们哪来故事？

## 1、scrollWidth,clientWidth,offsetWidth的区别 ##

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

## 2、怎么让Chrome支持小于12px的文字？ ##

.size {
      font-size:10px;
      -webkit-transform:scale(0.8);
      display:block;
    }

<div class="size">我是十号字</div>

## 3、写出最简单的去重方式 ##

//es6的new Set()方式
    let array=[1,2,3,4,5,6,2,3];
    [...new Set(array)]

## 4、数组对象全等比较 ##

'abc' === 'abc' // true
    1 === 1 // true
    [1,2,3] === [1,2,3] // false
    {a: 1} === {a: 1} // false
    {} === {} // false

## 5、变量提升 ##

var name = 'World!';
    (function () {
      if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
      } else {
        console.log('Hello ' + name);
      }
    })();

理解这个，我们可以先看下面的题目：

var x = 1; // Initialize x
    console.log(x + " " + y); // '1 undefined'
    var y = 2;

相当于

var x = 1; // Initialize x
    var y; // Declare y
    console.log(x + " " + y); // '1 undefined'
    y = 2; // Initialize y

所以上面的自调用函数可以如下理解：

var name = 'World!';
    (function () {
      var name;
      if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
      } else {
        console.log('Hello ' + name);
      }
    })();

输出结果：

Goodbye Jack

## 6、局部变量和全局变量 ##

(function(){
      var x = y = 1;
    })();
    console.log(y);
    console.log(x);

输出结果：

1
    Uncaught ReferenceError: x is not defined

## 7、看以下代码输出什么？(一道经典面试题) ##

// 这道题涉及了异步、作用域、闭包
    // 因为是setTimeout是异步的。正确的理解setTimeout的方式(注册事件)： 有两个参数，第一个参数是函数，第二参数是时间值。 调用setTimeout时，把函数参数，放到事件队列中。等主程序运行完，再调用。
    for(var i = 1; i <= 3; i++){  //建议使用let 可正常输出i的值
      setTimeout(function(){
        console.log(i);   
      },0); 
    };

输出结果：

4 4 4

## 8、Javascript的基本数据类型 ##

undefined null number string boolen

## 9、console.log(8+ '9')输出什么？undefinde==null？ ##

console.log(8+'9') // '89'
    console.log(null == undefined ) // true

## 10、判断一个字符串中出现次数最多的字符，统计这个次数 ##

var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
      if(!json[str.charAt(i)]){
        json[str.charAt(i)] = 1;
      }else{
        json[str.charAt(i)]++;
      }
    };
    var iMax = 0;
    var iIndex = '';
    for(var i in json){
      if(json[i]>iMax){
        iMax = json[i];
        iIndex = i;
      }
    }        
    console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

## 11、JS 对象(Object)和字符串(String)互转方法 ##

// 字符串转化为 对象
    var jsonString = '[{"name":"天鸽"},{"name":"梅花"},{"name":"台风"}]';
    var jsArr = JSON.parse(jsonString);
    jsArr.push({"name":"帕卡"});
    console.log(jsArr);
    // 把js对象 数组 转化为 JSON格式的字符串 
    var result = JSON.stringify(jsArr); 
    console.log(result);

## 12、var boo = '11' + 2 - '1'输出什么 ##

var boo = '11' + 2 - '1'
    console.log(boo) // 111 
    console.log(typeof boo) // number

## 13、css中box-sizing可以设置哪些属性？ ##

*  content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
 *  border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
 *  inherit 规定应从父元素继承 box-sizing 属性的值

## 14、Javascript的事件流模型都有什么? ##

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

## 15、看下列代码,输出什么?解释原因。 ##

var a = null;
    alert(typeof a);

输出结果：object 解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

## 16、target、currentTarget的区别？ ##

currentTarget当前所绑定事件的元素

target当前被点击的元素

## 17、export和export default的区别？ ##

export default  xxx
    import xxx from './'
    
    export xxx
    import {xxx} from './'

## 18、请用代码写出(今天是星期 x)其中 x 表示当天是星期几,如果当天是星期一,输出应该是"今天是星期一" ##

var days = ['日','一','二','三','四','五','六'];
    var date = new Date();
    
    console.log('今天是星期' + days[date.getDay()]);

## 19、如何判断一个对象是否为数组 ##

如果浏览器支持 Array.isArray()可以直接判断否则需进行必要判断

function isArray(arg) {
      if (typeof arg === 'object') {
        return Object.prototype.toString.call(arg) === '[object Array]';
      }
      return false;
    }

## 20、forEach、for in、for of三者区别 ##

forEach更多的用来遍历数组
    for in 一般常用来遍历对象或json
    for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
    for in循环出的是key，for of循环出的是value

## 21、使用结构赋值，实现两个变量的值的交换 ##

let a = 1;
    let b = 2;
    [a,b] = [b,a];

# 感谢大家 #

*  爱心三连击 **「点赞，转发，在看」**，您的点赞，是我最大的动力
 *  关注公众号**「前端小喵」**，有更多好文推荐哦！
 *  阅读往期推荐好文

![format_png][]

●[从基础开始学起，http协议那些事][http]

●[不容错过！css阴影趣味用法大全～][css]

●[金九银十必看前端面试基础（一）][Link 1]

●[值得收藏的前端必备javascript，this指向详解～][javascript_this]

[format_png]: /images/20221123/2f91e1a33ac44fbeb59eb3ba5c827875.png
[http]: http://mp.weixin.qq.com/s?__biz=MzU2Nzk2MjQyMg%3D%3D&chksm=fc947cc0cbe3f5d6b2749d4ec819487a6cd28c20a4859529a7b9e1a3288a76706195de2a2427&idx=1&mid=2247484057&scene=21&sn=d3de5a61a4a6122d8559e923ef2d7921#wechat_redirect
[css]: http://mp.weixin.qq.com/s?__biz=MzU2Nzk2MjQyMg%3D%3D&chksm=fc947faccbe3f6ba40994393a42b25121be065c1bf214b1ab50df39eb158b518d890d2b9ec2f&idx=1&mid=2247483893&scene=21&sn=f51074012414082fdd82dfb21bc0b425#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU2Nzk2MjQyMg%3D%3D&chksm=fc947f3ccbe3f62a93edee368aba027e6a69677daa476fc68a3d01a93778740098e29f51b2b1&idx=1&mid=2247483749&scene=21&sn=f3e8dae6c0d508e21b2aeaa9458b1d9c#wechat_redirect
[javascript_this]: http://mp.weixin.qq.com/s?__biz=MzU2Nzk2MjQyMg%3D%3D&chksm=fc947c0ecbe3f5189cd02847d30e4d3911da650a5f16c736aa13ce27ea780c707e44c9f65464&idx=1&mid=2247483991&scene=21&sn=04f9d406315c5de0699f8691afa4ffe7#wechat_redirect