DD每週前端七題詳解-第三期

系列介紹

你盼世界，我盼望你無bug。Hello 你們好！我是霖呆呆！

呆呆每週都會分享七道前端題給你們，系列名稱就是「DD每週七題」。

系列的形式主要是：3道JavaScript + 2道HTML + 2道CSS，幫助咱們你們一塊兒鞏固前端基礎。

全部題目也都會整合至 LinDaiDai/niubility-coding-js 的issues中，歡迎你們提供更好的解題思路，謝謝你們😁。

一塊兒來看看本週的七道題吧。

正題

1、使用delete刪除數組元素，其長度會改變嗎？

(題目來源：github.com/haizlin/fe-…)

咱來寫個案例🌰看看就知道了：

var arr = [1, 2, 3]
delete arr[1] console.log(arr) console.log(arr.length) 複製代碼

結果以下：

經過結果，咱們能夠得出結論：「使用delete刪除數組元素，其長度是不會改變的。」

關於這一點，你們能夠把數組理解爲是一個特殊的對象，其中的每一項轉換爲對象的僞代碼爲：

key: value
// 對應: 0: 1 1: 2 2: 3 length: 3 複製代碼

因此咱們使用delete操做符刪除一個數組元素時，至關於移除了數組中的一個屬性，被刪除的元素已經再也不屬於該數組。可是這種改變並不會影響數組的length屬性。

「擴展：」

• 若是你想讓一個數組元素繼續存在可是其值是 undefined，那麼可使用將 undefined 賦值給這個元素而不是使用 delete。例如： arr[1] = undefined
• 若是你想經過改變數組的內容來移除一個數組元素，請使用 splice() 方法。例如： arr.splice(1, 1)

github.com/LinDaiDai/n…

2、建立一個函數batches返回能烹飪出面包的最大值

(題目來源：github.com/30-seconds/…)

/** batches函數接收兩個參數： 1. recipe 製做一個麪包須要的各個材料的值 2. available 現有的各個材料的值 要求傳入 recipe 和 available，而後根據二者計算出可以烹飪出面包的最大值 **/  // 0個麪包，由於 butter黃油須要50ml，可是如今只有48ml batches(  { milk: 100, butter: 50, flour: 5 },  { milk: 132, butter: 48, flour: 51 } ) batches(  { milk: 100, butter: 4, flour: 10 },  { milk: 1288, butter: 9, flour: 95 } )  // 1個麪包 batches(  { milk: 100, butter: 50, flour: 10 },  { milk: 198, butter: 52, flour: 10 } )  // 2個麪包 batches(  { milk: 2, butter: 40, flour: 20 },  { milk: 5, butter: 120, flour: 500 } ) 複製代碼

這道題的解題思路其實就是比較recipe和available兩個對象的每個屬性值，用後者的屬性值除之前者的屬性值，而後獲得一個數，例如0個麪包中的：

• available.milk / recipe.milk，獲得 1.32；
• available.butter / recipe.butter，獲得 0.96
• available.flour / recipe.flour，獲得 10.2

而後取三個結果中的最小值0.96，再向下取整，得出最終能製做的麪包個數爲0。

因此咱們能夠得出第一種解題方法：

const batches = (recipe, available) =>
 Math.floor(  Math.min(...Object.keys(recipe).map(k => available[k] / recipe[k] || 0))  ) 複製代碼

過程分析：

• Object.keys(recipe)，迭代 recipe對象，獲得全部的 key： ['milk', 'butter', 'flour']
• 以後使用 map遍歷剛剛全部的 key，並返回 available[k]/recipe[k]的值： [1.32, 0.96, 10.2]
• 須要得出上面一步數組中的最小值，因此可使用 Math.min(...arr)方法來獲取
• 最後將最小值 0.96向下取整獲得 0。

固然這道題你也可使用Object.entries()，效果是同樣的：

const batches = (recipe, available) =>
 Math.floor(  // Math.min(...Object.keys(recipe).map(k => available[k] / recipe[k] || 0))  Math.min(...Object.entries(recipe).map(([k, v]) => available[k] / v || 0))  ) 複製代碼

github.com/LinDaiDai/n…

3、typeof typeof 0 的結果？

(題目來源：github.com/30-seconds/…)

這道題其實不難，最終結果是"string"。

過程分析：

• typeof 0的結果爲 "number"，是個字符串
• 因此 typeof "number"的結果是 "string"

github.com/LinDaiDai/n…

4、target="_blank"有哪些問題？

「存在問題：」

1. 安全隱患：新打開的窗口能夠經過 window.opener獲取到來源頁面的 window對象即便跨域也能夠。某些屬性的訪問被攔截，是由於跨域安全策略的限制。 可是，好比修改 window.opener.location的值，指向另一個地址，這樣新窗口有可能會把原來的網頁地址改了並進行頁面假裝來欺騙用戶。
2. 新打開的窗口與原頁面窗口共用一個進程，如果新頁面有性能很差的代碼也會影響原頁面

「解決方案：」

1. 儘可能不用target="_blank"

2. 若是必定要用，須要加上rel="noopener"或者rel="noreferrer"。這樣新窗口的window.openner就是null了，並且會讓新窗口運行在獨立的進程裏，不會拖累原來頁面的進程。(不過，有些瀏覽器對性能作了優化，即便不加這個屬性，新窗口也會在獨立進程打開。不過爲了安全考慮，仍是加上吧。)

（參考來源：慎用target="_blank"）

github.com/LinDaiDai/n…

5、children以及childNodes的區別

• children和只獲取該節點下的全部 element節點
• childNodes不只僅獲取 element節點還會獲取元素標籤中的空白節點
• firstElementChild只獲取該節點下的第一個 element節點
• firstChild會獲取空白節點

github.com/LinDaiDai/n…

6、float:left對比position:absolute

相同點：

• 脫離文檔流，也就是將元素從普通的佈局排版中拿走，其餘盒子在定位的時候，會當作脫離文檔流的元素不存在而進行定位。
• 包裹性：也就是都會讓元素 inline-block化。等同於沒有高度與寬度的 inline-block元素。

  • 對於塊狀元素默認的寬度爲 100%，若設置爲了絕對定位則寬度由內容決定
  • 對於內聯元素本來設置 width屬性無效，若設置了浮動則能夠設置 width值
• 破壞性：都會致使父級高度塌陷。但如果設置了絕對定位的話，其父級即便設置爲 float:left;也仍是不能解決高度塌陷的問題。

不一樣點：

• 雖然它們都會脫離文檔流，可是使用 float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。而對於使用 position:absolute脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。

github.com/LinDaiDai/n…

7、float:left對比inline-block

• 「文檔流」：浮動會脫離文檔流，且使得被覆蓋的元素的文字內容會環繞在周圍；而 inline-block不會脫離文檔流也就不會覆蓋其它元素。浮動也會引起父級高度塌陷問題。
• 「水平位置」：不能給有浮動元素的父級設置 text-align:center使得子集浮動元素居中，而 inline-block卻能夠。
• 「垂直對齊」： inline-block元素沿着默認的基線對齊( baseline)，如果兩個元素的 font-size不一樣則可能會看到一高一低，你能夠經過設置 vertical-align: top或者bottom;來使得它們基於頂線或者底線對齊(注意這個是設置到元素自己而不是設置到它們的父級)。而浮動元素緊貼頂部，不會有這個問題。
• 「空白」： inline-block包含 html空白節點。若是你的 html中一系列元素每一個元素之間都換行了，當你對這些元素設置 inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼。

針對第三點，垂直對齊能夠看下面👇這個案例：

默認狀況下：

css代碼爲：

.sub {
 background: hotpink;  display: inline-block; } 複製代碼

設置了vertial-align: top;後：

css代碼爲：

.sub {
 background: hotpink;  display: inline-block;  vertical-align: top; } 複製代碼

github.com/LinDaiDai/n…

後語

你盼世界，我盼望你無bug。這篇文章就介紹到這裏。

您每週也許會花48小時的時間在工做💻上，會花49小時的時間在睡覺😴上，也許還能夠再花20分鐘的時間在呆呆的7道題上，日積月累，我相信咱們都能見證彼此的成長😊。

什麼？你問我爲何系列的名字叫DD？由於呆呆呀，哈哈😄。

喜歡「霖呆呆」的小夥還但願能夠關注霖呆呆的公衆號 LinDaiDai 或者掃一掃下面的二維碼👇👇👇。

我會不定時的更新一些前端方面的知識內容以及本身的原創文章🎉

你的鼓勵就是我持續創做的主要動力 😊。

本文使用 mdnice 排版