1、快速擾亂陣列排序
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
return Math.random() - 0.5;
})
console.log(arr);
複製程式碼2、JS判斷裝置來源
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
微信的 有些不太一樣
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
複製程式碼3、audio元素和video元素在ios和andriod中實現自動播放
原因： 因為各大瀏覽器都為了節省流量，做出了優化，在使用者沒有行為動作時（互動）不予許自動播放；
/音訊，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支援哦</audio>
//音訊，寫法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
優先播放音樂bg.ogg，不支援在播放bg.mp3
</audio>
//JS繫結自動播放（操作window時，播放音樂）
$(window).one('touchstart', function(){
music.play();
})
//微信下相容處理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小結
//1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常；
//2.audio元素沒有設定controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間；
//3.注意不要遺漏微信的相容處理需要引用微信JS；
複製程式碼4、讓文字不可複製
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
複製程式碼新增版權資訊思路：
1、答案區域監聽copy事件，並阻止這個事件的預設行為。
2、獲取選中的內容（window.getSelection()）加上版權資訊，然後設定到剪下板（clipboarddata.setData()）。
複製程式碼5、水平垂直居中
1、定位 盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;
2、table-cell佈局 父級 display: table-cell; vertical-align: middle; 子級 margin: 0 auto;
3、定位 + transform ; 適用於 子盒子 寬高不定時； （這裡是本人常用方法）
position: relative / absolute;
/*top和left偏移各為50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
transform: translate(-50%, -50%); 注意這裡啟動了3D硬體加速哦 會增加耗電量的 （至於何是3D加速 請看瀏覽器程式與執行緒篇）
4、flex 佈局
父級：
/*flex 佈局*/
display: flex;
/*實現垂直居中*/
align-items: center;
/*實現水平居中*/
justify-content: center;
再加一種水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);
複製程式碼6、改變placeholder的字型顏色
***只適用於pc端
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size:14px;
color: #333;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:14px;
color: #333;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:14px;
color: #333;
}
複製程式碼7、window.onload()和$(document).ready()的區別
window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
複製程式碼8、如何判斷一個object是陣列型別
1、Array.isArray([1,2,3])
2、根據物件的class屬性(類屬性)，跨原型鏈呼叫toString()方法(比較推薦)
Object.prototype.toString.call([1,2,3]);
3、從原型入手，Array.prototype.isPrototypeOf(obj);
複製程式碼9、CORS http請求和普通http請求的區別
[跨域資源共享 CORS 詳解](http://www.ruanyifeng.com/blog/2016/04/cors.html)
感謝[面試的信心來源於過硬的基礎](https://segmentfault.com/a/1190000013331105)這篇文章的分享
另外新增兩個github上整理的面試題
[https://github.com/qiu-deqing/FE-interview](https://github.com/qiu-deqing/FE-interview)、[https://github.com/fouber/blog](https://github.com/fouber/blog)
複製程式碼10、盒子模型你是怎麼理解的？
1）盒子模型有兩種，W3C和IE盒子模型
（1）w3c的盒模型width=content，不包括margin，padding,border
（2）IE盒模型width=content+padding+border
（3）box-sizng border-box在已設定的寬度和高度之內去設定padding和border
content-box在已設定的高度和寬度之外設定padding和border
複製程式碼11、行內元素，塊元素，空元素有哪些？
（1）行內元素：
a - 錨點，em - 強調，strong - 粗體強調，span - 定義文字內區塊，i - 斜體，img - 圖片，b - 粗體，label-表格標籤，select-專案選擇，textarea-多行文字輸入框，
sub - 下標，sup - 上標，q - 短引用，
（2）塊元素：
div - 常用塊級，dl-定義列表，dt，dd，ul-非排序列表，li，ol-排序表單，p-段落，h1，h2，h3，h4，h5-標題，table-表格，
fieldset - form控制組，form - 表單，
（3）空元素：
br-換行，hr-水平分割線
複製程式碼12、src和href的區別？
（1）href：
href是Hypertext Reference的縮寫，表示超文字引用。用來建立當前元素和文件之間的連結。如link a 並行下載該文件，並且不會停止對當前文件的處理
（2）src：
src是source的縮寫，src指向的內容會嵌入到文件當前標籤所在位置
如img、script、iframe當瀏覽器解析到該元素時，會暫停瀏覽器的渲染，直到該資源載入完畢。
複製程式碼13、什麼是css HACK？
CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號，以達到應用不同的CSS樣式的目的
複製程式碼14、優雅降級和漸進增強？
優雅降級：一開始就構建功能完整的網站，然後根據低版本瀏覽器進行相容。
漸進增強：針對低版本瀏覽器，保證最基本的功能，然後再根據高版本的瀏覽器進行互動功能的升級。
複製程式碼15、new操作符的實現
function New(func){
var res = {};
if(func.prototype !== null){
res.__proto__=func.prototype;
}
var set = func.apply(res,Array.prototype.slice(arguments,1));
if((typeof set === "object" || typeof set === "function")&&rest !== null){
return set;
}
return res;
}
var obj = New(A,1,2) === var obj = new A(1,2)
function _new(fn, ...arg) {
const obj = Object.create(fn.prototype);
const ret = fn.apply(obj, arg);
return ret instanceof Object ? ret : obj;
}
複製程式碼16、遞迴深拷貝
var obj ={q:1,w:[{e:1},2],r:{t:'123'}};
function deepClone(obj){
if(!obj || (typeof obj !== 'object')){
return;
}
var newObj = Object.prototype.toString.call(obj) == '[object Array]'?[]:{};
for(let key in obj){
if(typeof obj[key] == 'object'){
newObj[key] = deepClone(obj[key])
}else{
newObj[key] = obj[key];
}
}
return newObj;
}
console.log(deepClone(obj)==obj)
console.log(deepClone(obj))
複製程式碼17、JS常見的四種記憶體洩漏
1、意外的全域性變數
// bar變數未宣告 解決辦法就是使用js嚴格模式 'use strict'(嚴格模式下this 為undefind)
function foo(){
bar='123';
}
複製程式碼2、定時器和回撥函式
// 定時器
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
// 處理 node 和 someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
// 回撥函式
var element = document.getElementById('button');
function onClick(event) {
element.innerHTML = 'text';
}
element.addEventListener('click', onClick);
複製程式碼現代的瀏覽器（包括 IE 和 Microsoft Edge）使用了更先進的垃圾回收演算法（標記清除），已經可以正確檢測和處理迴圈引用了。即回收節點記憶體時，不必非要呼叫 removeEventListener 了。現代的瀏覽器（包括 IE 和 Microsoft Edge）使用了更先進的垃圾回收演算法（標記清除），已經可以正確檢測和處理迴圈引用了。即回收節點記憶體時，不必非要呼叫 removeEventListener 了。
3、脫離dom的引用
4、閉包 定義：閉包是指有權訪問另外一個函式作用域中的變數的函式
閉包三個特性：
（1）可以訪問當前函式以外的變數 （2）即使外部函式已經返回，閉包仍能訪問外部函式定義的變數 （3）閉包可以更新外部變數的值