JS-NO.4

数组方法

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

Math常用方法

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

算法

快排

• 1：先拿到中间的索引，通过中间索引找到他对应的项
  • 这个中间项，是从数组中拎出来，即数组中没有他了，所以，只能用splice；
  • splice的返回值，是被删除的内容以新数组的形式返回，因为我们删除了一项，所以，要取数字必须用方括号 [0];
• 2：创建两个新数组left=[]，right=[]；
• 3：用ary数组中每一项跟中间项比较，比他小的放left数组，比他大的放right数组
• 4： return quciksort(left).concat([center],quciksort(right));
  • 函数自己调用自己，属于"递归"
• 5：停止拆分的条件 if(ary.length<=1){return ary;}
  • return 1）有阻断程序执行的功能 2）返回值；

var ary=[12,2,26,3,1,19,8];
    function quickSort(ary) {
        //5：停止拆分的条件；
        if(ary.length<=1){
            return ary;//return后面的语句都不会执行；
            //return有阻断程序执行的作用；
        }
        //1:先找出中间一项，向下取整
        var centerIndex=Math.floor(ary.length/2);
        //2:通过中间索引，拿到该索引对应的值；
        var centerValue=ary.splice(centerIndex,1)[0];
        //3:创建两个新的空数组，left和right
        var left=[],
            right=[];
        //4:用ary中的每一项跟centerValue比较，比他小的放left数组，比他大的放right数组；
        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中取出来一个数字，单独成为数组 使用splice方法
2、遍历ary的数组，跟left数组，从后往前的比较，如果比left的数字小，继续往前比，如果比某个值大，就插入到这个值的下一项的前面；重点(必须break，否则就会出错) ；如果比所有的都小，那就插入到left数组的第一个；

var ary=[23,21,12,6,1,32,8];
    /*
    * 1:从ary数组中，随意抽取一张牌，放入left数组;比如：[23]
    * 2：遍历ary中的每一个，用其跟left数组进行比对，如果比left的某个值小，继续往前比对，如果比到头还小的话，插入left数组的第一项，unshift；
    * 如果比left数组中的某个值大，插入到这个值的下一项的前面；一定阻断程序的执行；
    * */
    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]){//如果当前项，比left的最后一个小的话，继续往前比，j--
                    j--;
                    if(j==-1){//代表比到头，还小的话，就插入到left的第一个位置；
                        left.unshift(cur);
                    }
                }else{
                    left.splice(j+1,0,cur);
                    break; //break跳出循环
                }
            }
        }
        return left;

    }
var res=insertSort(ary);

冒排

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

var ary=[23,21,12,6,1,32,8];
    /*
    *第一轮 最多可以比6次 已经把最大值放在最后了
         * [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次 已经把最大的三个值放在后面
        * [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次 已经最大的四个值放在侯民啊
        *[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次；
    *
    * */

    //外面的循环应该是比较的"轮数"
    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;
            }
        }
    }

数组去重的思路：

1、 双重循环
2、 先sort，然后用当前项跟相邻项进行比较
3、 新数组
4、 利用不重名的特性
5、 利用对象不重名的特性，实现了重复次数的记录，里面用到两个循环，一个for循环，for..in循环

思路1：双重循环

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]){
                //删除数组中间项，只能用splice；
                ary.splice(j,1);
                j--;//为了防止数组塌陷
            }
        }
    }

思路2：创建新数组

var newAry=[];
    for(var i=0; i<ary.length; i++){
        //如何判断新数组中是否有某个值 indexOf
        if(newAry.indexOf(ary[i])==-1){//如果新数组中没有的话
            newAry.push(ary[i]);//把这个数放入新数组
        }
    }

思路3：sort排序

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--;//防止数组塌陷
        }
    }

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

var obj={};
    //遍历数组中的每一项，如果对象中没有，把这一项赋值一份给对象，如果对像中已经有了，说明这是重复项，我们就删除数组中的这一项；
    for(var i=0; i<ary.length; i++){
        if(obj[ary[i]]){//走if说明重复了；
            ary.splice(i,1);
            i--;
        }else{//走else说明对象中没有这个数；那么就给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++){
        //取随机数
        var num=Math.round(Math.random()*61);
        if(ary.indexOf(strCode[num])==-1){//说明数组中没有你；
            ary.push(strCode[num]);
        }else{//证明数组中已经存在，为了不浪费这次机会，我们必须i--;
            i--;//这次不算，以后冲抓
        }
    }
    document.write(ary)

验证码2

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)

选项卡 闭包

<!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">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>
<div class="wrap" id="tab2">
    <ul>
        <li class="on">按钮1</li>
        <li>按钮2</li>
    </ul>
    <div class="show">内容1</div>
    <div>内容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">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容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';
        //思路：点击每个按钮的时候，让所有的按钮都变灭，就让当前按钮点亮，让所有的内容框都隐藏，就让当前按钮对应的内容框显示；
        //事件属于异步，异步就会有时间差，所以，外面循环中的i值等到事件触发的时候，早都已经循环结束，我们只能拿到最大的i值；而这个i值一定是错误的；
        //解决方式有两种：1）自定义属性 2）闭包
        //设置默认的 点亮项
        selectIndex=selectIndex%aBtn.length||0;//传了按照传的来，没穿默认设置索引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">内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>
<div class="wrap" id="tab2">
    <ul>
        <li class="on">按钮1</li>
        <li>按钮2</li>
    </ul>
    <div class="show">内容1</div>
    <div>内容2</div>
</div>
<script>
    function tab(id,selectIndex) {
        //1:获取需要的元素：需要所有的按钮+所有的内容框;一定要限制范围的获取元素；
        var oWrap=document.getElementById(id);
        var aBtn=oWrap.getElementsByTagName('li');
        var aDiv=oWrap.getElementsByTagName('div');
        //动态计算wrap容器的宽度
        oWrap.style.width=aBtn.length*200+'px';
        //在点击事件触发前，就要设置默认选中项；
        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;  //对象的设置；我们设置了自定义属性index，对应的值分别是0，1，2
             //当元素身上的事件被触发的时候，会执行一个函数，函数中的this指向当前这个元素；
             aBtn[i].onclick=function () {
             //3：点击事件发生的时候，想做什么事？
                 select(this.index)
             }
        }
    }
    tab('tab1',1);
    tab('tab2');
</script>
</body>
</html>