每天10道，前端面试题目【1】

最新推荐文章于 2024-08-25 13:39:45 发布

在土里养鱼

最新推荐文章于 2024-08-25 13:39:45 发布

阅读量133

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43857786/article/details/114026559

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

有些面试题目的答案太牛皮了，所以想记录下来！

题1、

已知如下数组：
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组

作者：木易杨说
链接：https://juejin.cn/post/6844903885488783374
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

答案：

Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})

在这里插入图片描述
个人解读：
Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
new set()函数，es6的操作数组函数
Array.flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
//使用 Infinity 作为深度，展开任意深度的嵌套数组
Array.flat(Infinity);
Array.sort()，将数组进行排序

题2、

如何实现一个 new

答案：

function _new(fn, ...arg) {
    const obj = Object.create(fn.prototype);
    const ret = fn.apply(obj, arg);
    return ret instanceof Object ? ret : obj;
}

题3、

谈谈你对 TCP 三次握手和四次挥手的理解

答案：
TCP三次握手：1、客户端发送syn包到服务器，等待服务器确认接收。2、服务器确认接收syn包并确认客户的syn，并发送回来一个syn+ack的包给客户端。3、客户端确认接收服务器的syn+ack包，并向服务器发送确认包ack，二者相互建立联系后，完成tcp三次握手。
在这里插入图片描述
等待2MSL时间

题4、

有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣

答案：

Object.prototype.toString.call()
每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。

const an = [‘Hello’,‘An’];
an.toString(); // “Hello,An”
Object.prototype.toString.call(an); // “[object Array]”
这种方法对于所有基本的数据类型都能进行判断，即使是 null 和 undefined 。

Object.prototype.toString.call('An') // "[object String]"
Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(function(){}) // "[object Function]"
Object.prototype.toString.call({name: 'An'}) // "[object Object]"
Object.prototype.toString.call() 常用于判断浏览器内置对象时。

instanceof
instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。

使用 instanceof判断一个对象是否为数组，instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。

[] instanceof Array; // true
但 instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true。

[] instanceof Object; // true

Array.isArray()
功能：用来判断对象是否为数组

instanceof 与 isArray

当检测Array实例时，Array.isArray 优于 instanceof ，因为 Array.isArray 可以检测出 iframes

Array.isArray() 与 Object.prototype.toString.call()

Array.isArray()是ES5新增的方法，当不存在 Array.isArray() ，可以用 Object.prototype.toString.call() 实现。

题5、

关于 const 和 let 声明的变量不在 window 上

答案：
ES6规定，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性，但 let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

let aa = 1;
const bb = 2;

console.log(window.aa); // undefined
console.log(window.bb); // undefined

题6、

cookie 和 token 都存放在 header 中，为什么不会劫持 token？

答案：
1攻击者通过xss拿到用户的cookie然后就可以伪造cookie了。
2或者通过csrf在同个浏览器下面通过浏览器会自动带上cookie的特性
在通过用户网站-攻击者网站-攻击者请求用户网站的方式浏览器会自动带上cookie
但是token
1 不会被浏览器带上问题2 解决
2 token是放在jwt里面下发给客户端的而且不一定存储在哪里不能通过document.cookie直接拿到，通过jwt+ip的方式可以防止被劫持即使被劫持也是无效的jwt

题7、

聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

答案：
底层就是defineProperty get是读取之前的旧数据，set中如果发现数据没改直接return 原始值，如果改了就直接修改为NewValue
这个是一个简单的demo

<body>
    <div id="app">
        <input type="text" id="model"><br />
        <div id="modelText"></div>
    </div>
    <script>
        var model = document.querySelector("#model");
        var modelText = document.querySelector("#modelText");
        var defaultName = "defaultName";
        var userInfo = {}
        model.value = defaultName;
        Object.defineProperty(userInfo, "name", {
            get: function () {
                return defaultName;
            },
            set: function (value) {
                defaultName = value;
                model.value = value;
                console.log(value);
                modelText.textContent = value;
            }
        })

        userInfo.name = "new value";
        var isEnd = true;

        model.addEventListener("keyup", function () {
            if (isEnd) {
                userInfo.name = this.value;
            }
        }, false)
        //加入监听中文输入事件
        model.addEventListener("compositionstart", function () {
            console.log("开始输入中文");
            isEnd = false;
        })
        model.addEventListener("compositionend", function () {
            isEnd = true;
            console.log("结束输入中文");
        })
    </script>
</body>

题8、

改造下面的代码，使之输出0 - 9，写出你能想到的所有解法。

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

答案：

解法一：
for (var i = 0; i< 10; i++){
   setTimeout((i) => {
   console.log(i);
   }, 1000,i)
}
解法二：
for (let i = 0; i< 10; i++){
  setTimeout(() => {
    console.log(i);
  }, 1000)
}
解法三：
for (var i = 0; i< 10; i++){
  ((i) => {
    setTimeout(() => {
      console.log(i);
    }, 1000)
 })(i)
}

题9、

下面代码中 a 在什么情况下会打印 1？

var a = ?;
if(a == 1 && a == 2 && a == 3){
 	console.log(1);
}

答案：

答案解析 因为==会进行隐式类型转换 所以我们重写toString方法就可以了

var a = {
  i: 1,
  toString() {
    return a.i++;
  }
}

if( a == 1 && a == 2 && a == 3 ) {
  console.log(1);
}