一份頭條前端面試準(zhǔn)備[整理稿]

JS打亂數(shù)組
function shuffle(arr) {
    let i = arr.length;
    while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
    }
}
JS ajax
//步驟一:創(chuàng)建異步對(duì)象
var ajax = new XMLHttpRequest();
//步驟二:設(shè)置請(qǐng)求的url參數(shù),參數(shù)一是請(qǐng)求的類型,參數(shù)二是請(qǐng)求的url,可以帶參數(shù),動(dòng)態(tài)的傳遞參數(shù)starName到服務(wù)端
ajax.open('get','getStar.php?starName='+name);
//步驟三:發(fā)送請(qǐng)求
ajax.send();
//步驟四:注冊(cè)事件 onreadystatechange 狀態(tài)改變就會(huì)調(diào)用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
    //步驟五 如果能夠進(jìn)到這個(gè)判斷 說明 數(shù)據(jù) 完美的回來(lái)了,并且請(qǐng)求的頁(yè)面是存在的
　　　　console.log(ajax.responseText);//輸入相應(yīng)的內(nèi)容
　　}
}
JS bind 實(shí)現(xiàn)
if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this,                        // 保存原函數(shù)
        context = [].shift.call(arguments), // 保存需要綁定的this上下文
        args = [].slice.call(arguments);    // 剩余的參數(shù)轉(zhuǎn)為數(shù)組
        return function () {                    // 返回一個(gè)新函數(shù)
            self.apply(context,[].concat.call(args, [].slice.call(arguments)));
        }
    }
}

Function.prototype.bind = function (...arg) {
    var self = this;
        var newArr = [...arg];                       // 保存原函數(shù)
    var context = newArr.shift(); // 保存需要綁定的this上下文
    return function (...arg2) {
                var arr = [...newArr];  
                Array.prototype.push.apply(arr,arg2)
                self.apply(context,arr);
    }
}
懶加載
let lazyImages = [...document.querySelectorAll('.lazy-image')]
let inAdvance = 300 // 自定義一個(gè)高度，當(dāng)距離300px到達(dá)圖片時(shí)加載

function lazyLoad() {
    lazyImages.forEach(image => {
        if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { // 距離xxpx時(shí)加載圖片
            image.src = image.dataset.src
            image.onload = () => image.classList.add('loaded')
        }
    })

    // if all loaded removeEventListener
}

lazyLoad()

window.addEventListener('scroll', _.throttle(lazyLoad, 16)) // 用到了lodash的節(jié)流函數(shù)
window.addEventListener('resize', _.throttle(lazyLoad, 16))
JS實(shí)現(xiàn)promise
function PromiseM(){
    this.status='pending';
    this.msg='';
    var process=arguments[0];
    var that=this;
    process(function(){
        that.status='resolve';
        that.msg=arguments[0];
    },function(){
        that.status='reject';     
        that.msg=arguments[0];           
    });
    return this;
}
PromiseM.prototype.then=function(){
    if(this.status=='resolve'){
        arguments[0](this.msg);
    }
    if(this.status=='reject'&&arguments[1]){
        arguments[1](this.msg);
    }
}
JS發(fā)布訂閱模式
const event = {
    clientList: [],
    listen: function(key , fn) {
        if (this.clientListen[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function() {
        const key = Array.prototype.shift.call(arguments)
        const fns = this.clientList[key]
        if (!fns || fns.length === 0 ) {
            return false
        }
        for (let i = 0, fn ;fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    },
    remove : function(key , fn) {
        const fns = this.clientList[key]
        if (!fns) {
            return false
        }
        if (!fn) {
            fns && (fns.length = 0)
        } else {
            for (let l = fns.length - 1; l>=0; l--) {
                const _fn = fns[l]
                if ( _fn ===fn) {
                    fns.splice(l, 1)
                }
            }
        }
}

const installEvent = (obj) => {
    for (let i in event) {
        obj[i] = event[i]
    }
}
JSONP
var script = document.createElement('script');
  script.type = 'text/javascript';

  // 傳參并指定回調(diào)執(zhí)行函數(shù)為onBack
  script.src = 'http://www.domain-com:8080/login?user=admin&callback=onBack';
  document.head.appendChild(script);

  // 回調(diào)執(zhí)行函數(shù)
  function onBack(res) {
      alert(JSON.stringify(res));
  }
JS 獲取url參數(shù)
function getQueryString(name) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return unescape(r[2]); return null; 
}
CSS 無(wú)限旋轉(zhuǎn)
@keyframes rotate{
    0%{
        transform: rotate(0);
      }
    50%{
        transform:rotate(200deg);
    }
    100%{
         transform: rotate(0);
        }
    }
 
.rotate{
    transition: 0.5s;
    transform-origin: 30px 30px;  
    animation: rotate 10s linear infinite;  /*開始動(dòng)畫后無(wú)限循環(huán)，用來(lái)控制rotate*/
}
CSS 卡牌翻轉(zhuǎn)
.wutai{
    position: relative;
    perspective: 800px;
    width: 220px;
    height: 292px;
    transform-style: preserve-3d;
}
#trans{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 1s;
    transform-style: preserve-3d;
}
        .back{transform: rotateY(180deg);}
        .flip{transform: rotateY(180deg);}
display 有兼容性怎么辦
.box{
    display: -webkit-box;  /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本語(yǔ)法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本語(yǔ)法: IE 10 */
    display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */
    display: flex;         /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
}

.flex1 {  
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;     /* OLD - Firefox 19- */              
    -webkit-flex: 1;      /* Chrome */  
    -ms-flex: 1           /* IE 10 */  
    flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
算法 選擇排序
function selectionSort(arr) {
    var len = arr.length;
    var minIndex, temp;
    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     //尋找最小的數(shù)
                minIndex = j;                 //將最小數(shù)的索引保存
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}
二分查找算法
function binarySearch(data,item,start,end){
    var end=end || data.length-1;
    var start=start || 0;
    var m=Math.floor((start+end)/2);
    if(item === data[m]){
        return m;
    }else if(item<data[m]){
        return binarySearch(data,item,start,m-1) //遞歸調(diào)用
    }else{
        return binarySearch(data,item,m+1,end);
    }
    return false;
}
歸并算法
function merge(left, right) {
  var tmp = [];

  while (left.length && right.length) {
    if (left[0] < right[0])
      tmp.push(left.shift());
    else
      tmp.push(right.shift());
  }

  return tmp.concat(left, right);
}

function mergeSort(a) {
  if (a.length === 1) 
    return a;

  var mid = ~~(a.length / 2)
    , left = a.slice(0, mid)
    , right = a.slice(mid);

  return merge(mergeSort(left), mergeSort(right));
}
快速排序
const quickSort = (arr) => {
    let left = 0;
    let right = arr.length - 1;
    whlie(left < right) {
        while(arr[right] >= arr[0] && left < right){
            right -= 1
        }
        while(arr[left] <= arr[0] && left < right) {
            left++;
        }
        if (right === left) {
      let mid=arr[right];
      arr[right]=arr[0];
      arr[0]=mid;
      break;
    }
        // 當(dāng)左指針小于右指針的位置，交換兩個(gè)指針當(dāng)前位置的元素
    let tem=arr[right];
    arr[right]=arr[left];
    arr[left]=tem;
    }
    return quickSort(arr.slice(0,left)).concat(arr.slice(left,right+1)).concat(quickSort(arr.slice(right+1)));
}


function _quickSort(num, left, right) {
    if (left >= right) return; // 若左右指針相遇，待排序數(shù)組長(zhǎng)度小宇1，即遞歸的終點(diǎn)，return(注意不能寫成left==right，這里left是有可能大于right的)。
    var i = left, j = right, flag = left; // 定義可移動(dòng)的左右指針 i，j，定義flag為基數(shù)下標(biāo)。
    while (i < j) { // 在i<j時(shí)不斷循環(huán)，i一旦與j碰頭，則跳出循環(huán)。
        while (num[j] >= num[flag] && j > flag) j--; // j不斷左移，找到在num[flag]右側(cè)且比它大的數(shù)。
        if (i >= j) {
            break; // 由于j可能已被改變，需再次判斷i與j是否碰頭。
        }
        while (num[i] <= num[flag] && i < j) i++; // i不斷右移，找到且比基數(shù)小的數(shù)，且i不能與j碰頭。(由于兩次交換已合并，此處不需要使得i在flag左側(cè))
        // num[flag] num[j] num[i]三者換位，可用ES6語(yǔ)法糖[num[flag],num[j],num[i]] = [num[j],num[i],num[flag]];
        let temp = num[flag]; 
        num[flag] = num[j];
        num[j] = num[i];
        num[i] = temp
        flag = i; // 基數(shù)已經(jīng)在原num[i]的位置，flag同時(shí)也要賦值成i。
    }
    _quickSort(num, left, flag - 1); // 將flag左邊數(shù)組作為待排序數(shù)組，遞歸調(diào)用。
    _quickSort(num, flag + 1, right); // 將flag右邊數(shù)組作為待排序數(shù)組，遞歸調(diào)用。
}
節(jié)流函數(shù)
function throttle(method,delay,duration){
    var timer=null;
    var begin=new Date();    
    return function(){                
        var context=this, args=arguments;
        var current=new Date();        
        clearTimeout(timer);
        if(current-begin>=duration){
            method.apply(context,args);
            begin=current;
        }else{
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
    }
}

// 函數(shù)消抖
function debounce(method,context){
    clearTimeout(method.tId);
    method.tId=setTimeout(function(){
        method.call(context)
    },300)
}
function debounce(method,delay){
    var timer = null; 
    return function(){
        var context = this,args = arguments;
        clearTimeout(timer); 
        timer = setTimeout(function(){
            method.apply(context,args); 
        },delay);
    }
}

const throttle = (method, delay, duration) => {
    const date = new Date();
    let timer = null;
    return function (...arg){
        const current = new Date();
        clearTimeOut(timer);
        if(current - data >= duration){
            method.apply(this, arg);
            date = current;
        }
        timer = setTimeOut(() => {
            method.apply(this, arg);
        }, delay)
    }
}
IndexOf的實(shí)現(xiàn)
function ArrayIndexOf(arr,value,n){
    var i=isNaN(n)?0:n;//有第三參時(shí)
        i=(i<0)?arr.length+i:i;//第三參為負(fù)數(shù)時(shí)
    for(i;i<arr.length;i++){
        if(arr[i]===value){return i;}                   
    }return -1;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容