數(shù)組方法

• 從數(shù)組末尾刪除一項，有哪些方法鳍征？
  • ary.length--
  • ary.length-=1; ary.length=ary.lengty-1;
  • ary.pop()
  • ary.splice(ary.length-1,1)
• 給數(shù)組末尾增加一項
  • ary[ary.length]=xxx;
  • ary.push()
  • ary.splice(ary.length,'xxx')
• 數(shù)組的克隆
  • slice()/ slice(0)
  • ary.concat();
  • ary.splice(0)

Math常用方法

• Math.ceil() 向上取整
• Math.floor() 向下取整
• Math.random() 取0～1之間的隨機小數(shù)黍翎，不包含1；
  • Math.round(Math.random()*(m-n)+n); 取n~m之間的隨機整數(shù)蟆技，包含m
• Math.round() 四舍五入
• Math.pow(2,3) 冪次方
• Math.sqrt() 開平方
• Math.abs() 取絕對值

算法

快排

• 1：先拿到中間的索引玩敏，通過中間索引找到他對應(yīng)的項
  • 這個中間項，是從數(shù)組中拎出來质礼，即數(shù)組中沒有他了旺聚，所以，只能用splice眶蕉；
  • splice的返回值砰粹，是被刪除的內(nèi)容以新數(shù)組的形式返回，因為我們刪除了一項造挽，所以碱璃，要取數(shù)字必須用方括號 [0];
• 2：創(chuàng)建兩個新數(shù)組left=[]，right=[]饭入；
• 3：用ary數(shù)組中每一項跟中間項比較嵌器，比他小的放left數(shù)組，比他大的放right數(shù)組
• 4： return quciksort(left).concat([center],quciksort(right));
  • 函數(shù)自己調(diào)用自己谐丢，屬于"遞歸"
• 5：停止拆分的條件 if(ary.length<=1){return ary;}
  • return 1）有阻斷程序執(zhí)行的功能 2）返回值爽航；

var ary=[12,2,26,3,1,19,8];
    function quickSort(ary) {
        //5：停止拆分的條件蚓让；
        if(ary.length<=1){
            return ary;//return后面的語句都不會執(zhí)行；
            //return有阻斷程序執(zhí)行的作用讥珍；
        }
        //1:先找出中間一項历极，向下取整
        var centerIndex=Math.floor(ary.length/2);
        //2:通過中間索引，拿到該索引對應(yīng)的值衷佃；
        var centerValue=ary.splice(centerIndex,1)[0];
        //3:創(chuàng)建兩個新的空數(shù)組趟卸，left和right
        var left=[],
            right=[];
        //4:用ary中的每一項跟centerValue比較，比他小的放left數(shù)組氏义，比他大的放right數(shù)組锄列；
        for(var i=0; i<ary.length; i++){
            var cur=ary[i];
            if(cur<centerValue){
                left.push(cur)
            }else{
                right.push(cur);
            }
        }
        return quickSort(left).concat([centerValue],quickSort(right));
    }
    var res=quickSort(ary);

插排

1、先從ary中取出來一個數(shù)字觅赊，單獨成為數(shù)組 使用splice方法
2右蕊、遍歷ary的數(shù)組，跟left數(shù)組吮螺，從后往前的比較饶囚，如果比left的數(shù)字小，繼續(xù)往前比鸠补，如果比某個值大淫僻，就插入到這個值的下一項的前面斥杜；重點(必須break，否則就會出錯) ；如果比所有的都小痛单，那就插入到left數(shù)組的第一個德撬；

var ary=[23,21,12,6,1,32,8];
    /*
    * 1:從ary數(shù)組中银酬，隨意抽取一張牌末贾，放入left數(shù)組;比如：[23]
    * 2：遍歷ary中的每一個，用其跟left數(shù)組進行比對勋陪，如果比left的某個值小贪磺，繼續(xù)往前比對，如果比到頭還小的話诅愚，插入left數(shù)組的第一項寒锚，unshift；
    * 如果比left數(shù)組中的某個值大违孝，插入到這個值的下一項的前面刹前；一定阻斷程序的執(zhí)行；
    * */
    function insertSort(ary){
        var left=ary.splice(0,1);  //[23]
        //遍歷ary雌桑，用ary中的每一個喇喉，跟left從后往前的比較；
        for(var i=0; i<ary.length; i++){
            var cur=ary[i];
            //跟left從后往前的比較
            for(var j=left.length-1; j>=0;){
                if(cur<left[j]){//如果當(dāng)前項校坑，比left的最后一個小的話轧飞，繼續(xù)往前比衅鹿，j--
                    j--;
                    if(j==-1){//代表比到頭撒踪，還小的話过咬，就插入到left的第一個位置；
                        left.unshift(cur);
                    }
                }else{
                    left.splice(j+1,0,cur);
                    break; //break跳出循環(huán)
                }
            }
        }
        return left;

    }
var res=insertSort(ary);

冒排

1制妄、兩重循環(huán)掸绞，第一重循環(huán)代表的是輪數(shù)，第二重循環(huán)代表的次數(shù)耕捞，比較的次數(shù)在一次次的減少衔掸；
2、 每次比較的時候俺抽，都拿當(dāng)前項跟后一項進行比較敞映，如果比他大，交換位置磷斧；

var ary=[23,21,12,6,1,32,8];
    /*
    *第一輪 最多可以比6次 已經(jīng)把最大值放在最后了
         * [21,23,12,6,1,32,8]
         * [21,12,23,6,1,32,8]
         * [21,12,6,23,1,32,8]
         * [21,12,6,1,23,32,8]
         * [21,12,6,1,23,32,8]
         * [21,12,6,1,23,8,32]
    *第二輪 最多可以比5次振愿， 可以把次大值和最大值，放在后面
        * [12,21,6,1,23,8,32]
        * [12,6,21,1,23,8,32]
        * [12,6,1,21,23,8,32]
        * [12,6,1,21,23,8,32]
        * [12,6,1,21,8,23,32]
    *第三輪 最多可以比4次 已經(jīng)把最大的三個值放在后面
        * [6,12,1,21,8,23,32]
        * [6,1,12,21,8,23,32]
        * [6,1,12,21,8,23,32]
        * [6,1,12,8,21,23,32]
    *第四輪 最多可以比3次 已經(jīng)最大的四個值放在侯民啊
        *[1,6,12,8,21,23,32]
        *[1,6,12,8,21,23,32]
        *[1,6,8,12,21,23,32]
    *第五輪  最多可以比2次
    * [1,6,8,12,21,23,32]
    * 第六輪 最多可以1次弛饭；
    * 第七輪 最多可以比0次冕末；
    *
    * */

    //外面的循環(huán)應(yīng)該是比較的"輪數(shù)"
    for(var i=0; i<ary.length; i++){
        //里面比較的是次數(shù)
        for(var j=0; j<ary.length-1-i; j++){
            if(ary[j]>ary[j+1]){
                //找了一個臨時的空容器
                var tmp=ary[j];
                ary[j]=ary[j+1];
                ary[j+1]=tmp;
            }
        }
    }

數(shù)組去重的思路：

1、 雙重循環(huán)
2侣颂、 先sort档桃，然后用當(dāng)前項跟相鄰項進行比較
3、 新數(shù)組
4憔晒、 利用不重名的特性
5藻肄、 利用對象不重名的特性，實現(xiàn)了重復(fù)次數(shù)的記錄拒担，里面用到兩個循環(huán)嘹屯，一個for循環(huán)，for..in循環(huán)

思路1：雙重循環(huán)

for(var i=0; i<ary.length; i++){
        var cur=ary[i];
        //要跟后面每一項進行比對
        for(var j=i+1; j<ary.length; j++){
            if(cur==ary[j]){
                //刪除數(shù)組中間項澎蛛，只能用splice抚垄；
                ary.splice(j,1);
                j--;//為了防止數(shù)組塌陷
            }
        }
    }

思路2：創(chuàng)建新數(shù)組

var newAry=[];
    for(var i=0; i<ary.length; i++){
        //如何判斷新數(shù)組中是否有某個值 indexOf
        if(newAry.indexOf(ary[i])==-1){//如果新數(shù)組中沒有的話
            newAry.push(ary[i]);//把這個數(shù)放入新數(shù)組
        }
    }

思路3：sort排序

ary.sort(function (a,b) {
        return a-b;
    });
    //用當(dāng)前項跟他的鄰居比對，如果重復(fù)谋逻，刪掉其中一個就行呆馁；
    for(var i=0; i<ary.length; i++){
        if(ary[i]===ary[i+1]){
            ary.splice(i,1);
            i--;//防止數(shù)組塌陷
        }
    }

思路4：利用對象不重名的特性

var obj={};
    //遍歷數(shù)組中的每一項，如果對象中沒有毁兆，把這一項賦值一份給對象浙滤，如果對像中已經(jīng)有了，說明這是重復(fù)項气堕，我們就刪除數(shù)組中的這一項纺腊；
    for(var i=0; i<ary.length; i++){
        if(obj[ary[i]]){//走if說明重復(fù)了畔咧；
            ary.splice(i,1);
            i--;
        }else{//走else說明對象中沒有這個數(shù)；那么就給obj添加屬性
            obj[ary[i]]=ary[i];
        }
    }

思路5：利用對象

var obj={};
    for(var i=0; i<ary.length; i++){
        if(obj[ary[i]]){
            obj[ary[i]]++; //++ +=1
        }else{//走else一定是對象沒有揖膜；給這個屬性名貼個1的標簽
            obj[ary[i]]=1;
        }
    }
    //通過for..in拿到每個屬性名誓沸；
    var newAry=[];
    for(var attr in obj){
        newAry.push(Number(attr));
    }

驗證碼1

var strCode='abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ0123456789';
    var ary=[];
for(var i=0; i<4; i++){
        //取隨機數(shù)
        var num=Math.round(Math.random()*61);
        if(ary.indexOf(strCode[num])==-1){//說明數(shù)組中沒有你；
            ary.push(strCode[num]);
        }else{//證明數(shù)組中已經(jīng)存在壹粟，為了不浪費這次機會拜隧，我們必須i--;
            i--;//這次不算，以后沖抓
        }
    }
    document.write(ary)

驗證碼2

while(ary.length<4){//只要數(shù)組的長度小于4趁仙，都可以無限制的抓下去
        var num=Math.round(Math.random()*61);
        if(ary.indexOf(strCode[num])==-1){//只有不重復(fù)洪添，才往數(shù)組中放；
            ary.push(strCode[num])
        }
    }
    document.write(ary)

選項卡 閉包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
            height: 300px;
            float: left;
            margin: 10px;
        }
        .wrap li{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            background: #cccccc;
            border-bottom:1px solid #333;
            box-sizing: border-box;
        }
        .wrap li+li{
            border-left:1px solid #333;
        }
        .wrap li.on{
            background: #ADD8E6;
            border-bottom: none;
        }
        .wrap div{
            height: 100%;
            display: none;
            background: #add8e6;
        }
        .wrap div.show{
            display: block;
        }
    </style>
</head>
<body>
<div class="wrap" id="tab1">
    <ul>
        <li class="on">按鈕1</li>
        <li>按鈕2</li>
        <li>按鈕3</li>
    </ul>
    <div class="show">內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
</div>
<div class="wrap" id="tab2">
    <ul>
        <li class="on">按鈕1</li>
        <li>按鈕2</li>
    </ul>
    <div class="show">內(nèi)容1</div>
    <div>內(nèi)容2</div>
</div>
<div class="wrap" id="tab3">
    <ul>
        <li class="on">按鈕1</li>
        <li>按鈕2</li>
        <li>按鈕3</li>
        <li>按鈕4</li>
    </ul>
    <div class="show">內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
    <div>內(nèi)容4</div>
</div>
<script>
    function tab(id,selectIndex) {
        //必須限定范圍的獲取元素
        var oWrap=document.getElementById(id);
        var aBtn=oWrap.getElementsByTagName('li');
        var aDiv=oWrap.getElementsByTagName('div');
        oWrap.style.width=aBtn.length*200+'px';
        //思路：點擊每個按鈕的時候雀费，讓所有的按鈕都變滅干奢，就讓當(dāng)前按鈕點亮，讓所有的內(nèi)容框都隱藏盏袄，就讓當(dāng)前按鈕對應(yīng)的內(nèi)容框顯示忿峻；
        //事件屬于異步，異步就會有時間差貌矿，所以炭菌，外面循環(huán)中的i值等到事件觸發(fā)的時候，早都已經(jīng)循環(huán)結(jié)束逛漫，我們只能拿到最大的i值黑低；而這個i值一定是錯誤的；
        //解決方式有兩種：1）自定義屬性 2）閉包
        //設(shè)置默認的 點亮項
        selectIndex=selectIndex%aBtn.length||0;//傳了按照傳的來酌毡，沒穿默認設(shè)置索引0;
        function show(showIndex) {
            for(var i=0; i<aBtn.length; i++){
                aBtn[i].className=null;
                aDiv[i].className=null;
            }
            aBtn[showIndex].className='on';
            aDiv[showIndex].className='show';
        }
        show(selectIndex)
        for(var i=0; i<aBtn.length; i++){
            (function (index) {
                aBtn[index].onclick=function () {
                    show(index)
                }
            })(i);
        }

    }
    tab('tab1')
    tab('tab2',1)
    tab('tab3',103)
</script>
</body>
</html>

選項卡 自定義屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圓夢源：勿忘初心克握，方得始終</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .wrap{
            width: 600px;
            height: 300px;
            float: left;
            margin: 10px;
        }
        .wrap li{
            width: 200px;
            height: 50px;
            line-height: 50px;
            background: #cccccc;
            text-align: center;
            float: left;
            border-bottom:1px solid #333;
            box-sizing: border-box;
        }
        .wrap li.on{
            border-bottom: none;
            background: #ADD8E6;
        }
        .wrap li+li{
            border-left:1px solid #333;
        }
        .wrap div{
            height: 100%;
            background: #add8e6;
            display: none;
            text-align: left;
        }
        .wrap div.show{
            display: block;
        }
    </style>
</head>
<body>
<div class="wrap" id="tab1">
    <ul>
        <li class="on">按鈕1</li>
        <li>按鈕2</li>
        <li>按鈕3</li>
    </ul>
    <div class="show">內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
</div>
<div class="wrap" id="tab2">
    <ul>
        <li class="on">按鈕1</li>
        <li>按鈕2</li>
    </ul>
    <div class="show">內(nèi)容1</div>
    <div>內(nèi)容2</div>
</div>
<script>
    function tab(id,selectIndex) {
        //1:獲取需要的元素：需要所有的按鈕+所有的內(nèi)容框;一定要限制范圍的獲取元素；
        var oWrap=document.getElementById(id);
        var aBtn=oWrap.getElementsByTagName('li');
        var aDiv=oWrap.getElementsByTagName('div');
        //動態(tài)計算wrap容器的寬度
        oWrap.style.width=aBtn.length*200+'px';
        //在點擊事件觸發(fā)前枷踏，就要設(shè)置默認選中項菩暗；
        selectIndex=selectIndex%aBtn.length||0;
        function select(showIndex) {
            for(var i=0; i<aBtn.length; i++){
                aBtn[i].className='';
                aDiv[i].className='';
            }
            aBtn[showIndex].className='on';
            aDiv[showIndex].className='show';
        }
        select(selectIndex);
        //2:給每個元素添加事件
        for(var i=0; i<aBtn.length; i++){
            //思路1：自定義屬性
             aBtn[i].index=i;  //對象的設(shè)置；我們設(shè)置了自定義屬性index旭蠕，對應(yīng)的值分別是0停团，1，2
             //當(dāng)元素身上的事件被觸發(fā)的時候掏熬，會執(zhí)行一個函數(shù)佑稠，函數(shù)中的this指向當(dāng)前這個元素；
             aBtn[i].onclick=function () {
             //3：點擊事件發(fā)生的時候旗芬，想做什么事舌胶？
                 select(this.index)
             }
        }
    }
    tab('tab1',1);
    tab('tab2');
</script>
</body>
</html>