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