js算法與應用

排序部分

快速排序

    // 從小到大的快速排序
        function sort(array){
            //slice用于截取數組,通過slice,從0到arr.length 復制出一個新的數組
            var temp_array = array.slice(0)
             quickSort = function(arr){
                  //數組已經為空了
                   if(arr.length<=1){
                    return arr;
                   }
                   //數組可以繼續(xù)分割
                   //獲取中間元素坐標,并取出該元素
                   var provIndex = Math.floor(arr.length/2),
                       prov   = arr.splice(provIndex,1)[0],
                            left = [],
                            right = [];

                            for(var i = 0 ; i<arr.length ; i++){
                                  if(arr[i]>prov){
                                      //大于中間元素向右
                                      right.push(arr[i])
                                  }else{
                                    left.push(arr[i])
                                  }
                            }

                           return quickSort(left).concat([prov],quickSort(right))
            }
            return quickSort(temp_array);
        }

優(yōu)化過的冒泡排序

//優(yōu)化后的冒泡排序
    function baboSort(arr){
        //復制數組
        var temp_arr  = arr.slice(0),tag,temp;
        for(var i = 0 ;i<temp_arr.length ;i++){
              tag = 0;
              for(var j =temp_arr.length-1 ;j>i ;j--){
                   if(temp_arr[j]>temp_arr[j+1]){
                       temp = temp_arr[j];
                       temp_arr[j] = temp_arr[j+1];
                       temp_arr[j+1] = temp ; 
                       tag = 1;
                   }
              }
              if(tag === 0 ){break}
        }
        return temp_arr;
    }

數組去重

   //消除數組重復
   var array = [4,2,5,2,8,4,9,1,1]
   //方法一、現代瀏覽器方法(IE9，chrome,edge,firefox..)
    var newArray = array.filter(function(ele, pos,self){
        return pos === self.indexOf(ele)
    })
  
   //方法二、
function unique(arr) {
    var ret = [];
    var len = arr.length;
    var tmp = {};
    var tmpKey;
    for(var i=0; i<len; i++){
        //序列成一個鍵進行去重
        tmpKey = typeof arr[i] + JSON.stringify(arr[i]);
        if(!tmp[tmpKey]){
            tmp[tmpKey] = 1;
            ret.push(arr[i]);
        }
    }
    return ret;
} 
  console.log(unique(array))
  //方法三、(es6 IE 11 CHROME 38)
  function unique(arr){
    //set元素都是唯一的
    var set =new Set(arr);
     return Array.from(set)
  }

編寫一個JavaScript函數，輸入指定類型的選擇器(僅需支持id，class，tagName三種簡單CSS選擇器，無需兼容組合選擇器)可以返回匹配的DOM節(jié)點，需考慮瀏覽器兼容性和性能。

var query = function(selector) {
                var reg = /^(#)?(\.)?(\w+)$/img;
                var regResult = reg.exec(selector);
                var result = [];
                //如果是id選擇器
                if(regResult[1]) {
                    if(regResult[3]) {
                        if(typeof document.querySelector === "function") {
                            result.push(document.querySelector(regResult[3]));
                        }
                        else {
                            result.push(document.getElementById(regResult[3]));
                        }
                    }
                }
                //如果是class選擇器
                else if(regResult[2]) {
                    if(regResult[3]) {
                        if(typeof document.getElementsByClassName === 'function') {
                            var doms = document.getElementsByClassName(regResult[3]);
                            if(doms) {
                                result = converToArray(doms);
                            }
                        }
                        //如果不支持getElementsByClassName函數
                        else {
                            var allDoms = document.getElementsByTagName("*") ;
                            for(var i = 0, len = allDoms.length; i < len; i++) {
                                if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                                    result.push(allDoms[i]);
                                }
                            }
                        }
                    }
                }
                //如果是標簽選擇器
                else if(regResult[3]) {
                    var doms = document.getElementsByTagName(regResult[3].toLowerCase());
                    if(doms) {
                        result = converToArray(doms);
                    }
                }
                return result;
            }

            function converToArray(nodes){
                  var array = null;         
                  try{        
                        array = Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器         
                  }catch(ex){
                      array = new Array();         
                      for( var i = 0 ,len = nodes.length; i < len ; i++ ) { 
                          array.push(nodes[i])         
                      }         
                  }      
                  return array;
          }

實現對象的clone

// 方法一：
Object.prototype.clone = function(){
        //根據構造函數判斷是數組還是對象,分別初始化
        var o = this.constructor === Array ? [] : {};
        for(var e in this){
               //是對象就遞歸調用clone 是數組就根據(e)index 賦值
                o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
        }
        return o;
}

//方法二：
  /**
     * 克隆一個對象
     * @param Obj
     * @returns
     */
    function clone(Obj) {
        var buf;
          //判斷實例
        if (Obj instanceof Array) {
            buf = [];                    //創(chuàng)建一個空的數組 
            var i = Obj.length;
            while (i--) {
                buf[i] = clone(Obj[i]);
            }
            return buf;
        }else if (Obj instanceof Object){
            buf = {};                   //創(chuàng)建一個空對象 
            for (var k in Obj) {           //為這個對象添加新的屬性 
                buf[k] = clone(Obj[k]);
            }
            return buf;
        }else{                         //普通變量直接賦值
            return Obj;
        }
    }

小題合集

生成[x,y]范圍的隨機整數

function Random(min,max){
    return Math.random()*(max-min)+min+1
}
//random產生[0,1) 如果要達到1的便捷需要+1

小數精度問題 0.2+0.1?

console.log(0.2 + 0.1);//0.30000000000000004 精度丟失
//解決辦法
 function add(num1, num2){
  let r1, r2, m;
  //轉換為字符串來獲取小數位數
  r1 = (''+num1).split('.')[1].length;
  r2 = (''+num2).split('.')[1].length;
  //取位數最長的
  m = Math.pow(10,Math.max(r1,r2));
  return (num1 * m + num2 * m) / m;
}
console.log(add(0.2+0.1)) //0.3

已知數組var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”

var stringArray = ['This', 'is', 'Baidu', 'Campus']
console.log(stringArray.join(" "))

已知有字符串foo=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”

function hump(str){
     var newStr = "", flag  = false;
     for(var i = 0 ; i<str.length; i++){
          if(str[i]==='-'){
             flag = true;
          }else{
            if(flag){
                newStr += str[i].toUpperCase(); 
                flag = false;
            }else{
                newStr += str[i]; 
            }
            
          }
     }
     return newStr;
}

var numberArray = [3,6,2,4,1,5]; 實現倒排，排序。

//順排,倒排
var numberArray = [3,6,2,4,1,5]; 
//sort實現
var sortArr = numberArray.sort(function(a,b){
    return a - b;
})
//倒排
var sortArr = numberArray.sort(function(a,b){
    return b - a;
})

怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點

 createDocumentFragment()    //創(chuàng)建一個DOM片段

      createElement()   //創(chuàng)建一個具體的元素

      createTextNode()   //創(chuàng)建一個文本節(jié)點

//添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()
//查找

   getElementsByTagName()    //通過標簽名稱

      getElementsByName()    //通過元素的Name屬性的值

      getElementById()    //通過元素Id，唯一性
      querySelector()    // 查找單個元素
      querySelectorAll()  //查找所有元素

將一個#fffff類型的數據轉換為rgb(255,255,255)形式

遍歷ul中l(wèi)i的內容

  (function(){
               var liList = document.getElementsByTagName("li");
                   for(var i = 0 ; i<liList.length ;i++){
                    console.log(liList[i].innerHTML);
                   }
             })()

查找一個對象是否具有某個屬性

            function getNodeById(data,id){
                 if(data['id']==id){
                    return data;
                 }else{
                     if(data.hasOwnProperty("children")){
                          var node = null ;
                          data["children"].every(function(element){
                                 node = getNodeById(element,id); 
                                 if(node){ 
                                    return ;
                                 }else{
                                    return true;
                                 }
                          }) 
                         return node;
                     }else{
                        //找不到節(jié)點
                        return ;
                     }
                 }
            }

請寫出以下執(zhí)行結果

var myObject = {
    foo: "bar",
    func: function() {
        //指向對象myObject
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
          //this指向windows 嚴格模式指向undefined
            console.log("inner func:  this.foo = " + this.foo);
            //指向對象
            console.log("inner func:  self.foo = " + self.foo);
        }());
    }
};
myObject.func();

請寫出以下執(zhí)行結果

function foo1()
{
  return {
      bar: "hello"
  };
}

function foo2()
{
  return
  {
      bar: "hello"
  };
}
console.log(foo1())//{bar:"hello"}
console.log(foo2())//undefined
//why?,等價于
function foo3()
{
  return;
  {
      bar: "hello"
  };
}
console.log(foo3())

關于NaN ,NaN是一個數字嗎？ 判斷NaN

console.log(typeof NaN);//number
console.log(Number.isNaN(NaN))//true
console.log(NaN === NaN);//false
console.log(NaN == NaN);// fals

變量問題

//2、變量問題
(function(){
  var a = b = 3;
  //a是局部變量,b是全局變量
  //等價于 var a = b ,b = 3 ;
})();

console.log("a defined? " + (typeof a !== 'undefined'));   
console.log("b defined? " + (typeof b !== 'undefined'));

var a = {
  n:1
},
b = a ;
a.x = a = {n:2}
/*
(先尋找變量再賦值)第一階段初始化的時候值已經保存下來了 a.x是a的引用指向x,此時x未聲明所以此時指向null,a已經聲明了,a指向堆中的常量{n:1},
第二階段賦值, a指向堆中的常量{n:2},a.x指向a即指向常量{n:2}
需要注意的是此時a.x在第一階段保存的引用是一開始a的變量位置,跟賦值過來的a已經不是一個變量了
*/
console.log(b)//{n:1}
console.log(a)//{n:2}
console.log(a.x)//undefined


  var a = 2, b=1;
    function temp(a){
       //a有聲明所以作為局部變量處理
       a = 4 ;
       console.log(a)//4
       //b無聲明所以當做全局變量
       b = 4 
       console.log(b)//4
       //全局變量處理
       c = 5 
       console.log(c)//5
    }
   // temp()
   // temp(4)
   //如果將所在函數注釋后會如何？ReferenceError: c is not defined
   console.log(a)//2
   console.log(b)//4
   console.log(c)//5
   

寫一個按照下面方式調用都能正常工作的 sum 方法

console.log(sum(2,3));   // Outputs 5
console.log(sum(2)(3));  // Outputs 5
function sum(){
    var sum =0;
  if(arguments.length<=1){
     sum = arguments[0];
    //只有一個情況下需要儲存當前參數用作下次累加
    return function(value){
      sum += value
      return sum;
    }
  }else{
       return [].reduce.call(arguments,function(sum,value){
        return sum+value;
       },0)
  }
}
//由此引出
 /*
由此延伸call apply call,apply的不同點
call(context,arguments...) //arguments... 是若干個參數
apply(context,arguments) //arguments 是 數組
call的調用速度比apply快
相同點 改變函數執(zhí)行的環(huán)境
第一次參數為null的時候指向windows
 模擬實現call,apply？
 見https://github.com/mqyqingfeng/Blog 獲益良多
 最關鍵的是
模擬的步驟可以分為：
將函數設為對象的屬性
執(zhí)行該函數
刪除該函數
 */

IIFE （Immediately-Invoked Function Expression）

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}
//輸出的是5個5
//解決方式
for(var i = 0; i < 5; i++) {
    (function(i){
        setTimeout(function() {
        console.log(i);  
    }, 1000);
    })(i)
}
//1 2 3 4 5
//那這個呢？
for(var i = 0; i < 5; i++) {
    (function(){
        setTimeout(function() {
        console.log(i);  
    }, 1000);
    })(i)
}
//i此時使用的還是外部的i 因為這樣就是提供參數,但是函數本身沒有形參
//es6解決辦法？
for(let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}
//可以延伸到什么部分？
console.log(5)
for(let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}
console.log(5)
//執(zhí)行順序 5->5->1~4
//原因?eventLoop,再看一個

var start = new Date();
setTimeout(function(){
  console.log(4)
  var time = start - new Date();
  console.log(`time is `)
},2)
setTimeout(function(){
  console.log(4)
  var time = start - new Date();
  console.log(`time2 is `)
},0)

//time 是多少？  還有這個又是多少？
//基于 chrome 版本 59.0.3071.115（正式版本） （64 位）
/* 像定時器、計時器  Promise 這類的異步操作   是放在任務隊列中的,只有js主進程棧中的任務執(zhí)行完才會執(zhí)行。詳情見 http://www.ruanyifeng.com/blog/2014/10/event-loop.html
(基于0秒的setTimeout立即執(zhí)行已過期)
*/
/*在nodejs中進行實驗
hello
4
time2 is
4
time is
結果相同
但是在nodejs中 eventloop的運行機制與瀏覽器不一樣(暫未深入了解,詳情見阮老師的文章)
*/

IIFE還有用處？
防止變量污染

類型問題

簡便的類型轉換

var num1 ="1a9c",num2 = 19,num3 ="20"
console.log(parseInt(num1)+num2) //20
num1 = "a1"  
console.log(parseInt(num1)+num2) //NaN
console.log(num3-0)  //20

真假值

極假(falsy)
false
null
undefined
' '
0
NaN
其他都是真值