前端进阶第8-9周打卡题目汇总

徐小夕

发布于 2020-02-12 11:49:41

5960

发布于 2020-02-12 11:49:41

文章被收录于专栏：趣谈前端趣谈前端

前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.

第八周

星期一

1. 写一个js函数，可以生成n*n维矩阵坐标

[参考答案]

/**
 * 创建n维矩阵坐标
 * @param {number} n 维数,如1,2,3,4
 * @param {number} w 单位坐标尺寸, 如1, 100, 200等
 */
function createNSPACE(n, w) {
  let pos = []
  for(let i=0; i< n; i++) {
    for(let j=0; j < n; j++) {
      pos.push([j*w, i*w])
    }
  }
  return pos
}

// 使用
createNSPACE(2, 100)   // => [[0, 0], [100, 0], [0, 100], [100, 100]]

2. 用css3的animation的steps属性实现一个关键帧动画

[参考答案]

<style>
 .loading-word {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   background-color: #000;
 }
 .loading-word .word {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   font-size: 40px;
 }
 .loading-word .word::before {
  content: 'loading...';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  font-size: 12px;
  color: #ccc;
  animation: steps steps(4, start) infinite 4s;
 }

 @keyframes steps {
   0% {
     transform: translateX(0);
   }
   100% {
     transform: translateX(100%);
   }
 }
</style>

<div class="loading-word">
  <div class="word">趣谈前端</div>
</div>

星期二

1. em,rem,px的区别，并简单介绍？

[参考答案]

px像素, 相对长度单位。是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸

比如说当前容器font-size:16px;则1em就等于16px;

rem 是CSS3新增的一个相对单位（相对于根元素的）,比如浏览器的默认字体是16px，那么1rem=16px以此类推计算12px=0.75rem，10px=0.625rem，2rem=32px；

2. HTML5本地存储有哪些方式？说说他们的异同点？

[参考答案]

本地存储方式: cookie, sessionstorage, localstorage
相同点: 都保存在浏览器端, 且都受同源策略影响
不同点:

（1）cookie数据始终在同源的http请求头中携带，cookie在浏览器和服务器之间来回传递，cookie可以限制保存在某个路径下，sessionstorage和localstorage不会自动把数据发送给服务器，仅在本地保存。cookie是浏览器和服务器之间传递数据的媒介。（2）存储大小不同 cookie数据存储为4k，sessionstorage和localstorage一般在5-10M。（3）数据存活周期不同，sessionstorage仅在当前浏览器关闭前有效，localstorage始终有效，cookie仅在设置的过期时间前有效。（4）作用域不同：sessionstorage只作用于当前浏览器窗口，localstorage和cookie在同源窗口中可以共享

星期四

1. 下面的代码输出什么?

var a = 1;
if (function f(){}) {
    a += typeof f;
}
console.log(a)

[参考答案] 打印值为: 1undefined.

分析: JavaScript中if语句求值使用的是eval函数，eval(function f(){}) 返回 function f(){} 也就是 true。eval只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回.那么此时在if条件体内部其实没有f这个变量,所以返回undefined

2. 用js实现一个判断任何数据类型的函数(包括基本类型,引用类型, map, set, symbol)

[参考答案]

function checkType(target){
  return Object.prototype.toString.call(target).slice(8,-1)
}

周末福利打卡

如何优化SPA应用的首屏加载速度慢的问题？

[参考答案]

代码压缩(gzip)
外部文件按需引入
代码分割(code splitting)
路由组件懒加载
图片懒加载
骨架屏
ssr技术的应用
雪碧图
静态资源走CDN,做好缓存策略
Tree Shaking,做好无用代码的清理

第九周

星期一

1. css中visiblity:hidden和display:none的区别

[参考答案]

是否是继承属性：display不是继承属性，visibility是继承属性，后代元素的visibility属性若存在则不继承，若不存在则继承父元素visibility的值，意味着：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见，子元素visibility不存在则子元素不可见。而元素的display属性设为none其后整棵子树都不可见。
是否占据空间：使用display:none，在文档渲染时，该元素不会渲染（但依然存在文档对象模型树中）；而使用visibility :hidden，其占的空间会被空白占位。即display:none不会在渲染树中出现，visibility :hidden会。
属性改变后是否重新渲染：visibility:hidden不渲染；display:none渲染
是否有transition和animation动画: visibility:hidden有动画,有过渡, display:none没有

2.简单介绍一下vue2.0+版本的组件生命周期及其执行顺序，并说说组件之间通信的几种方式？

[参考答案]

1. 生命周期总结 beforecreate : 可以在这加个loading事件 created ：在这结束loading，做一些初始化，实现函数自执行 mounted ：发起api请求，获取后端数据，配合路由钩子做一些任务 beforeDestory：组件销毁前的操作 destoryed ：组件已被删除后的操作

2.Vue组件间通信的几种方式

props/$emit(比如父组件向子组件传值(父组件通过props向下传递数据给子组件))
emit/emit/on(通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级)
vuex
attrs/attrs/listeners
provide/inject
parent /parent/children与 ref

星期三

1. 写一个方式,实现将rgb颜色转化为hex表示法,如 rgb(255, 255, 255) 转为 #ffffff?

[参考答案]

function rgb2hex(sRGB) {
    let res = [];
    let reg = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/g
    if ( !reg.test(sRGB)){
        return sRGB;
    }
    else {
        let reg2 = /(\d+)/g;
        sRGB.replace(reg2,function ($0) {
           res.push(('0'+(+$0).toString(16)).slice(-2));
        });
    }
    return '#'+res.join('');
}

2. 用js实现将字符串转换为驼峰形式？

[参考答案]

function string2Camle(sName) {
	let reg = /(\w)?-+(.)?/g
  return sName.replace(reg, function (word,s1,s2) {
    console.log(word,s1,s2)
      if(!s1) {
        return s2
      }else {
        return s2 ? (s1 + s2.toUpperCase()): (s1 + '');
      }
  })
}

星期四

1. 怎样理解 Vue 的单向数据流？

Vue的单向数据流指的是父子之间的props始终是从父级向下流动到子组件中，但反过来则不行。这样会防止子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解和维护。其次，每次父级组件发生更新时，子组件中所有的prop都将会更新为最新值, 这意味着我们不应该在子组件内部改变 prop。如果我们这样做，Vue会在浏览器的控制台中发出警告。子组件想修改prop，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

2. vue中computed和watch的区别和运用的场景？

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 watch：更多的是「观察」的作用，类似于数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许我们执行异步操作(访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

周末福利打卡

1. 谈谈你对vue中 keep-alive 的理解？

[参考答案]

keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，比如从页面a跳转到其他页面后再返回页面a时,不用重新执行页面a的代码，而是从缓存中加载已经缓存的页面a，这样可以减少加载时间及性能消耗，提高用户体验性。如果需要频繁切换路由，我们就可以考虑用keep-alive，来达到避免数据的重复请求的目的。

<keep-alive>
  <router-view> </router-view>
</keep-alive>

其次我们也可以配合router.meta在路由中配置,实现更加自定义的路由缓存.

2. 用js写一个方法,实现数组的二分查找(比如arr = [1,2,3,4,7,6], 我们查找4的位置)

[参考答案]

function binary_search(arr, key) {
  var min = 0,
      max = arr.length - 1;
  while(min <= max){
    var mid = parseInt((max + min) / 2);
    if(key == arr[mid]){
      return mid;
    }else if(key > arr[mid]){
      min = mid + 1;
    }else if(key < arr[mid]){
      max = mid -1;
    }
  }
  return -1;
}

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全