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

最新推荐文章于 2022-01-26 17:10:00 发布

LinDaiDai_霖呆呆

最新推荐文章于 2022-01-26 17:10:00 发布

阅读量300

点赞数

文章标签： js html css javascript 编程语言

本文链接：https://blog.csdn.net/qq_39448719/article/details/107218813

版权

系列介绍

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

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

系列的形式主要是：3道JavaScript + 2道HTML + 2道CSS，帮助我们大家一起巩固前端基础。

所有题目也都会整合至 LinDaiDai/niubility-coding-js 的issues中，欢迎大家提供更好的解题思路，谢谢大家????。

一起来看看本周的七道题吧。

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);

大家可以先思考一下再来看结果。

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/niubility-coding-js/issues/44

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/niubility-coding-js/issues/45

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/niubility-coding-js/issues/46

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/niubility-coding-js/issues/47

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

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

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

区别在于：

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

github.com/LinDaiDai/niubility-coding-js/issues/48

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

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

<br />
<hr />
<input />
<img />
<link />
<meta>

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

github.com/LinDaiDai/niubility-coding-js/issues/49

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

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

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

HTML代码：

<b>霖呆呆</b>
<strong>霖呆呆</strong>
<i>霖呆呆</i>
<em>霖呆呆</em>

效果如下：

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

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