摘要：盡量避免使用表達(dá)式又稱動態(tài)屬性。使用計(jì)算數(shù)組中的重復(fù)項(xiàng)如果你想計(jì)算數(shù)組中的每個值有多少重復(fù)值，也可以快速幫到你。

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

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時，讓瀏覽器的爬蟲和機(jī)器很好的解析。

用正確的標(biāo)簽做正確的事情

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析

語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)

搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解

HTML5增加了許多語義化標(biāo)簽如:header footer nav article ……

語義化HTML示例：

    
header


  main

HTML5 是定義 HTML 標(biāo)準(zhǔn)的最新的版本。 該術(shù)語表示兩個不同的概念：

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

它有更大的技術(shù)集，允許更多樣化和強(qiáng)大的網(wǎng)站和應(yīng)用程序。這個集合有時稱為HTML5和朋友，通常縮寫為HTML5。

HTML5新特性：

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加

繪畫 canvas;

用于媒介回放的 video 和 audio 元素;

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件(input type)，calendar、date、time、email、url、search

新的技術(shù)webworker, websocket, Geolocation

移除元素：

純表現(xiàn)的元素basefont ，big，center，font, s，strike，tt，u

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes

處理HTML5新標(biāo)簽的瀏覽器兼容問題：

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。

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

如何區(qū)分 HTML 和 HTML5:

DOCTYPE聲明

新增元素

因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異

最簡單粗暴的

* {
    margin: 0;
    padding: 0;
}

更好的選擇Normalize.css 相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案

Reset CSS:只選對的，不選"貴"的，因根據(jù)具體項(xiàng)目來做選擇權(quán)衡，不應(yīng)該濫用

css定義的權(quán)重？

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

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

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

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

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

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

內(nèi)聯(lián)樣式特殊性值為：1,0,0,0

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

relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位

1.absolute + transform:

  
Demo

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

  
Demo

3.flex + justify-content + align-items

  
Demo

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

遍歷數(shù)組法： 這應(yīng)該是最簡單的去重方法（實(shí)現(xiàn)思路：新建一新數(shù)組，遍歷數(shù)組，值不在新數(shù)組就加入該新數(shù)組中）

// 遍歷數(shù)組去重法
function unique(arr){
  var _arr = []
  //遍歷當(dāng)前數(shù)組
  for(var i = 0; i < arr.length; i++){
    //如果當(dāng)前數(shù)組的第i已經(jīng)保存進(jìn)了臨時數(shù)組，那么跳過，
    //否則把當(dāng)前項(xiàng)push到臨時數(shù)組里面
    if (_arr.indexOf(arr[i]) == -1) _arr.push(arr[i])
  }
  return _arr
}

注意點(diǎn)：indexOf 為 ES5 的方法，注意瀏覽器兼容，需要自己實(shí)現(xiàn) indexOf

對象鍵值對(hash) 法：速度快，高效，占用更大的內(nèi)存換取更快的時間，用 JavaScript 中的 Object 對象來當(dāng)做哈希表，hash去重的核心是構(gòu)建了一個 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數(shù)據(jù)結(jié)構(gòu): ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值

function unique(arr){
    return Array.from(new Set(arr))
    // Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組：
    // 類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象
}

這是對 ajax與json的考察
ajax的全稱：Asynchronous Javascript And XML，異步傳輸+js+xml 現(xiàn)在差不多都用JSON

創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象
創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息
設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)
發(fā)送HTTP請求
獲取異步調(diào)用返回的數(shù)據(jù)
數(shù)據(jù)處理

下面就來貼代碼吧：

var api = "https://api.github.com/users/torvalds"
var xhr = new XMLHttpRequest() // 創(chuàng)建XMLHttpRequest對象

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

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

//等待服務(wù)器返回內(nèi)容
xhr.onreadystatechange = function() {
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
         console.log(JSON.parse(xhr.responseText)) // 使用JSON.parse解析JSON字符串
    } 
}

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小 如：{"age":"12", "name":"back"}

JSON.parse() 方法解析一個JSON字符串

JSON.stringify() 方法將一個JavaScript值轉(zhuǎn)換為一個JSON字符串

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

減少DOM操作次數(shù)，優(yōu)化javascript性能。

少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

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

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

就是當(dāng)前項(xiàng)等于前兩項(xiàng)的和

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)

執(zhí)行num(1,5)，返回"123454321"
執(zhí)行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.翻轉(zhuǎn)一個字符串
let a="hello word";
let b=[...str].reverse().join("");//drow olleh
13.setInterval 時間是否會有誤差？產(chǎn)生誤差的原因？其原理是什么？
setInterval異步函數(shù)，異步執(zhí)行，js被解析的時候，碰到他，先不解析他，放他在一旁，先去解析同步的，等資源空閑下來的才去解析他，這樣一來，解析其他代碼肯定需要時間，這不就有延誤嘛。
然后解析setInterval內(nèi)部函數(shù)不也一樣需要耗時，函數(shù)簡單些還好寫，你要是寫了一大堆，可能產(chǎn)生的延誤就不是一點(diǎn)點(diǎn)的；
14.布局方式

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

15.清除浮動的方式：

父級div定義height
最后一個浮動元素后加空div標(biāo)簽 并添加樣式clear:both。
包含浮動元素的父標(biāo)簽添加樣式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強(qiáng)制參數(shù)
ES6提供了默認(rèn)參數(shù)的概念，當(dāng)函數(shù)的參數(shù)未傳入或者傳入值為 undefined 時，會應(yīng)用參數(shù)的默認(rèn)值。
默認(rèn)值可以是個表達(dá)式，所以我們可以將默認(rèn)值設(shè)置為一個執(zhí)行函數(shù)，如果該參數(shù)沒有傳值，就會執(zhí)行我們的默認(rèn)函數(shù)：
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. 強(qiáng)大的 reduce
之前只是用過reduce做過數(shù)組求和，現(xiàn)在發(fā)現(xiàn)一些新的用法，原來 reduce 這么強(qiáng)大。
基礎(chǔ)部分
reduce()方法接收一個函數(shù)callbackfn作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始合并，最終為一個值。
語法
array.reduce(callbackfn,[initialValue])
reduce()方法接收callbackfn函數(shù)，而這個函數(shù)包含四個參數(shù)：
function callbackfn(preValue,curValue,index,array){}

preValue: 上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）
curValue: 數(shù)組中當(dāng)前被處理的數(shù)組項(xiàng)
index: 當(dāng)前數(shù)組項(xiàng)在數(shù)組中的索引值
array: 調(diào)用 reduce()方法的數(shù)組

而initialValue作為第一次調(diào)用 callbackfn函數(shù)的第一個參數(shù)。
1.沒有initialValue初始值得情況
var arr = [0,1,2,3,4];
arr.reduce(function(preValue,curValue,index,array){ 
    return preValue + curValue; 
}); // 10
示例中的回調(diào)函數(shù)被執(zhí)行四次，每次參數(shù)和返回的值如下：

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

基礎(chǔ)部分截取自 大漠 - JavaScript學(xué)習(xí)筆記... 全部內(nèi)容可點(diǎn)擊鏈接查看
實(shí)例部分
1.使用 reduce 替代 map + filter
設(shè)想你有這么個需求：要把數(shù)組中的值進(jìn)行計(jì)算后再濾掉一些值，然后輸出新數(shù)組。很顯然我們一般使用 map 和 filter 方法組合來達(dá)到這個目的，但這也意味著你需要迭代這個數(shù)組兩次。
來看看我們?nèi)绾问褂?reduce 只迭代數(shù)組一次，來完成同樣的結(jié)果。下面這個例子我們需要把數(shù)組中的值乘 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 中的括號是否前后對應(yīng)封閉。
思路是定義一個名為 counter 的變量，它的初始值為 0 ，然后迭代字符串，迭代過程中碰到(就加 1，碰到)就減 1，如果括號前后對應(yīng)的話，最終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 計(jì)算數(shù)組中的重復(fù)項(xiàng)
如果你想計(jì)算數(shù)組中的每個值有多少重復(fù)值，reduce 也可以快速幫到你。下面的例子我們計(jì)算數(shù)組中每個值的重復(fù)數(shù)量，并輸出一個對象來展示：
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 }
實(shí)例部分截取自 ES6 的幾個小技巧 全部內(nèi)容可點(diǎn)擊鏈接查看
19.用對象解構(gòu)移除一個對象中的某些屬性
有時你可能希望移除一個對象中的某些屬性，我們一般會通過迭代這個對象（如 for..in 循環(huán)）來移除那些我們不想要的屬性。實(shí)際上我們可以通過對象解構(gòu)的方法將不想要的屬性提取出來，并將想留下來的變量保存在rest 參數(shù)中。
在下面的這個例子中，我們從對象中移除_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.嵌套對象解構(gòu)
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.判斷一個數(shù)是否是整數(shù)
function isInteger(x) { return (x ^ 0) === x; } 
function isIntefer(x){
    return (typeof x === "number") && (x % 1 === 0); //返回布爾
}
參考文章：
1.12個常規(guī)前端面試題及小結(jié)
2.ES6 的幾個小技巧