前端基础练习题第24天 答案及解析

| ， | 阅读数 次
字数统计: 1.7k 字 | 阅读时长 ≈ 6 分钟

本篇文章是前端基础练习题第二十四天的答案及解析部分，纯题目部分请移步前端基础练习题 第24天

正文

1.js中如何检测一个变量是否为String类型？请写出函数实现。

如下方代码所示：

1
2
3
4
5
6
7
8
9
// 方法1 利用typeof操作符
function isString(obj) {
  return typeof obj === "string";
}

// 方法2 利用String包装函数 (用了ES6写法)
const isString = (obj) => {
  return String(obj) === obj;
}

2.请用js去除字符串的首尾空格。

方法有很多，此处提供原生trim函数和正则表达式两种方式：

1
2
3
4
5
6
7
8
9
// 方法1 利用trim函数
function myTrim(str) {
  return str.trim();
}

// 方法2 利用正则表达式 (用了ES6写法)
const myTrim = (str) => {
  return str.replace(/^\s*|\s*$/g, '');
}

3.如何理解闭包？

闭包就是能够读取其他函数内部变量的函数。并且只有内部函数访问了上层作用域链中的变量对象时，才会形成闭包，因此，我们可以利用闭包来访问函数内部的变量。

关于闭包的更多知识，可以参阅阮一峰的个人博客和这波能反杀的个人博客。


4.什么是跨域？跨域请求资源的方法有哪些？

跨域请求指的是请求协议、域名和端口中至少有一项不同的url的资源。常见的跨域请求有以下几种方法：

  • window.postMessage()方法，该方法是HTML5引入的API，即跨文档通信API，其允许跨窗口通信。
  • Proxy代理，该方法是服务器代理方法，即浏览器请求同源服务器，再由该服务器请求外部服务器，最后将结果返回给前端。
  • JSONP，该方法是向服务器请求一个脚本，并附带一个callback参数，服务器接收请求后，将JSON数据放在函数里面并返回。
  • WebSocket协议，服务器通过请求头信息中的Origin字段判断是否可通信。
  • CORS，CORS是跨源资源分享的意思，其是跨源AJAX的根本解决方法，CORS允许任何类型的请求。

5.$(this)和this关键字在jQuery中有何不同？

答案：$(this)是一个JQuery对象，代表的是用jQuery封装后的当前对象，其能调用jQuery的方法和属性；而this则是JavaScript对象，其能调用元素属性。一般情况下，$(this)[0] = this。


6.$(document).ready()方法和window.onload有什么区别？

答案：window.onload是在网页中所有的元素完全加载完毕后才执行，而$(document).ready()方法可以在DOM载入就绪时就对其进行操作，而不必等到加载完成。并且$(document).ready()方法可以编写和执行多个。


7.行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

如下所示：

  • 行内元素指的是其默认display属性值为inline，且对其设置宽高、内外边距等属性都无效的元素。如span、a、em、button、label、select等。
  • 块级元素指的是其默认display属性值为block，且独占一行的元素。如div、p、li、h1、footer、blockquote、table等。
  • 空元素又称自闭合元素，如br、meta、hr、link、input、img等。

8.CSS实现垂直水平居中的方案有哪些？

这里给出6种解决方案：

  • position + margin。对父元素相对定位，子元素绝对定位，并将子元素的上、右margin值设置为其宽、高的一半的负值。此情况适用于已知元素宽高。
  • 绝对定位。对父元素相对定位，子元素绝对定位，并将top、left、right、bottom的值都设置为0，以及设置margin值为auto即可。此情况适用于已知元素宽高。
  • position + transform。对父元素相对定位，子元素绝对定位，并设置transform: translate(-50%,-50%);即可。此情况适用于未知元素宽高。
  • table-cell布局。对元素设置display: table-cell;和vertical-align: middle;即可。此情况适用于未知元素宽高。
  • flex布局。将父元素设置为flex布局且添加justify-content: center;和align-items: center;属性即可。此情况适用于未知元素宽高。
  • grid布局。将父元素设置为grid布局且对子元素添加justify-self: center;和align-self: center;属性即可。此情况适用于未知元素宽高。

9.浏览器的内核分别是什么？

如下所示：

  • Trident内核，IE6-IE10以及360极速浏览器等使用。
  • Gecko内核，Firefox浏览器使用。
  • WebKit内核，Safari、搜狗、360等浏览器使用。
  • Blink内核，谷歌28以后的版本和Opera15以后的版本中进行使用。
  • Presto内核，Opera15之前的版本中进行使用。

10.sessionStorage、localStorage和cookie之间的区别是什么？

它们都是保存在浏览器且同源，但也有以下几点区别：

  • 数据有限期不同。sessionStorage仅在当前浏览器会话期有效，localStorage永久有效，cookie在设置的过期时间之前有效。
  • 作用方式不同。cookie数据始终在http请求中携带，而sessionStorage和localStorage仅在本地保存。
  • 存储大小限制不同。cookie数据不能超过4KB，而sessionStorage和localStorage可以达到5MB或更大。
  • 作用域不同。sessionStorage不在不同的浏览器窗口中共享，而cookie和localStorage在所有同源窗口中都是共享的。

11.请说出三种减低页面加载时间的方法。

减低页面加载时间总体上来说是围绕着如何减少HTTP请求和如何减少资源体积来展开，以下给出几条具体措施：

  • 合理设置HTTP缓存。恰当的缓存设置可以大大的减少HTTP请求，可以将HTTP Header中的Expires设置一个很长的过期时间。
  • 资源合并。将多个CSS文件、JS文件等合并为一个文件，也可以将图片进行合并（CSS Sprites），可以减少HTTP请求次数。
  • 将外部脚本置底。即将脚本内容在页面信息内容加载后再加载，以规避浏览器的阻塞效应。
  • 异步加载第三方资源。对于脚本文件，可进行异步加载和请求。
  • 压缩资源。如开启GZip压缩、压缩CSS文件、压缩图片资源等，以减少资源体积。
  • 使用CDN来进行对图片、视频、外部脚本等静态资源的缓存，加快网站的加载速度。
  • 图片懒加载。当图片到达视口范围时，再进行图片的加载。

说明

  1. 题目中出现的JS指的是采用ECMAScript 2015及之后标准的JavaScript

  2. 答案中，若有错误和需完善的地方，可在下方留言反馈哈~~

  3. 查看纯习题版，请点击前端基础练习题 第24天

--本文结束 感谢阅读--
创作十分不易，原创更应鼓励