系列介绍
你盼世界,我盼望你无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()完全弄懂数据类型转换的前世今生(下)
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
...
不过貌似这个不用特意去记,想一下数组有哪些方法可以用基本就能想起来了。
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
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
中试了一下已经没有效果了。
另外,网上还有说把要缩小的字设置变为图片...靠图片来展示...
貌似都不太靠谱呀,有靠谱的小伙伴还希望可以留言哦。
5. font-style 属性中 italic 和 oblique 的区别?
(题目来源:font-style-属性中-italic-和-oblique-的区别)
italic
和oblique
这两个属性都表示"斜体"
的意思。
区别在于:
italic
是使用当前字体的斜体字体oblique
只是单纯地让文字倾斜- 如果当前字体没有对应的斜体字体,则退而求其次,则会被当成
oblique
处理,也就是单纯形状倾斜。
6. 空元素(单标签)元素有哪些?
首先说一下「空元素」或者说是「单标签元素」是什么吧,其实就是「标签内没有内容的 HTML 标签」,例如:
<br />
<hr />
<input />
<img />
<link />
<meta>
- 以上这些标签加不加
"/"
都可以
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>
会重读(这点呆呆也没有实践过所以不太敢保证)。
参考文章
知识无价,支持原创。
参考文章:
后语
你盼世界,我盼望你无bug
。这篇文章就介绍到这里。
您每周也许会花48
小时的时间在工作💻上,会花49
小时的时间在睡觉😴上,也许还可以再花20
分钟的时间在呆呆的7道题上,日积月累,我相信我们都能见证彼此的成长😊。
什么?你问我为什么系列的名字叫DD
?因为呆呆
呀,哈哈😄。
喜欢「霖呆呆」的小伙还希望可以关注霖呆呆的公众号 LinDaiDai
或者扫一扫下面的二维码👇👇👇。
img
我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉
你的鼓励就是我持续创作的主要动力 😊。
往期题目可以戳下面👇:
或者你也可以查看github上的issues
:「我是issues」
本文使用 mdnice 排版