摘要：盡量避免使用表達式又稱動態屬性。使用計算數組中的重復項如果你想計算數組中的每個值有多少重復值，也可以快速幫到你。

前端常用代碼片段(一) 點這里
前端常用代碼片段(二) 點這里
前端常用代碼片段(三) 點這里
前端常用代碼片段(四) 點這里
前端常用代碼片段(五) 點這里
前端常用代碼片段(六) 點這里

語義化是指根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），便于開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。

用正確的標簽做正確的事情

html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析

語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構

搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;

使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解

HTML5增加了許多語義化標簽如:header footer nav article ……

語義化HTML示例：

    
header


  main

HTML5 是定義 HTML 標準的最新的版本。 該術語表示兩個不同的概念：

它是一個新版本的HTML語言，具有新的元素，屬性和行為，

它有更大的技術集，允許更多樣化和強大的網站和應用程序。這個集合有時稱為HTML5和朋友，通?？s寫為HTML5。

HTML5新特性：

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新標簽的瀏覽器兼容問題：

IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

可直接使用成熟的框架、比如html5shiv

如何區分 HTML 和 HTML5:

DOCTYPE聲明

新增元素

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異

最簡單粗暴的

* {
    margin: 0;
    padding: 0;
}

更好的選擇Normalize.css 相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案

Reset CSS:只選對的，不選"貴"的，因根據具體項目來做選擇權衡，不應該濫用

css定義的權重？

頁面顯示樣式的優先級取決于其“特殊性”’，特殊性越高，就顯示最高的，當特殊性相等時，顯示后者
特殊性表述為4個部分：0,0,0,0

一個選擇器的特殊性如下確定：

對于選擇器是#id的屬性值,特殊性值為：0,1,0,0

對于屬性選擇器，class或偽類，特殊性值為：0,0,1,0

對于標簽選擇器或偽元素，特殊性值為：0,0,0,1

通配符‘*’對特殊性值為：0,0,0,0

內聯樣式特殊性值為：1,0,0,0

absolute：生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位

relative：生成相對定位的元素，相對于其正常位置進行定位

1.absolute + transform:

  
Demo

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

  
Demo

3.flex + justify-content + align-items

  
Demo

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

遍歷數組法： 這應該是最簡單的去重方法（實現思路：新建一新數組，遍歷數組，值不在新數組就加入該新數組中）

// 遍歷數組去重法
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）的對象
}

這是對 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字符串

減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器。

減少DOM操作次數，優化javascript性能。

少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

盡量避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

圖片預加載，將樣式表放在頂部，將腳本放在底部。

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

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)

執行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
方法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.布局方式

彈性布局
固定布局
流體布局
混合布局
絕對定位布局

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
示例中的回調函數被執行四次，每次參數和返回的值如下：

2.有initialValue初始值得情況
var arr = [0,1,2,3,4];
arr.reduce(function (preValue,curValue,index,array) {
    return preValue + curValue;
}, 5); //15
reduce()方法會執行五次回調，每次參數和返回的值如下：

基礎部分截取自 大漠 - 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 的幾個小技巧