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

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

正文

1.如何从new Date()返回的数据中提取出日期，并转换为YYYY-MM-DD的格式？

参考代码如下所示：

// 方式1，利用正则表达式
new Date().toLocaleDateString().replace(/\/(\d)(?!\d)/g, '-0$1').replace(/\//g, '-');

// 方式2，利用toISOString和substr
new Date().toISOString().substr(0, 10);

// 方式3，利用toJSON和substr
new Date().toJSON().substr(0, 10);

当然了，最传统的方法还是写一个format函数，根据传入的格式进行转换。具体可参考标准时间格式化。

2.如何从new Date()返回的数据中提取出时间，并转换为hh:mm:ss的格式？

参考代码如下所示：

// 方式1，利用toTimeString
new Date().toTimeString().split(" ")[0];

// 方式2，利用toLocaleTimeString和正则替换
new Date().toLocaleTimeString().replace(/下午(\d+)/g, ($0, $1) => 12 + Number($1));

// 方式3，利用toString
new Date().toString().split(" ")[4];

同理，本题也可以写一个format函数，将传入的时间值转换为指定的格式。具体可参考时间格式转换。

3.js如何获取当前时间的时间戳？

在js中有如下几种方式获取时间戳

• Date.now()，ES6新增API，直接获取当前时间的时间戳
• new Date().getTime()
• Date.parse(new Date())
• new Date().valueOf()

常用的方式是第一种和第三种。不过第一种方式只能获取当前时间的时间戳而不能传入指定的时间日期，第三种方式则可以获取指定日期时间的时间戳。

4.js如何将时间戳转换为日期时间格式？

通过将时间戳传入Date的构造函数里，即 new Date(timeStamp)即可得到该timeStamp所对应的日期时间。

将时间戳转换为标准日期时间后，亦可进行一些格式化操作，如题目1和题目2所示。

5.如何对数组中的对象进行去重，并返回一个无重复对象的数组？试完善arrayUnique函数，如下所示

let arr = [
  { id: 1, name: 'Jealyn' },
  { id: 1, name: 'Jinlin' },
  { id: 2, name: 'Jealyn' },
  { id: 2, name: 'Jinlin' }
];
arrayUnique(arr, 'id'); // [{ id: 1, name: 'Jealyn' }, { id: 2, name: 'Jealyn' }]

参考代码如下所示：

function arrayUnique(arr, name) {
  let hash = {};
  return arr.reduce((item, next) => {
    hash[next[name]] ? '' : hash[next[name]] = true && item.push(next);
    return item;
  }, []);
}

该函数根据指定的键值(name)对数组中的对象进行去重，去除对象数组中后出现的name属性值相同的元素。对数组的循环上，采用的是reduce方法进行迭代。

6.js如何按照指定的长度为数字前面补0？

参考代码如下所示：

const fixCount = (str, count = 0) => {
  return ('0'.repeat(count) + str).slice(-count);
}

这段程序主要利用了repeat函数和slice函数。repeat函数将'0'重复指定次数，再拼接上该数字，然后从这一段字符串的-count位开始取值，取count位即可。

7.jQuery如何实现缓慢回到顶部的功能(即为回到顶部添加动画功能)？

参考代码如下所示：

$("#scrollTop").click(function() {
  $("html,body").animate({
    scrollTop: 0
  }, 500);
});

既然是缓慢回到顶部，实则就是考查对animate函数的应用以及scrollTop属性的明确。

说明

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

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

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