阅读 241

前端面试题(一)2021-9-1

1、画一条0.5px的直线,请用CSS样式实现

width: 100px;
height: 1px;
transform:scaleY(0.5);
background-color: black;
复制代码

2、根据以下CSS属性判断div宽度为_100___px?

box-sizing: border-box;
width: 100px;
padding: 10px 20px;
margin: 10px 0 20px 30px;
border: 1px solid #fff;
复制代码

3、根据以下代码判断两个div上下之间的距离为_ 30___px?(填写数字)

.a{ margin-bottom: 30px; } .b{ margin-top: 20px; }
复制代码

4、body里声明font-size:62.5%时,1em等于__10__px?

16*62.5% = 10

5、请写出让元素垂直居中的多种布局方法

1、flex
2、absolute + margin:auto
3、absolute + calc
4、absolute + top + margin
5、absolute + transform
复制代码

详细请参考:juejin.cn/post/698686…

6、请简述cookie,localStorage,sessionStorage的区别

共同点:都是保存在浏览器端、且同源的 区别:

1、cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,而sessionStorage和localStorage不会自动把数据发送给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下

2、存储大小限制也不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大

3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭

4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的

5、web Storage支持事件通知机制,可以将数据更新的通知发送给监听者

6、web Storage的api接口使用更方便

7、写出以下HTTP状态对应的状态码

Not Found,用状态码__404__来表示。
Internal Server Error,用状态码_500___来表示。
OK 正常返回信息,用状态码_200___来表示。
复制代码

8、以下内容打印的内容为___ a+b=1020 ___?

let a = 10;
let b = 20;
console.log('a+b=' + a + b)
复制代码

9、如何阻止事件冒泡?

event.preventDefault()

10、(必答)用递归的方法实现1到100求和,请写出以上代码

function sum(num){
    if(num===1) return num
    return sum(num-1)+num
}
复制代码

11、(必答)请用多种方法实现数组去重

详细参考:juejin.cn/post/700478…

12、(必答)实现千分位表示金额,例如1002342.23 表示成1,002,342.23

function change(num){
    return num.toLocaleString()
}
复制代码

13、(必答)什么是防抖和节流?有什么区别?如何实现?

1.防抖:

高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间在触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)

2.节流:

高频率触发的事件,在指定的单位时间内,只响应第一次(前面触发的执行前,忽略后面的事件)

3.防抖和节流的使用场景

防抖(debounce)

1.search搜索联想,用户在不断输入值时,用防抖来节约请求资源。

2.window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

function debounce(fn, time) {
    // 创建一个标记用来存放定时器的返回值
    let timeout = null;
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout);
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 fn 函数
        timeout = setTimeout(() => {
            //arguments是传入的参数
            fn.apply(this, arguments);
        }, time);
    };
}
复制代码
节流(throttle)

1.鼠标不断点击触发,mousedown(单位时间内只触发一次)

2.监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断

function throttle(fn, time) {
  let canRun = true; // 通过闭包保存一个标记
  return function () {
    if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return
    canRun = false; // 立即设置为false
    setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
      fn.apply(this, arguments);
      // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false,在开头被return掉
      canRun = true;
    }, time);
  };
}
复制代码

14、(vue)请写出获取以下路由中的id的方法?并简述routerrouter和route的区别

$router

router是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等

$route

route是路由信息对象,里面主要包含路由的一些基本信息,包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom

this.$route.params.id

path: '/user/:id'
复制代码

15、(vue)DOM渲染在_Mounted___生命周期中完成,初始化数据在 __ Created__生命周期中完成?

16、(vue)VUE有哪些常用指令?如何自定义指令?

  1. v-model
  2. v-on
  3. v-bind
  4. v-show
  5. v-for
  6. v-if
  7. v-else
  8. v-text
  9. v-html
  10. v-once

自定义指令:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
复制代码
文章分类
前端
文章标签