前端经典面试题--实时更新

最新推荐文章于 2022-08-06 22:17:55 发布

suoh's Blog

最新推荐文章于 2022-08-06 22:17:55 发布

阅读量597

点赞数

分类专栏： ✿✿--前端面试题文章标签：前端面试题面试题经典面试题

本文链接：https://blog.csdn.net/qq_41579104/article/details/97023548

版权

✿✿--前端面试题专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、已知如下数组：
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组。
在这里插入图片描述
2、使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果

3、箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：
1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
4、不可以使用 new 命令，因为：
没有自己的 this，无法调用 call，apply。
没有 prototype 属性，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

4、实现模糊搜索结果的关键词高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>auto complete</title>
  <style>
    bdi {
      color: rgb(0, 136, 255);
    }

    li {
      list-style: none;
    }
  </style>
</head>
<body>
  <input class="inp" type="text">
  <section>
    <ul class="container"></ul>
  </section>
</body>
<script>

  function debounce(fn, timeout = 300) {
    let t;
    return (...args) => {
      if (t) {
        clearTimeout(t);
      }
      t = setTimeout(() => {
        fn.apply(fn, args);
      }, timeout);
    }
  }

  function memorize(fn) {
    const cache = new Map();
    return (name) => {
      if (!name) {
        container.innerHTML = '';
        return;
      }
      if (cache.get(name)) {
        container.innerHTML = cache.get(name);
        return;
      }
      const res = fn.call(fn, name).join('');
      cache.set(name, res);
      container.innerHTML = res;
    }
  }

  function handleInput(value) {
    const reg = new RegExp(`\(${value}\)`);
    const search = data.reduce((res, cur) => {
      if (reg.test(cur)) {
        const match = RegExp.$1;
        res.push(`<li>${cur.replace(match, '<bdi>$&</bdi>')}</li>`);
      }
      return res;
    }, []);
    return search;
  }
  
  const data = ["上海野生动物园", "上饶野生动物园", "北京巷子", "上海中心", "上海黄埔江", "迪士尼上海", "陆家嘴上海中心"]
  const container = document.querySelector('.container');
  const memorizeInput = memorize(handleInput);
  document.querySelector('.inp').addEventListener('input', debounce(e => {
    memorizeInput(e.target.value);
  }))
</script>
</html>

5、var、let 和 const 区别的实现原理是什么。

先说说这三者的区别吧：
（1）var 和 let 用以声明变量，const 用于声明只读的常量；

（2）var 声明的变量，不存在块级作用域，在全局范围内都有效，let 和 const 声明的，只在它所在的代码块内有效；

（3）let 和 const 不存在像 var 那样的 “变量提升” 现象，所以 var 定义变量可以先使用，后声明，而 let 和 const 只可先声明，后使用；

（4）let 声明的变量存在暂时性死区，即只要块级作用域中存在 let，那么它所声明的变量就绑定了这个区域，不再受外部的影响。

（5）let 不允许在相同作用域内，重复声明同一个变量；

（6）const 在声明时必须初始化赋值，一旦声明，其声明的值就不允许改变，更不允许重复声明；

6、打印出 1 - 10000 之间的所有对称数
在这里插入图片描述
7、Vue 的父组件和子组件生命周期钩子执行顺序是什么

（1）父组建： beforeCreate -> created -> beforeMount
（2）子组件： -> beforeCreate -> created -> beforeMount -> mounted
（3）父组件： -> mounted
（4）总结：从外到内，再从内到外

8、算法题「旋转数组」
给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。
在这里插入图片描述
9、call 和 apply 的区别是什么，哪个性能更好一些

Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同；
第一个参数都是，指定函数体内this的指向；
第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。
call比apply的性能要好，平常可以多用call, call传入参数的格式正是内部所需要的格式，参考call和apply的性能对比

10、分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见

11、两个数组合并成一个数组
在这里插入图片描述
12、移除数组arr中的所有值与item相等的元素，直接在给定的arr数组上进行操作，并将结果返回。输入[1,2,2,3,4,2,2]，去除2，输出1,3,4

13、includes 跟indexof 的区别
相同点：
作用都是查找一个值在不在数组里。
不同点：
includes 若值存在则返回true，反之返回false。而 indexOf 则返回下标。
两者使用的都是 === 操作符来做值的比较。但是includes()方法有一点不同，两个NaN被认为是相等的，即使在NaN === NaN结果是false的情况下。这一点和indexOf()的行为不同，indexOf()严格使用===判断。
应用场景
由于它对NaN的处理方式与indexOf不同，假如你只想知道某个值是否在数组中而并不关心它的索引位置，建议使用includes()。如果你想获取一个值在数组中的位置，那么你只能使用indexOf方法。
14、在数组arr的index处添加元素item，不要直接修改数组，结果返回新的数组
在这里插入图片描述
15、一个输入框一个按钮当输入框的值为1的时候按钮才能点击。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="txt">
<input type="button" disabled="disabled" value="注册" id="btn">

</body>
<script src="./lib/jquery-1.10.1.js"></script>

<script>
//jquery实现
//   $(function(){
//       $("#txt").blur(function(){
//         console.log($(this).val())
//         if($(this).val()==1){
//         $("#btn").attr("disabled",false);
//         }
//       })
//   })
//js实现-方法一
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");

txt.onblur = function(){
if(txt.value==1){
    btn.disabled = false;
}else{
    btn.disabled = true;
}
}
//js实现-方法二
// let flg = false
//     let tex = document.querySelector("#tex")
//        tex.onblur = function () {
//         flg = tex.value == 1
//         let btn = document.querySelector("#btn")
//          btn.disabled = !flg

//     }
</script>
</html>

suoh's Blog

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端经典面试题--实时更新

1、已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组。2、使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果3、箭头函数与普通函数（...
复制链接

扫一扫