分类 Javascript案列 下的文章


arr = ['100px', 'abc' - 6, [], -98765, 34, -2, 0, '300', , function() {
            alert(1);
        }, null, document, [], true, '200px' - 30, '23.45元', 5, Number('abc'), function() {
            alert(3);
        }, 'xyz' - 90];

用以上一组数据,来筛选分类出以下4类
1.所有的数字
2.可以转成数字的
3.最大值为
4.NaN所在的位置是

所有的数字



// 先声明一个空数组来存找到符合条件的数
let n1 = [];

// 既然要在数组里找符合条件的数,就可以先用循环把它遍历出来
for (let i = 0; i < arr.length; i++) {
    // 然后用if去判断谁符合要求
    // arr[i] 可以拿到循环里的当前的数值
    // 判断它是不是数字
    // 判断它是不是数字 typeof(arr[i]) == 'number' 

    if (typeof(arr[i]) == 'number') {
        // 符合条件的数就写入创建的数组里
        n1.push(arr[i]);
    }
}

console.log(n1);
// NaN,-98765,34,-2,0,NaN,5,NaN,NaN

到这里,获取出来的数,不仅有数字,还有类型属于数字的(NaN),但我们这里要的是纯数字,而不是是个数字类型就获取
修改一下if判断把NaN剔除掉


// 先声明一个空数组来存找到符合条件的数
let n1 = [];

// 既然要在数组里找符合条件的数,就可以先用循环把它遍历出来
for (let i = 0; i < arr.length; i++) {
    // 然后用if去判断谁符合要求
    // arr[i] 可以拿到循环里的数
    // 判断它是不是数字 并且 不是NaN
    // 判断它是不是数字 typeof(arr[i]) == 'number' 
    // 判断它不是NaN
    // NaN的判断方法 isNaN(arr[i),这样写只是判断它是个NaN,既然是要判断它不是NaN,可以用取反的方法!isNaN(arr[i)

    // 判断数据类型是不是number 并且值不是NaN
    if (typeof(arr[i]) == 'number' && !isNaN(arr[i])) {
        // 符合条件的数就写入创建的数组里
        n1.push(arr[i]);
    }
}

console.log(n1);
// (5) [-98765, 34, -2, 0, 5]

可以转成数字的


let n2 = [];

for (let i = 0; i < arr.length; i++) {
    // 先用parseFloat判断当前的数值可不可以转成数字  parseFloat(arr[i])
    // 并且不是NaN就转 !isNaN()

    // 判断这个数值可不可以通过parseFloat转成数字 - (不会出现NaN的情况)
    if (!isNaN(parseFloat(arr[i]))) {
        n2.push(arr[i]);
    }
}

console.log(n2);
// (8) ["100px", -98765, 34, -2, 0, "300", "23.45元", 5]

最大值


// Infinity 正无穷  -Infinity 负无穷
// 先声明一个值,假设它是最大的,
// 注意一下不要用Infinity去做,这样的话,就真成最大的值了,应该用-Infinity,这样只要任何一个值超过这个-Infinity,变量max里的值就会呗替换
let max = -Infinity;

for (let i = 0; i < arr.length; i++) {
    // 判断条件里不要直接用arr[i] 去比,因为arr[i]代表的是当前的数值,而数组里还有的不是数字,这样就没法用来做大小余判断了
    if (Number(arr[i]) > max) {
        max = arr[i];
     }
}
console.log(max);  //300

NaN的位置


let n4 = [];

for (let i = 0; i < arr.length; i++) {
    // 如果只判断isNaN的话,而isNaN 内部 会先将值 通过number方法转成数字 再去执行
    // 比如Number(function(){}) 用Number转一个函数出来的结果肯定是NaN,如果这是NaN,再用isNaN包起来的话,它不就是一个true
    // 为了避免类似函数一类的东西放到里面去判断,就还需要一个只有是number类型的判断条件

    // 判断数据通过isNaN方法得出布尔值 并且 数据类型必须是number(NaN也属于number)
    if (isNaN(arr[i]) && typeof arr[i] == 'number') {
        n4.push(i);
    }
}
console.log(n4);
// (4) [1, 14, 17, 19]


<body>
    <div class="wrap">
        <nav id="nav">
            <a href="javascript:;" class="active">我的行程</a>
            <a href="javascript:;">消息中心</a>
            <a href="javascript:;">角色管理</a>
            <a href="javascript:;">定时任务补偿</a>
        </nav>
        <div class="bords">
            <div class="active">我的行程</div>
            <div>消息中心</div>
            <div>角色管理</div>
            <div>定时任务补偿</div>
        </div>
    </div>
</body>

首先给nav栏的a设置成单选


        let oNavs = document.querySelectorAll('#nav a');
        let oBoxs = document.querySelectorAll('.bords div');

        // 操作一组元素时,先用循环把它遍历出来
        for (let i = 0; i < oNavs.length; i++) {
            // nav栏的设置成单选,先全部清空,在给点击的设置
            oNavs[i].onclick = function() {
                for (let j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                }
                // 这里的this指的就是当前点击着的li
                this.classList.add('active');
            }

然后给下面div设置显示隐藏时有个小技巧,<nav id="nav"><div class="bords">里都是四个子元素,且是上面第一个对应下面第一个的显示,以此类推,可以发现它们的数字下标是统一的。
如果变量声明用的是 let,可以直接使用 oBoxs[i],利用它们的共同点下标是相同的直接操作


        for (let i = 0; i < oNavs.length; i++) {
            oNavs[i].onclick = function() {
                for (let j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                    // 这里给div清空时,可以借着上面a标签清空时的这个循环给它清空

                    // 因为for循环不在乎你循环的是谁,它在乎的是循环几次,
                    // 不要认为它循环的是元素或对象,它循环的是一个数值,数字而已
                    oBoxs[j].classList.remove('active');
                }
                this.classList.add('active');
                // console.log(i);
                oBoxs[i].classList.add('active');
            }
        }

DEMO展示

但如果变量声明使用的是var,这里不要直接在点击事件里操作oBoxs[i]


        var oNavs = document.querySelectorAll('#nav a');
        var oBoxs = document.querySelectorAll('.bords div');

        for (var i = 0; i < oNavs.length; i++) {
            oNavs[i].onclick = function() {
                for (var j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                }
                this.classList.add('active');
                console.log(i);
                // 4
            }
        }

此时的i,无论点击那个,显示的都是4,是因为此时的i在第一层for循环时,已经循环4次++完了,所以在点击时显示的是一个加完之后的值,i是直接用不了的。而oNavs[i].onclick里的i所处的位置正好在for循环当中,for循环在直接到oNavs[i].onclick时,后面的函数在没点击之前是不会往里读取去触发的,只会告诉你在点击时是会执行这个函数的,具体函数里面是什么,你没点时我也不知道。

这时就可以换个思路,i在for循环里循环时是正常的,这样就可以给oNavs[i]每一个<a>添加一个属性


        var oNavs = document.querySelectorAll('#nav a');
        var oBoxs = document.querySelectorAll('.bords div');

        for (var i = 0; i < oNavs.length; i++) {
            // 
            oNavs[i].title = i;
            oNavs[i].onclick = function() {
                ......
            }
        }

加完之后可以看到每个a标签就都有一个title标签了,数字也是0123,这样可以理解为每一个a都有自己对应的下标了。
既然有下标,就不用再在里面去获取i了,直接用oBoxs[this.title]去代替了,这里的this.title也就是被点击时的a标签的title


        var oNavs = document.querySelectorAll('#nav a');
        var oBoxs = document.querySelectorAll('.bords div');

        for (var i = 0; i < oNavs.length; i++) {
            // 添加一个属性
            oNavs[i].title = i;
            oNavs[i].onclick = function() {
                for (var j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                    oBoxs[j].classList.remove('active');
                }
                this.classList.add('active');
                // console.log(i);
                // oBoxs[i].classList.add('active');

                // 打印获取一下this.title的值
                console.log(this.title);
                // 直接用oBoxs[this.title]去操作
                oBoxs[this.title].classList.add('active');

            }
        }

DEMO展示

学前端也有段时间了,js放着几个月了,都快凉了,到今天为止也还没学多少,归根于近期比较忙,事多的要命,而且还是在大山里做的,一待就是好几天(貌似并是不偷懒的理由╭(╯^╰)╮,好吧,我承认,这段时间我确实懒了点!!!∑(゚Д゚ノ)ノ),时间匆匆的走了,我还在原地一样,自己掉队了,进度慢了点,我还在努力,对自己说一声加油!未来继续努力,离年底不远了,得学出一点成绩才行(〃'▽'〃)
下边是一个js入门小练习,html+css结合js里的var 和for 做出来的!
代码如下:
HTML:


    <div id="box"></div>
    <div id="eject">
        <div id="set">
            <p id="p1">
                <font>背景:</font>
                <span style="background:#e91e63;"></span>
                <span style="background:#009688;"></span>
                <span style="background:#2196f3;"></span>
            </p>
            <p id="p2">
                <font>宽度:</font>
                <span>100px</span>
                <span>200px</span>
                <span>300px</span>
            </p>
            <p id="p3">
                <font>高度:</font>
                <span>100px</span>
                <span>200px</span>
                <span>300px</span>
            </p>
            <button style="margin-left:45%;" id="done">完成</button>
        </div>
    </div>
    <button id="btn">设置</button>


CSS:


*{margin:0;padding:0}
#box{width:100px;height:100px;border:2px solid #eee;border-radius:10px;background-color:red}
#eject{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none}
#set{width:230px;height:150px;background:#fff;border-radius:8px;position:absolute;top:50%;left:50%;margin-top:-75px;margin-left:-115px;font-size:14px;font-family:"Microsoft yahei"}
#set p{height:40px;line-height:40px}
#set p font{margin-left:10px;font-weight:700}
#set p span{margin-left:10px;cursor:pointer}
#set p span:hover{color:#ff5722}
#p1 span{display:inline-block;width:30px;height:20px;margin-left:15px}
#btn{border:0;outline-style:none;background:#3cbbf1;border:1px solid #3cbbf1;border-radius:5px;color:#fff;margin-top:15px}


JS:


        window.onload=function(){
            var oBtn=document.getElementById("btn");
            var oEject=document.getElementById("eject");
            var oDone=document.getElementById("done");
            var oBox=document.getElementById("box");
            var oSpan=document.getElementsByTagName("span");

            oBtn.onclick=function(){
                oEject.style.display="block" ;
            };
            oDone.onclick=function(){
                oEject.style.display="none" ;
            };

            for (var i=0;i<9;i++)
            {
                if (i>=0 && i<3)
                {
                   oSpan[i].onclick=p1;
                }
                else if (i>=3 && i<6)
                {
                    oSpan[i].onclick=p2;
                }
                else
                {
                    oSpan[i].onclick=p3;
                }
            }

            function p1 (){
                oBox.style.background = this.style.background;
            };
            function p2 (){
                oBox.style.width= this.innerHTML;
            }
            function p3 (){
                oBox.style.height=this.innerHTML;
            }
        }


DEMO演示