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

LinDaiDai_霖呆呆
3,952 阅读7分钟

系列介绍

你盼世界，我盼望你无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/n…

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

「类数组概念」：

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

「常见类数组：」

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

「转换为数组」：

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

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

然后来看看可以有哪几种转换方法：

  1. 通过call和数组的slice方法：
[].slice.call(arguments)

// 当然也可以是这样，因为slice是Array.prototype上的方法

Array.prototype.slice.call(arguments)
  1. 通过call和数组的splice方法：
[].splice.call(arguments)
  1. 通过apply和数组的concat方法：
[].concat.apply(arguments)
  1. 通过Array.from()：
Array.from(arguments)
  1. ...展开操作符：
[...arguments]

来写个简写吧：

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

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

github.com/LinDaiDai/n…

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

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

let obj = {}
  1. 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
  1. JSON.stringify()

😂，这个是呆呆很久之前用的一种方法：

function isEmptyObj (obj) {
  return JSON.stringify(obj) === '{}';
}
console.log(isEmptyObj(obj)); // true
  1. 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的区别？

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

  • 被<b>和<strong>包裹的文字会被加粗
  • 被<i>和<em>包裹的文字会以斜体的方式呈现

HTML代码：

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

效果如下：

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

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

github.com/LinDaiDai/n…

参考文章

知识无价，支持原创。

参考文章：

后语

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

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

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

喜欢「霖呆呆」的小伙还希望可以关注霖呆呆的公众号 LinDaiDai 或者扫一扫下面的二维码👇👇👇。

imgimg

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

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

往期题目可以戳下面👇：

或者你也可以查看github上的issues：「我是issues」

本文使用 mdnice 排版

avatar
文章
阅读
粉丝