DD每周前端七题详解-第七期

时间 2020-07-09

标签每周前端详解第七繁體版

原文原文链接

系列介绍

你盼世界，我盼望你无bug。Hello 你们好！我是霖呆呆！css

呆呆每周都会分享七道前端题给你们，系列名称就是「DD每周七题」。前端

系列的形式主要是：3道JavaScript + 2道HTML + 2道CSS，帮助咱们你们一块儿巩固前端基础。git

全部题目也都会整合至 LinDaiDai/niubility-coding-js 的issues中，欢迎你们提供更好的解题思路，谢谢你们😁。github

一块儿来看看本周的七道题吧。web

1. 几种字符串转为数字的方法，有什么区别？

(题目来源：CavsZhouyou/Front-End-Interview-Notebook)数组

在JS中将字符串转换为数字的方式有不少种，如下我列举了一些经常使用的，看看非纯数字来进行转换会发生什么：浏览器

let str = '33.3c'
 console.log(Number(str));  console.log(parseInt(str));  console.log(parseFloat(str));  console.log(str++);  console.log(str>>>2); 复制代码

你们能够先思考一下再来看结果。app

let str = '33.3c'
 console.log(Number(str)); // NaN  console.log(parseInt(str)); // 33  console.log(parseFloat(str)); // 33.3  console.log(str++); // NaN  console.log(str>>>2); // 0 复制代码

嘻嘻😁，咱们来简单分析一下：编辑器

Number()方法会对传入的值进行强转换为数字，若是传入的字符串包含了非数字的话则被转为NaN函数
parseInt()方法会将传入的值转为整数，如果碰到非数字部分则终止

例如：
```
console.log(parseInt("33c3.3c")); // 33
复制代码
```
parseFloat()方法和parseInt()很像，不过它会保留小数，另外它在碰到非数字部分也会终止：
```
console.log(parseFloat("33c3.3c")); // 33
复制代码
```
++这种方式的话就是就会有一个隐式转换的过程，将字符串转换为数字，相似于Number()；
>>>无符号右移，>>是有符号右移，在这里呆呆认为str应该是会被先隐式转换为数字，而后再进行右移的，由于str被转为数字的结果是NaN，而NaN右移的结果是0：
```
str 转为数字是 NaN;
 NaN>>>2 的结果是 0; 复制代码
```

若是对隐式类型转换还不熟悉的小伙伴能够看呆呆的这篇文章哟：【精】从206个console.log()彻底弄懂数据类型转换的前世此生(下)

github.com/LinDaiDai/n…

2. 转换类数组的几种方式

「类数组概念」：

拥有length属性和若干索引属性的对象就被称为类数组，它和数组相似，可是不能调用数组的方法。

「常见类数组：」

DOM方法返回的批量的DOM集合， arguments，另外「函数」也能够被看为是类数组，由于它拥有length属性，length的值就是它可接收的参数的个数。

「转换为数组」：

先让咱们来定义一个类数组：

function test () {
 console.log(Array.isArray(arguments)) // false } test('霖', '呆', '呆') 复制代码

而后来看看能够有哪几种转换方法：

经过 call和数组的 slice方法：

[].slice.call(arguments)
 // 固然也能够是这样，由于slice是Array.prototype上的方法  Array.prototype.slice.call(arguments) 复制代码

经过 call和数组的 splice方法：

[].splice.call(arguments)
复制代码

经过 apply和数组的 concat方法：

[].concat.apply(arguments)
复制代码

经过 Array.from()：

Array.from(arguments)
复制代码

...展开操做符：

[...arguments]
复制代码

来写个简写吧：

slice + call
splice + call
concat + apply
Array.from
...

不过貌似这个不用特地去记，想一下数组有哪些方法能够用基本就能想起来了。

github.com/LinDaiDai/n…

3. 如何判断一个对象是否为空对象？

空对象？咳咳，就是这个：

let obj = {}
复制代码

for...in...

function isEmptyObj (obj) {
 for (i in obj) {  return false  }  return true; } console.log(isEmptyObj(obj)); // true 复制代码

不过这种方法貌似有一个弊端，由于for...in...是会把对象原型链上的属性也列举出来，例以下面这样就会判断错误：

function isEmptyObj (obj) {
 for (i in obj) {  return false  }  return true; } let obj = {}; obj.__proto__.num = 'dsfdf' console.log(isEmptyObj(obj)); // false 复制代码

JSON.stringify()

😂，这个是呆呆好久以前用的一种方法：

function isEmptyObj (obj) {
 return JSON.stringify(obj) === '{}'; } console.log(isEmptyObj(obj)); // true 复制代码

Object.keys()：

function isEmptyObj (obj) {
 return Object.keys(obj).length === 0; } console.log(isEmptyObj(obj)); // true 复制代码

github.com/LinDaiDai/n…

4. 如何让Chrome浏览器支持小于12px的字体大小？

使用：-webkit-transform: scale(0.8);

注意⚠️：「它修改的整个元素的大小，因此若是是内联元素的话则须要转换为块元素或者内联块元素」：

<style>  .font_size_12 {  font-size: 12px;  }  .font_size_small {  font-size: 12px;  display: inline-block;  font-size: 10px;  -webkit-transform: scale(0.8);  } </style> <body>  <div class="font_size_12">  霖呆呆  <span class="font_size_small">  小号霖呆呆  </span>  </div> </body> 复制代码

效果以下：

其它的方法，原来还有一个-webkit-text-size-adjust:none;属性，设置了整个以后就能够去掉Chrome的字体限制，可是在Chrome更新到27版本以后就被干掉了。呆呆在如今的Chrome中试了一下已经没有效果了。

另外，网上还有说把要缩小的字设置变为图片...靠图片来展现...

貌似都不太靠谱呀，有靠谱的小伙伴还但愿能够留言哦。

github.com/LinDaiDai/n…

5. font-style 属性中 italic 和 oblique 的区别？

(题目来源：font-style-属性中-italic-和-oblique-的区别)

italic和oblique这两个属性都表示"斜体"的意思。

区别在于：

italic是使用当前字体的斜体字体
oblique只是单纯地让文字倾斜
若是当前字体没有对应的斜体字体，则退而求其次，则会被当成 oblique处理，也就是单纯形状倾斜。

github.com/LinDaiDai/n…

6. 空元素(单标签)元素有哪些？

首先说一下「空元素」或者说是「单标签元素」是什么吧，其实就是「标签内没有内容的 HTML 标签」，例如：

<br />
<hr /> <input /> <img /> <link /> <meta> 复制代码

以上这些标签加不加 "/"均可以

github.com/LinDaiDai/n…

7. b与strong的区别以及i和em的区别？

首先描述一下这四个标签的显示效果吧：

被 和 包裹的文字会被加粗
被 和 包裹的文字会以斜体的方式呈现

HTML代码：

<b>霖呆呆</b>
<strong>霖呆呆</strong> <i>霖呆呆</i> <em>霖呆呆</em> 复制代码

效果以下：

咱再来讲说他们在语义上的区别吧。

标签和 标签都是 「天然样式标签」，都只是在样式上加粗和变斜，并无什么实际的意义。而且据了解，这两种标签在 HTML4.01中已经不被推荐使用了。
标签和 的话是 「语义样式标签」。就像是 <h1>、<h2>同样都有本身的语义。 表示通常的强调文本，而 表示更强的强调文本。另外在使用阅读设备的时候， 会重读(这点呆呆也没有实践过因此不太敢保证)。

github.com/LinDaiDai/n…

参考文章

知识无价，支持原创。

参考文章：

Front-End-Interview-Notebook

后语

你盼世界，我盼望你无bug。这篇文章就介绍到这里。

您每周也许会花48小时的时间在工做💻上，会花49小时的时间在睡觉😴上，也许还能够再花20分钟的时间在呆呆的7道题上，日积月累，我相信咱们都能见证彼此的成长😊。

什么？你问我为何系列的名字叫DD？由于呆呆呀，哈哈😄。

喜欢「霖呆呆」的小伙还但愿能够关注霖呆呆的公众号 LinDaiDai 或者扫一扫下面的二维码👇👇👇。

img

我会不定时的更新一些前端方面的知识内容以及本身的原创文章🎉

你的鼓励就是我持续创做的主要动力 😊。

往期题目能够戳下面👇：

或者你也能够查看github上的issues：「我是issues」

本文使用 mdnice 排版