前端經常使用代碼片斷(四)

時間  2019-11-06
標籤 前端 經常 使用 代碼 片斷 简体版
原文   原文鏈接

前端經常使用代碼片斷(一) 點這裏
前端經常使用代碼片斷(二) 點這裏
前端經常使用代碼片斷(三) 點這裏
前端經常使用代碼片斷(四) 點這裏
前端經常使用代碼片斷(五) 點這裏
前端經常使用代碼片斷(六) 點這裏javascript

1.簡述一下你對HTML語義化的理解？並寫出一段語義化的HTML？

語義化是指根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），便於開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。
  • 用正確的標籤作正確的事情
  • html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析
  • 語義化的HTML在沒有CSS的狀況下也能呈現較好的內容結構與代碼結構
  • 搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
  • 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解
  • HTML5增長了許多語義化標籤如:header footer nav article ……

語義化HTML示例：css

<!-- 這是開放的 -->
<header>
    <h1>header</h1>
</header>
<section class="main">
  main
</section>
<aside>aside</aside>
<footer>
  footer
</footer>

2. HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 是定義 HTML 標準的最新的版本。 該術語表示兩個不一樣的概念：
  • 它是一個新版本的HTML語言，具備新的元素，屬性和行爲，
  • 它有更大的技術集，容許更多樣化和強大的網站和應用程序。這個集合有時稱爲HTML5和朋友，一般縮寫爲HTML5。

HTML5新特性：html

  • HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長
  • 繪畫 canvas;
  • 用於媒介回放的 video 和 audio 元素;
  • 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
  • sessionStorage 的數據在瀏覽器關閉後自動刪除
  • 語意化更好的內容元素，好比 article、footer、header、nav、section
  • 表單控件(input type)，calendar、date、time、email、url、search
  • 新的技術webworker, websocket, Geolocation

移除元素：前端

  • 純表現的元素basefont ，big，center，font, s，strike，tt，u
  • 對可用性產生負面影響的元素：frame，frameset，noframes

處理HTML5新標籤的瀏覽器兼容問題：html5

  • IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
  • 可直接使用成熟的框架、好比html5shiv
<!--[if lt IE 9]>
   <script src="html5shiv.js"></script>
<![endif]-->

如何區分 HTML 和 HTML5:java

  • DOCTYPE聲明
  • 新增元素

3. 爲何要初始化CSS樣式(reset css)？

  • 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別
  • 最簡單粗暴的
* {
    margin: 0;
    padding: 0;
}
  • 更好的選擇Normalize.css 相比於傳統的CSS reset，Normalize.css是一種現代的、爲HTML5準備的優質替代方案
  • Reset CSS:只選對的，不選"貴"的，因根據具體項目來作選擇權衡，不該該濫用
  1. css定義的權重？
頁面顯示樣式的優先級取決於其「特殊性」’，特殊性越高，就顯示最高的，當特殊性相等時，顯示後者
特殊性表述爲4個部分：0,0,0,0

一個選擇器的特殊性以下肯定：git

  • 對於選擇器是#id的屬性值,特殊性值爲：0,1,0,0
  • 對於屬性選擇器，class或僞類，特殊性值爲：0,0,1,0
  • 對於標籤選擇器或僞元素，特殊性值爲：0,0,0,1
  • 通配符‘*’對特殊性值爲：0,0,0,0
  • 內聯樣式特殊性值爲：1,0,0,0

4. 講講position的值relative和absolute的區別？

  • absolute：生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位
  • relative：生成相對定位的元素，相對於其正常位置進行定位

5. 如何水平垂直居中div？（至少給出2種解決方法）

1.absolute + transform:es6

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

2.inline-block + text-align + table-cell + vertical-aligngithub

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

3.flex + justify-content + align-itemsweb

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

6. 漸進加強 VS 優雅降級，你怎麼看？

漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽

7. JavaScript 數組去重？(簡述思路便可)

  • 遍歷數組法： 這應該是最簡單的去重方法（實現思路：新建一新數組，遍歷數組，值不在新數組就加入該新數組中）
// 遍歷數組去重法
function unique(arr){
  var _arr = []
  //遍歷當前數組
  for(var i = 0; i < arr.length; i++){
    //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
    //不然把當前項push到臨時數組裏面
    if (_arr.indexOf(arr[i]) == -1) _arr.push(arr[i])
  }
  return _arr
}

注意點：indexOf 爲 ES5 的方法，注意瀏覽器兼容，須要本身實現 indexOf

  • 對象鍵值對(hash) 法：速度快，高效，佔用更大的內存換取更快的時間，用 JavaScript 中的 Object 對象來當作哈希表，hash去重的核心是構建了一個 hash 對象來替代 indexOf
// hash 去重法
function unique(arr){
    var _arr = [], 
        hash = {}
    for (var i = 0; i < arr.length; i++) {
        var item = arr[i]
        var key = typeof(item) + item
          // 對象的鍵值只能是字符串, typeof(item) + item來去分1和'1'的狀況
        if(hash[key] !== 1){
            _arr.push(item)
            hash[key] = 1
        }
    }
    return _arr
}
  • 炫酷的 es6 Set數據結構: ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值
function unique(arr){
    return Array.from(new Set(arr))
    // Array.from方法用於將兩類對象轉爲真正的數組：
    // 相似數組的對象（array-like object）和可遍歷（iterable）的對象
}

8. 使用原生ajax獲取 Linus Torvalds 的GitHub信息(API:api.github.com/users/torva…)，並將JSON字符串解析爲JSON對象，並講講對JSON的瞭解

這是對 ajax與json的考察
ajax的全稱：Asynchronous Javascript And XML，異步傳輸+js+xml 如今差很少都用JSON

建立XMLHttpRequest對象,也就是建立一個異步調用對象
建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
設置響應HTTP請求狀態變化的函數
發送HTTP請求
獲取異步調用返回的數據
數據處理

下面就來貼代碼吧：

var api = 'https://api.github.com/users/torvalds'
var xhr = new XMLHttpRequest() // 建立XMLHttpRequest對象

if(window.XMLHttpRequest){ // 兼容處理
    xhr = new XMLHttpRequest()
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP')// 兼容ie6如下下
}

xhr.open('get',api,true)    //設置請求信息    
xhr.send()  //提交請求

//等待服務器返回內容
xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
         console.log(JSON.parse(xhr.responseText)) // 使用JSON.parse解析JSON字符串
    } 
}
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小 如：{"age":"12", "name":"back"}
  • JSON.parse() 方法解析一個JSON字符串
  • JSON.stringify() 方法將一個JavaScript值轉換爲一個JSON字符串

9. 簡單談談前端性能優化

  1. 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
  2. 減小DOM操做次數，優化javascript性能。
  3. 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
  4. 儘可能避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
  5. 圖片預加載，將樣式表放在頂部，將腳本放在底部。

10. 費波納茨數組

就是當前項等於前兩項的和

var arr=[];
for(var i=0;i<10;i++ ){
    i<=1?arr.push(1):arr.push(arr[i-1]+arr[i-2]);
}
console.log(arr)

11.數據排列

執行num(1,5)，返回'123454321'
執行num(2,5)，返回'23456765432'

方法1：

var num = function(n,m){
    var arr = []
    var len=(m-n)*2+1
    for(var i=0;i<len;i++){
       n<m?(arr.push(n++)):(arr.push(m--))
    }
    return arr.join()
}
num(2,5)

方法2：

var num = function (n,m) {
  let arr = [m]
  for(let i = m - 1; i >= n; i--){
    arr.push(i);
    arr.unshift(i)
  }
  return arr.join()
}
num(2,5)

12.翻轉一個字符串

let a="hello word";
let b=[...str].reverse().join("");//drow olleh

13.setInterval 時間是否會有偏差？產生偏差的緣由？其原理是什麼？

setInterval異步函數，異步執行，js被解析的時候，碰到他，先不解析他，放他在一旁，先去解析同步的，等資源空閒下來的纔去解析他，這樣一來，解析其餘代碼確定須要時間，這不就有延誤嘛。
而後解析setInterval內部函數不也同樣須要耗時，函數簡單些還好寫，你要是寫了一大堆，可能產生的延誤就不是一點點的；

14.佈局方式

  1. 彈性佈局
  2. 固定佈局
  3. 流體佈局
  4. 混合佈局
  5. 絕對定位佈局

15.清除浮動的方式：

  • 父級div定義height
  • 最後一個浮動元素後加空div標籤 並添加樣式clear:both。
  • 包含浮動元素的父標籤添加樣式overflow爲hidden或auto。
  • 父級div定義zoom

16.怎麼判斷兩個對象相等？

obj={
    a:1,
    b:2
}
obj2={
    a:1,
    b:2
}
obj3={
    a:1,
    b:2
}
JSON.stringify(obj)==JSON.stringify(obj2);//true
JSON.stringify(obj)==JSON.stringify(obj3);//false

17.ES6強制參數

ES6提供了默認參數的概念，當函數的參數未傳入或者傳入值爲 undefined 時，會應用參數的默認值。

默認值能夠是個表達式，因此咱們能夠將默認值設置爲一個執行函數，若是該參數沒有傳值，就會執行咱們的默認函數：

const required = () => {throw new Error('Missing parameter')};

//The below function will throw an error if either "a" or "b" is missing.

const add = (a = required(), b = required()) => a + b;

add(1, 2) //3
add(1) // Error: Missing parameter.

18. 強大的 reduce

以前只是用過reduce作過數組求和，如今發現一些新的用法，原來 reduce 這麼強大。

基礎部分

reduce()方法接收一個函數callbackfn做爲累加器（accumulator），數組中的每一個值（從左到右）開始合併，最終爲一個值。

語法

array.reduce(callbackfn,[initialValue])

reduce()方法接收callbackfn函數，而這個函數包含四個參數：

function callbackfn(preValue,curValue,index,array){}
  • preValue: 上一次調用回調返回的值，或者是提供的初始值（initialValue）
  • curValue: 數組中當前被處理的數組項
  • index: 當前數組項在數組中的索引值
  • array: 調用 reduce()方法的數組

而initialValue做爲第一次調用 callbackfn函數的第一個參數。

1.沒有initialValue初始值得狀況

var arr = [0,1,2,3,4];
arr.reduce(function(preValue,curValue,index,array){ 
    return preValue + curValue; 
}); // 10

示例中的回調函數被執行四次，每次參數和返回的值以下：

clipboard.png

2.有initialValue初始值得狀況

var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
    return preValue + curValue;
}, 5); //15

reduce()方法會執行五次回調，每次參數和返回的值以下：

clipboard.png

基礎部分截取自 大漠 - JavaScript學習筆記... 所有內容可點擊連接查看

實例部分

1.使用 reduce 替代 map + filter

設想你有這麼個需求：要把數組中的值進行計算後再濾掉一些值，而後輸出新數組。很顯然咱們通常使用 map 和 filter 方法組合來達到這個目的，但這也意味着你須要迭代這個數組兩次。

來看看咱們如何使用 reduce 只迭代數組一次，來完成一樣的結果。下面這個例子咱們須要把數組中的值乘 2 ，並返回大於 50 的值：

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
  
  num = num * 2; //double each number (i.e. map)
  
  //filter number > 50
  if (num > 50) {
    finalList.push(num);
  }
  return finalList;
}, []);

doubledOver50; // [60, 80]

2.使用 reduce 檢測括號是否對齊封閉

下面這個例子咱們用 reduce 來檢測一段 string 中的括號是否先後對應封閉。

思路是定義一個名爲 counter 的變量，它的初始值爲 0 ，而後迭代字符串，迭代過程當中碰到(就加 1，碰到)就減 1，若是括號先後對應的話，最終couter的值會是 0。

//Returns 0 if balanced.
const isParensBalanced = (str) => {
  return str.split('').reduce((counter, char) => {
    if(counter < 0) { //matched ")" before "("
      return counter;
    } else if(char === '(') {
      return ++counter;
    } else if(char === ')') {
      return --counter;
    }  else { //matched some other char
      return counter;
    }
    
  }, 0); //<-- starting value of the counter
}

isParensBalanced('(())') // 0 <-- balanced
isParensBalanced('(asdfds)') //0 <-- balanced
isParensBalanced('(()') // 1 <-- not balanced
isParensBalanced(')(') // -1 <-- not balanced

3.使用 reduce 計算數組中的重複項

若是你想計算數組中的每一個值有多少重複值，reduce 也能夠快速幫到你。下面的例子咱們計算數組中每一個值的重複數量，並輸出一個對象來展現：

var carsObj = cars.reduce(function (obj, name) { 
   obj[name] = obj[name] ? ++obj[name] : 1;
  return obj;
}, {});

carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

實例部分截取自 ES6 的幾個小技巧 所有內容可點擊連接查看

19.用對象解構移除一個對象中的某些屬性

有時你可能但願移除一個對象中的某些屬性，咱們通常會經過迭代這個對象（如 for..in 循環）來移除那些咱們不想要的屬性。實際上咱們能夠經過對象解構的方法將不想要的屬性提取出來，並將想留下來的變量保存在rest 參數中。

在下面的這個例子中，咱們從對象中移除_internal和tooBig這兩個屬性：

let {_internal, tooBig, ...cleanObject} = {
  el1: '1',
  el2: '2',
  el3: '3',
  tooBig:{},
  _internal:"secret"
};

console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

拓展：

1.嵌套對象解構

let {model, engine: {vin,...uuu} } = {
  model: 'bmw 2018',
  engine: {
    v6: true,
    turbo: true,
    vin: 12345
  }
}

console.log(uuu); // {v6: true, turbo: true}
console.log(vin); // 12345
console.log(model); // 'bmw 2018'
console.log(engine); // Uncaught ReferenceError: engine is not defined

2.合併對象

合併兩個對象，新對象中相同的屬性會被放在後面的對象覆蓋：

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged

console.log(merged) // {a:1, b:30, c:40, d:50}

20.判斷一個數是不是整數

function isInteger(x) { return (x ^ 0) === x; }
function isIntefer(x){
    return (typeof x === 'number') && (x % 1 === 0); //返回布爾
}

參考文章：
1.12個常規前端面試題及小結
2.ES6 的幾個小技巧

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程