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

语言: CN / TW / HK

系列介绍

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

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

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

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

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

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-的区别)

italicoblique这两个属性都表示"斜体"的意思。

区别在于:

  • 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 排版