前端基本功：JS必记知识点+案例（四）循环、数组

面试常考点TAB切换案例（重点面试案例的复习）：

tab复习.gif

    
    
    
    



      

            新闻
            体育
            娱乐
            八卦
      
      

            

                  
新闻模块
                  
 体育模块
                  
 娱乐模块
                  
八卦模块
             
      

以上方法仅限一个TAB栏的使用。而多个TAB栏时就需要封装如下：

    
    
    
    



      

            新闻
            体育
            娱乐
            八卦
      
      

            

                  
新闻模块
                  
 体育模块
                  
 娱乐模块
                  
八卦模块
             
      



      

            新闻
            体育
            娱乐
            八卦
      
      

            

                  
新闻模块
                  
 体育模块
                  
 娱乐模块
                  
八卦模块
             
      



      

            新闻
            体育
            娱乐
            八卦
      
      

            

                  
新闻模块
                  
 体育模块
                  
 娱乐模块
                  
八卦模块
             
      

两个小循环

◆循环 for(初始化; 条件; 增量){}
◆while() 当 do {} while()
◆ while(条件) { 语句 }

案例：从1+100是 5050

do while 至少执行一次 while 不一定

多分支语句 switch

switch 跟 if else if 和 else if else 几乎一样的 但是switch效率更好。
作用其实就是 ： 多选1 ·· 从多个里面选1个 。

语法格式：
switch(参数)
{
case 参数1：
语句;
break; 退出的意思
case 参数2：
语句;
break; 退出的意思

........
default: 默认的
语句;
}

案例：查询物品价格

查询价格.gif

源码：

    
    
    


 查询价格

下拉菜单的事件 onchange

sele.onchange = function(){}
当改变的时候 事件

案例：下拉菜单换肤

下拉菜单换肤.gif

案例所需素材：链接： http://pan.baidu.com/s/1gfJnD4Z 密码：pemq

    
    
    
    



      春意绵绵
      夏日炎炎
      秋风瑟瑟
      冬雪皑皑

案例：腾讯网的星座运势

星座运势

    
    
    
    



    
星座运势
     

            

                  

                  

                        
                              白羊座 03.21-04.19
                              金牛座 04.20-05.29                                   
                              双子座 05.30-06.29
                        
                        
今日运势：
                               
                                    
                               
                         
                        
                  
     
     

     今天你的直觉灵感非常丰富，能够帮你洞悉到很多真相，消化心中的一些秘密心事。然而今天你也心情...[详细]
     

数组常用方法

◆ push、pop
◆shift、unshift
◆concat、join、split

• 添加 数组

var arr =[1,3,5];

1. push() ★★★★★ 后面推进去

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
push 推进去 放
var arr =[1,3,5] → arr.push(7) → 结果变成 : [1,3,5,7];

2.unshift() 从数组的前面放入

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
var arr = [1,3,5] → arr.unshift(0) → 结果变成 [0,1,3,5]

注意：var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是 数组的长度 4

• 删除数组内容

1. pop() 删除最后一个元素

pop() 移除最后一个元素
返回值 是 返回最后一个值
var arr = [1,3,5] → arr.pop() → 结果 [1,3]

2. shift() 删除第一个元素

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
var arr = [1,3,5] → arr.shift() → 结果 [3,5]

• 连接两个数组

concat()
该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本
var aa = [1,3,5]; var bb = [“a”,”b”,”c”];

aa.concat(bb);

结果：  [1,3,5,“a”,”b”,”c”];

• join() 把数组转换为字符串

join()
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。

语法
arrayObject.join(separator)
数组名.join(符号)

数组转换为字符串
参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3];
console.log(arr.join(“-”)) 结果就是： 1-2-3 字符串

• 把字符串转换为数组 split()

join <=> split
split() 方法用于把一个字符串分割成字符串数组

语法
stringObject.split(separator,howmany)

参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
howmany 可选。该参数可指定返回的数组的最大长度

两个符号一致

上述源码：