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

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

正文

1.试完善以下代码，以解释JS引擎是如何查找一个对象obj的属性prop的（包含原型链上的属性）？

function getProperty(obj, prop) {
  // your code here
  //...
}

参考代码如下所示：

function getProperty(obj, prop) {
  if(obj.hasOwnProperty(prop)) {
    return obj[prop];
  } else if(obj._proto_ != null) {
    return getProperty(obj._proto_, prop);
  } else {
    return undefined;
  }
}

采用递归的方式寻找对象及其原型链上的相关属性，直到其原型为空。这里利用了递归、hasOwnProperty方法、_proto_属性和getProperty方法。

2.定义一个函数，以实现下列结果：

[1, 2, 3, 4, 5].duplicator(); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

参考代码如下所示：

// 方法1: concat
Array.prototype.duplicator = function() {
  return this.concat(this);
}

// 方法2: 遍历数组，依次插值
Array.prototype.duplicator = function() {
  var temp = this;
  this.forEach(function(item) {
    temp.push(item);
  });
  return temp;
}

由该函数的调用方式易知，该函数是定义在Array的原型上的。该函数的作用就是在数组末尾重复数组内的值。很容易想到concat方法，直接拼接该数组即可；方法2则是获取数组的所有值，然后按序在末尾添加。

3.如何确定标签内容的覆盖顺序？

有两种方式可以确定：

1. 根据z-index属性确定，z-index属性用来设置元素的堆叠顺序，拥有更高值的元素会处于较低值元素的前面
2. 根据CSS优先级确定，优先级更高的样式，其设置的堆叠属性会覆盖优先级低的样式

4.请写出验证中国手机号的正则表达式。

如下所示：

// reg1: 简略
var telReg1 = /^1\d{10}$/;

// reg2: 详细
var telReg2 = /^1([38]\d|4[579]|5[0-3,5-9]|66|7[0135678]|9[89])\d{8}$/;

第一个正则表达式比较简略，只需要匹配以1开头，后跟10个数字的字符串即可；第二个正则表达式则考虑了号段，相对来说详尽一些。

5.如何利用CSS绘制一个三角形？

代码如下所示：

/* HTML */
<div class="triangle"></div>

/* CSS */
.triangle {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #000;
  /* OR */
  /* border-top-color: #000; */

利用CSS绘制三角形主要就是利用元素的border属性。

6.如何将JS值转为JSON格式？如何将JSON字符串解析为JS值？

JSON.stringify()方法用来将一个JavaScript值转换为一个JSON字符串；JSON.parse()方法用来解析JSON字符集，构造由字符集描述的JavaScript值或对象。

7.如何将浏览器URL查询字符串转为一个对象，如http://jealyn.top?name=jealyn&age=23&gender=male的查询参数将转化为：

{
  name: 'jelayn',
  age: 23,
  gender: 'male'
}

参考代码如下所示：

function getQueries() {
  let args = window.location.href.split('?');
  let result = {};
  if(args[0] == window.location.href) {
    return result;
  }
  let items = args[1].split('&');
  items.forEach( item => {
    let arg = item.split('=');
    result[arg[0]] = arg[1];
  });
  return result;
}

URL的查询参数是指?后面的部分，每组参数以&分隔，其键与值之间通过=分隔，根据以上规则将URL进行分割获取即可。

8.为网站设置404页面有何用处？

404页面通常为用户访问了网站上不存在或已删除的页面。设置404页面既可以引导用户不要关闭网站，增强了用户体验；又防止了网站出现死链接，利于SEO与搜索引擎收录。

说明

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

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

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