js : 数组方法小结+数组去重+算法（快排+插排+冒排）

数组方法的小总结

• 从数组的末尾删除一项，有哪些方法？
  • ary.length--
  • ary.length-=1
  • ary.length = ary.length-1
  • ary.pop()
  • ary.splice(ary.length-1,1)
• 给数组末尾增加一项
  • ary.push()
  • ary[ary.length] = XXXX
  • ary.splice(ary.length,XXX)
• 数组的克隆
  • ary.slice()
  • ary.slice(0)
  • ary.concat()
  • ary.splice(0)

选项卡的封装

• 功能：1) 可以让一个页面中多个容器都有选项卡的功能 2) 通过第二个参数，设置默认亮点项
• 如果参数可有可无 ||的思想 var selectIndex = selectIndex % aBtn.length || 0;
• % 的思想

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;
    }
    .wrap{
        width: 600px;
        height: 300px;
    }
    .wrap ul li{
        float: left;
        border-bottom: 1px solid #555;
        box-sizing: border-box;
        width: 200px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #ccc;
        cursor: pointer;
    }
    .wrap ul li+li{
        border-left: 1px solid #555;
    }
    .wrap ul li.on{
        border-bottom: 1px solid transparent;
        background-color: #adde85;
    }
    .wrap div{
        display: none;
        width: 100%;
        height: 100%;
        font-size: 30px;
        background-color: #adde85;
    }
    .wrap div.show{
        display: block;
    }


</style>

<div class="wrap" id="tab1">
    <ul>
        <li class="on">按钮 1</li>
        <li>按钮 2</li>
        <li>按钮 3</li>
    </ul>
    <div class="show">内容 1</div>
    <div>内容 2</div>
    <div>内容 3</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 * aBtn[0].offsetWidth + "px";
    
    //设置默认点亮项
    selectIndex = selectIndex % aBtn.length || 0;
    function show(index){
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].className = aDiv[i].className = null;
        }
        aBtn[index].className = "on";
        aDiv[index].className = "show"
    }
    show(selectIndex);
    

    //点击按钮，所有的按钮灭掉，所有的内容框都隐藏，让当前的按钮点亮，并且当前按钮相对应的内容框显示

    //当点击事件写在循环中时，为异步执行，所以事件内获取的i值一定是循环最后的值，解决办法 1）自定函数 2）闭包

    //1）自定义函数

    /*
    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index = i;
        aBtn[i].onclick = function(){
            //让所有的按钮灭掉，内容框隐藏
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].className = aDiv[i].className = null;
            }
            //点亮当前的按钮，让当前按钮对应的内容框显示
            aBtn[this.index].className = "on";
            aDiv[this.index].className = "show"

        }

    }
    */
    
    // 2) 闭包
    for(var i=0;i<aBtn.length;i++){
        (function(index){
            aBtn[index].onclick = function(){
                show(index);
            }
        })(i)
    }

    
}

tal("tab1",2)

</script>

数组去重的思路

• 双重循环

  //直接让数组的前一项与数组的后一项进行比较相同就删除其中一个
  var arr = [2,1,4,3,2,3,3,2,1,3,1,0];
  for(var i=0;i<arr.length;i++){
      var cur = arr[i];
      for(var j=i+1;j<arr.length;j++){
          if(cur == arr[j]){
              arr.splice(j,1);
              j--;
          }
      }
  }
  
  

• 先sort，然后用当前项跟相邻项进行比较

  //思路：先用sort进行排序，这样重复的数字会排列在一起，然后让相邻项进行比较，相同删除其中一个
  var ary = [2,4,1,2,3,4,4,2,2,0,3,2,0];
  ary.sort(function(a,b){return a-b;})
  for(var i=0;i<ary.length;i++){
      if(ary[i] == ary[i+1]){
          ary.splice(i,1);
          i--;//防止数组塌陷
      }
  }
  

• 新数组

   //思路：创建一个新数组，查看新数组中是否有原数组的项，没有就添加到新数组，有就删除原数组项
   var ary = [4,3,2,4,2,2,3,2,3,4,2,2,1,0];
   var newAry = [];
   for(var i=0;i<ary.length;i++){
       var cur = ary[i];
       if(newAry.indexOf(cur) == -1){
          newAry.push(cur);
       }
   }

• 利用对象不重名的特性

//思路：1.创建一个新的对象 2.让数组中的每一项与对象中的项比较，true为重复，原数组删除，false为不重复，添加给对象
    var ary = [2,3,4,1,3,2,4,2,1,4,0,1];
    var obj = {};
    for(var i=0;i<ary.length;i++){
        if(obj[ary[i]]){
            ary.splice(i,1);
            i--;
        }else{
            obj[ary[i]] = ary[i]
        }
    }

• 利用对象不重名的特性，实现了重复次数的记录，里面用到两个循环，一个for循环，一个for...in循环

   //思路：让数组的每一项与对象中的项进行比较，true为重，让对象value++ ，false为不重复，添加给对象一个新的元素
   var ary = [1,2,3,4,2,1,3,2,3,1,3,4,2,1,0];
   var obj = {};
   for(var i=0;i<ary.length;i++){
       if(obj[ary[i]]){//为true则为重复
           obj[ary[i]]++;
       }else{
           obj[ary[i]] = 1;
       }
   }
   
   var newAry = [];
   for(var attr in obj){
       newAry.push(Number(attr));
   }
  

### 对象跟别人不同的特性
1. 不重名的特性
2. 如果对象的属性名是数字，那么打印出来的时候，按照数组的先后顺序排序

## 算法
### 快排
#### 思路
1. 先拿到中间的索引，通过中间的索引找到他对应的项
    + 这个中间项，是从数组中拎出来的，即数组中没有他了，所以，只能用户splice
    + splice的返回值，是被删除的内容以新数组的形式返回，因为我们删除了一项，所以，要取数字必须用[0];
2. 创建两个新数组，left 和 right
3. 用 原始数组 跟 中间项比较，比中间项小，放入left，反之，放入right
4. return qucikSort(left).concat([centerValue],qucikSort(right));
    + 函数自己调用自己，属于“递归”
5. 停止拆分条件 if(ary.length <= 1){ return ary };
    + return 1) 有阻断程序执行的功能 2) 返回值

<script>.

var arr = [1,2,4,3,2,1,3,4,5,6,4,3,2,4,1];

function quickSort(arr){
//在数组都为一项是停止调用quickSort函数
if(arr.length <= 1){
return arr;
}

//现获取数组的中间项
var centerIndex = Math.floor(arr.length/2);
var centerValue = arr.splice(centerIndex,1)[0];

//创建两个新数组
var left = [],right = [];

// 让原数组和获取到centerValue比较，大于centerValue添加到left数组，小于centerValue添加到right数组
for(var i=0;i<arr.length;i++){
    //获取比较项的值
    var cur = arr[i];
    if(cur < centerValue){
        left.push(cur);
    }else{
        right.push(cur);
    }
}
//将排序的数组拼接并return出去
return quickSort(left).concat([centerValue],quickSort(right));

}

var res = quickSort(arr);
</script>

### 插排
#### 思路
1. 先从ary中取出一个数字，单独是个数组  方法splice
2. 遍历ary数组，跟left数组，从后往前比较，如果left的数字小，继续往前比，如果比某个值大，就插入到这个值的下一项的前面(必须break，否则会出错，死循环)；如果比所有的都小，那就插入到left数组的第一个位置；

var ary = [4,22,1,2,4,5,63,2,6,7,4,8,0];

function inserSort(ary){
    //从原始数组中获取任意一项
    var left = ary.splice(0,1);
    //遍历原始数组，让其每一项与left从后向前比较
    for(var i=0;i<ary.length;i++){
        // 用一个变量承接原始数组的比较项
        var cur = ary[i];
        //遍历left数组，获取left数组中的项
        for(var j=left.length-1;j>=0;){
            if(cur < left[j]){//小于表示原始数组项继续向前比较
                j--;
                if(j == -1){ //当 j 为 -1 时，表示原始项已经比较到left数组项的第一位
                    left.splice(0,0,cur);
                }
            }else{
                left.splice(j+1,0,cur);
                break;
            }
        }
    }
    return left;
    
}

var res = insertSort(ary);

### 冒排-冒泡排序
1. 两重循环，第一重循环代表轮数，第二重循环代表比较的次数，比较的次数在一次次的减少
2. 每次比较的时候，都拿当前项跟后一项进行比较，如果比他大，交换位置

var ary = [6,3,7,3,2,1,0];
function maopoSort(ary){
    
    //第一层循环表示，比较的轮数
    for(var i=0;i<ary.length;i++){
        //第二层循环表示，比较的次数
        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;
            }
        }
    }
    return ary;
}

var res = maopoSort(ary);

### 验证码

<script>
var strCode='abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ0123456789';
var ary=[];

/*for(var i=0; i<4; i++){
    //取随机数
    var num=Math.round(Math.random()*61);
    if(ary.indexOf(strCode[num])==-1){//说明数组中没有你；
        ary.push(strCode[num]);
    }else{//证明数组中已经存在，为了不浪费这次机会，我们必须i--;
        i--;//这次不算，以后冲抓
    }
}
document.write(ary)*/

while(ary.length<4){//只要数组的长度小于4，都可以无限制的抓下去
    var num=Math.round(Math.random()*61);
    if(ary.indexOf(strCode[num])==-1){//只有不重复，才往数组中放；
        ary.push(strCode[num])
    }
}
document.write(ary)

</script>

### 循环
- for 和 while 循环

### Math常用的方法
- Math.ceil()  向上取整
- Math.floor()  向下取整
- Math.round()  四舍五入
- Math.random() 取0-1之间的随机数，不包含1；
    + Math.round(Math.random()*(m-n) + n);  取n-m之间的随机数，包含m
- Math.pow() 幂次方
- Math.sqrt() 开平方
- Math.abs() 绝对值

### 跟函数有关
- 阻断函数的执行 return

### 跟循环有关
- break; 循环彻底不执行
- continue; 本次不执行，后面的继续