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>同樣都有本身的語義。 表示通常的強調文本，而 表示更強的強調文本。另外在使用閱讀設備的時候， 會重讀(這點呆呆也沒有實踐過因此不太敢保證)。