一、數(shù)組方法里push藤乙、pop艺栈、shift、unshift湾盒、join、split分別是什么作用诅妹。

(1).arr.push()用于向數(shù)組的末尾新添加一個(gè)或者多個(gè)元素罚勾，本身會(huì)返回新數(shù)組的長(zhǎng)度

var arr = [1,2,3]
arr.push(4,5)
console.log(arr)  //[1,2,3,4,5]
console.log(arr.length)  //  7
console.log(arr.push(6,7))  //7    本身返回arr.length

arr.push('str')
console.log(arr)  //[1, 2, 3, 4, 5, 6, 7, "str"]

arr.push([1,2,3])  
console.log(arr)   //[1, 2, 3, 4, 5, 6, 7, "str", [1, 2, 3]]

arr.push(['a','b'])
console.log(arr)  // [1, 2, 3, 4, 5, 6, 7, "str", [1, 2, 3], ["a", "b"]]

arr.push([c,d,e])
console.log(arr)  //報(bào)錯(cuò)

(2).arr.unshift()用于在數(shù)組前開(kāi)頭新添一個(gè)或者多個(gè)元素，也會(huì)返回新數(shù)組的長(zhǎng)度吭狡；

var arr = [3,4,5]
arr.unshift(2)
console.log(arr)//[2, 3, 4, 5]
console.log(arr.length)  //4
console.log(arr.unshift(2))  //4  返回arr.length

arr.unshift(-1,0,1)
console.log(arr)  //[-1, 0, 1, 2, 3, 4, 5]

arr.unshift([-3,-2])
console.log(arr)  //[[-3, -2], -1, 0, 1, 2, 3, 4, 5]

arr.unshift  //(['hi','hello'])
console.log(arr)  //[["hi", "hello"], [-3, -2], -1, 0, 1, 2, 3, 4, 5]

(3).arr.pop()用于刪除數(shù)組最后一位元素尖殃，并返回刪除的值；

var arr = [1,2,3] 
console.log(arr.pop()) //刪了最位一位划煮，返回刪除的值3
console.log(arr)  //[1, 2]
console.log(arr.pop()) //返回刪除的值2
console.log(arr.length) //剩余長(zhǎng)度1

(4)arr.shift()用于刪除數(shù)組第一位元素送丰，并返回刪除的值；

var a = [1,2,3,4];
a.shift();            //返回刪除的值 1弛秋；
console.log(a);     //  a = [2,3,4]
console.log(a.length);  //  3

(5)arr.join()方法——把數(shù)組變成字符串
連接數(shù)組中的元素器躏，有且只返回一個(gè)字符串，多用于給變量賦值蟹略；
通過(guò)傳入的分隔符進(jìn)行分隔的登失，分隔符可以是空格,橫線等；
如果（）括號(hào)里不傳參數(shù)挖炬，則默認(rèn)以逗號(hào)揽浙，作為分割；
注意：無(wú)論傳參后結(jié)果如何，都不會(huì)修改原數(shù)組內(nèi)容馅巷。

var a = [1,2,3,4];
console.log(a.join());// 不填寫(xiě)參數(shù)時(shí)默認(rèn)逗號(hào)作為連接符 "1,2,3,4"
console.log(a) // 依然是[1,2,3,4]

console.log(a.join("")); //參數(shù)為空字符串時(shí)輸出  "1234"
console.log(a.join(" "))  //參數(shù)時(shí)空格字符串時(shí)輸出 "1 2 3 4"
console.log(a.join("-"));  // "1-2-3-4"
console.log(a.join("@"))  //"1@2@3@4"
console.log(typeof a);  //  object
console.log(a);       // [1,2,3,4] 不會(huì)修改原數(shù)組內(nèi)容

(6)str.split()方法——把字符串變成數(shù)組
split()與join()正好相反膛虫，可以把字符串分割成數(shù)組，而且也不會(huì)更改字符串本身钓猬，只是輸出值傳遞給變量稍刀。
如果不傳入?yún)?shù)，那么它會(huì)把字符串完整的轉(zhuǎn)換為數(shù)組逗噩，并且數(shù)組的長(zhǎng)度為1.
如果傳入了參數(shù)（一般以逗號(hào)或者字符串中出現(xiàn)的字符分割）就以該參數(shù)分割數(shù)組掉丽。
留意：這兩個(gè)參數(shù)，第一個(gè)參數(shù)作為分隔作用來(lái)分隔元素异雁，第二個(gè)是分割出來(lái)的數(shù)組項(xiàng)個(gè)數(shù)捶障。

var str = "1a2b3c4d"
console.log(str.split())//默認(rèn)不傳參["1a2b3c4d"]
console.log(str.split("")) //參數(shù)為空字符串時(shí)輸出["1", "a", "2", "b", "3", "c", "4", "d"]
console.log(str.split(" "))//參數(shù)時(shí)空格字符串時(shí)輸出["1a2b3c4d"]
console.log(str.split("",2))//分割出來(lái)的數(shù)組項(xiàng)的前2個(gè)["1", "a"]
console.log(str.split("",4))//分割出來(lái)的數(shù)組項(xiàng)的前4個(gè)["1", "a", "2", "b"]
console.log(str.split(","))//因?yàn)樵址疅o(wú)逗號(hào)，所以以逗號(hào)分割也無(wú)效
console.log(str.split("-"))//因?yàn)樵址?逗號(hào)纲刀，所以以-分割也無(wú)效
console.log(str)  //依然是"1,2,3,4" 
console.log(typeof str);//"string"

var str2 = "1:2:3:4" 
console.log(str2.split(':'))//["1", "2", "3", "4"]

var str3 = "1|2|3|4"
console.log(str3.split('|'))//["1", "2", "3", "4"]

(7)arr.reverse()顛倒數(shù)組中元素的順序项炼，修改并返回改變后的數(shù)組。

var arr = [1,2,3]
arrr.reverse()//[3,2,1]
console.log(arr)//[3,2,1]

(8)arr.sort()數(shù)組排序示绊，修改并返回改變后的數(shù)組锭部。
sort()是接受一個(gè)比較函數(shù)，用這個(gè)函數(shù)來(lái)判斷大小面褐，結(jié)果是字符的排序拌禾，不是數(shù)字大小的排序

var arr = [1,-2,3,-4]
arr.sort()  //[-2, -4, 1, 3]
console.log(arr)  //[-2, -4, 1, 3]

二、代碼題

1.數(shù)組

• 用 splice 實(shí)現(xiàn) push展哭、pop湃窍、shift、unshift方法

arr.splice()給數(shù)組添加或者刪除元素,同時(shí)修改著原數(shù)組
splice作用：用于數(shù)組的刪除/插入/替換
splice()方法始終都會(huì)返回一個(gè)數(shù)組
splice(開(kāi)始下標(biāo)匪傍，刪除個(gè)數(shù)您市，插入元素(可以是多個(gè)))

//splice(開(kāi)始下標(biāo)，刪除個(gè)數(shù)役衡，插入元素(可以是多個(gè)))
var arr = [1,2,3,4]
arr.splice(1,2);  //[2,3]
console.log(arr)  //[1,4]
var arr2 = [1,2,3,4]
arr2.splice(1,2,'a','b','c') //[2,3]
console.log(arr)  //[1,'a','b','c',4]

• 用splice 實(shí)現(xiàn) push方法茵休，末位添元素

var a = [1,2,3]
function push(arr,val){
    arr.splice(arr.length,0,val)
    return arr.length
}
push(a,1)//4
console.log(a)//[1, 2, 3, 1]

• 用splice 實(shí)現(xiàn)pop方法，刪末位元素

var a = [1,2,3]
function pop(arr){
    arr.splice(arr.length-1,1)
    return arr.length
}
pop(a)//2
console.log(a)//[1, 2]
pop(a)//1
console.log(a)//[1]

• 用splice實(shí)現(xiàn)shift方法手蝎，刪首位元素

var a = [1,2,3]
function shift(arr){
    arr.splice(0,1)
    return arr.length
}
shift(a)//2
console.log(a)//[2,3]
shift(a)//1
console.log(a)//[3]

• 用splice實(shí)現(xiàn)unshift方法榕莺，首位添元素

var a = [3,4,5]
function unshift(arr,val){
    arr.splice(0,0,val)
    return arr.length
}
unshift(a,2)//4
console.log(a)//[2, 3, 4, 5]
unshift(a,1)//5
console.log(a)//[1, 2, 3, 4, 5]

• 使用數(shù)組拼接出如下字符串

題目：
var prod = { 
      name: '女裝', 
      styles: ['短款', '冬季', '春裝']
};
function getTpl(data){ 
      //todo...
};
var result = getTplStr(prod); //result為下面的字符串
<dl class="product"> 
      <dt>女裝</dt> 
      <dd>短款</dd> 
      <dd>冬季</dd> 
      <dd>春裝</dd>
</dl>

方法一：先數(shù)組后轉(zhuǎn)字符串

字符串拼接1.png

方法二：直接拼接字符

拼接字符串2.png

• 寫(xiě)一個(gè)find函數(shù)，實(shí)現(xiàn)下面的功能

題目：
var arr = [ "test", 2, 1.5, false ]
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1

答題：
//兼容寫(xiě)法
function find(arr,val){
    if(arr.indexOf){
       return arr.indexOf(val)
    }
    for(var i=0;i<arr.length;i++){
        if(arr[i] === val){
           return i
        } 
    }
    return -1
}
console.log(find(arr, "test"))//0
console.log(find(arr, 2))//1
console.log(find(arr, 0))//-1

88.png

• 寫(xiě)一個(gè)函數(shù)filterNumeric棵介，把數(shù)組 arr 中的數(shù)字過(guò)濾出來(lái)賦值給新數(shù)組newarr帽撑， 原數(shù)組arr不變。

題目：
arr = ["a", "b", 1, 3, 5, "b", 2];
newarr = filterNumeric(arr); // [1,3,5,2]

模擬過(guò)濾器
方法一：用新數(shù)組
arr = ["a", "b", 1, 3, 5, "b", 2];
console.log(filterNumeric(arr)); // [1,3,5,2]
function filterNumeric(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
       if(typeof arr[i] === "number"){
           newArr.push(arr[i])        
        } 
    }  
    return newArr
}
方法二：若要用原數(shù)組
arr = ["a", "b", 1, 3, 5, "b", 2];
console.log(filterNumeric(arr)); // [1,3,5,2]
function filterNumeric(arr){
    for(var i=arr.length-1;i>=0;i--){
        if(typeof arr[i] !== "number"){
           arr.splice(i,1)        
         } 
    }  
    return arr
}

• 對(duì)象obj有個(gè)className屬性鞍时，里面的值為的是空格分割的字符串(和html元素的class特性類似)亏拉，寫(xiě)addClass扣蜻、removeClass函數(shù)，有如下功能

題目：
var obj = { 
    className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open') // 因?yàn)閛pen已經(jīng)存在及塘，所以不會(huì)再次添加open
addClass(obj, 'me') // me不存在莽使，所以 obj.className變?yōu)?open menu new me'
console.log(obj.className) // "open menu new me"
removeClass(obj, 'open') // 去掉obj.className里面的 open，變成'menu new me'
removeClass(obj, 'blabla') // 因?yàn)閎labla不存在笙僚，所以此操作無(wú)任何影響

addClass方法一：

addClass(1).png

addClass方法二：

addClass（2）.png

addClass方法三：

addClass（3）.png

removeClass方法一：

removeClass（1）.png

removeClass規(guī)范答案

function removeClass(obj, cls) { 
      var classArr = obj.className.split(' '); 
      for (var i = 0; i < classArr.length; i++) { 
        if (cls === classArr[i]) { 
            classArr.splice(i, 1);
            i--; //這個(gè)沒(méi)注意到
          }
       } 
       obj.className = classArr.join(' '); 
}

• 寫(xiě)一個(gè)camelize函數(shù)芳肌，把my-short-string形式的字符串轉(zhuǎn)化成myShortString形式的字符串，如

題目：
camelize("background-color") == 'backgroundColor'
camelize("list-style-image") == 'listStyleImage'

解答

切割器.png

• 如下代碼輸出什么肋层？為什么?

題目：
arr = ["a", "b"];
arr.push( function() { alert(console.log('hello hunger valley')) } );
arr[arr.length-1]() // ?

結(jié)果

結(jié)果.png

分析：控制臺(tái)打印出hello hunger valley亿笤，alert框彈出undefined。為什么是這個(gè)結(jié)果呢栋猖？
(1)push( function() { alert(console.log('hello hunger valley')) } );就是push一個(gè)匿名函數(shù)放到了數(shù)組arr的最后一項(xiàng)
(2)arr = ["a","b",function() { alert(console.log('hello hunger valley')) }]
(3)arr[arr.length-1]（） 加括號(hào)變成了立即執(zhí)行函數(shù)
(4)所以控制臺(tái)打出 hello hunger valley净薛，也正因?yàn)閏onsole.log只在控制臺(tái)輸出，并不返回值蒲拉，所以報(bào)undefind肃拜。
(5)經(jīng)測(cè)試發(fā)現(xiàn)平常寫(xiě)alert(console.log())也會(huì)彈出undefined，所以彈框結(jié)果如此

• 寫(xiě)一個(gè)函數(shù)filterNumericInPlace雌团，過(guò)濾數(shù)組中的數(shù)字燃领，刪除非數(shù)字。要求在原數(shù)組上操作

題目：
arr = ["a", "b", 1, 3, 4, 5, "b", 2];//對(duì)原數(shù)組進(jìn)行操作锦援，不需要返回值
filterNumericInPlace(arr);
console.log(arr) // [1,3,4,5,2]

解題
function filterNumericInPlace(arr){
    for(var i=0;i<arr.length;i++){
      if(typeof arr[i]!== "number"){
         console.log( arr.splice(i,1))
          i--
        }
    }
}
filterNumericInPlace(arr);
console.log(arr)   //[1,3,4,5,2]
重點(diǎn)是i--,因?yàn)檠h(huán)第一遍,如果typeof arr[0]≠number,i=i+1,
導(dǎo)致檢測(cè)b是無(wú)法被取出,過(guò)程是0→匹配對(duì)→再i--變成負(fù)1→再i++→i重回0猛蔽，所以需要i-- ,回到原始位置,再進(jìn)行條件判斷

filter.png

• 寫(xiě)一個(gè)ageSort函數(shù)實(shí)現(xiàn)數(shù)組中對(duì)象按age從小到大排序

題目：
var john = { name: "John Smith", age: 23 }
var mary = { name: "Mary Key", age: 18 }
var bob = { name: "Bob-small", age: 6 }
var people = [ john, mary, bob ]
ageSort(people) // [ bob, mary, john ]

sort()方法巧妙之處能按需求的那部分來(lái)為數(shù)組作排序
var john = { name: "John Smith", age: 23 };
var mary = { name: "Mary Key", age: 18 };
var bob = { name: "Bob-small", age: 6 };
var people = [ john, mary, bob ]; //people本身是數(shù)組
function ageSort(people){
    people.sort(function(v1,v2){
        return v1.age - v2.age;
    });
}
console.log(people);// [ bob, mary, john ]
ageSort(people)

• 寫(xiě)一個(gè)filter(arr, func)函數(shù)用于過(guò)濾數(shù)組，接受兩個(gè)參數(shù)灵寺，第一個(gè)是要處理的數(shù)組枢舶，第二個(gè)參數(shù)是回調(diào)函數(shù)(回調(diào)函數(shù)遍歷接受每一個(gè)數(shù)組元素，當(dāng)函數(shù)返回true時(shí)保留該元素替久，否則刪除該元素)。實(shí)現(xiàn)如下功能：

題目：
function isNumeric (el){ 
      return typeof el === 'number'; 
}
arr = ["a",3,4,true, -1, 2, "b"]
arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2], 過(guò)濾出數(shù)字
arr = filter(arr, function(val) { 
      return typeof val === "number" && val > 0 
}); // arr = [3,4,2] 過(guò)濾出大于0的整數(shù)

//定義函數(shù)
function filter(arr, func) { 
      for (var i = 0; i < arr.length; i++) { 
          if (!func(arr[i])) { //不符合數(shù)字的就剔除
                arr.splice(i, 1);
                i -= 1; //剔除之后下標(biāo)減一,否則會(huì)跳過(guò)刪掉的元素的下一元素 
           } 
      } 
      return arr; 
}
//回調(diào)函數(shù)躏尉，條件：符合是數(shù)字
function isNumeric (el){   
      return typeof el === 'number'; 
}
arr = ["a", -1, 2, "b"]
arr = filter(arr, isNumeric) ; // arr = [-1, 2], 過(guò)濾出數(shù)字
arr = filter(arr, function(val) { return val > 0 }); // arr = [2] 過(guò)濾出大于0的整數(shù)

三.字符串

• 寫(xiě)一個(gè) ucFirst 函數(shù)蚯根，返回第一個(gè)字母為大寫(xiě)的字符

題目：ucFirst("hunger") == "Hunger"

解答：

substr和substring方法.png

簡(jiǎn)單粗暴

str方法.png

• 寫(xiě)一個(gè)函數(shù)truncate(str, maxlength), 如果str的長(zhǎng)度大于maxlength摩疑，會(huì)把str截?cái)嗟絤axlength長(zhǎng)噪舀，并加上...

題目：
truncate("hello, this is hunger valley,", 10)) == "hello, thi...";
truncate("hello world", 20)) == "hello world"

解題

QQ截圖20160927181922.png

四.數(shù)學(xué)函數(shù)

• 寫(xiě)一個(gè)函數(shù)，獲取從min到max之間的隨機(jī)整數(shù)怖侦，包括min不包括max

//過(guò)程
function randomNum(min,max){
      var num = Math.floor(Math.random()*(max-min))
      console.log(min+num)
}
randomNum(6,10)// 輸出68998998789787868  
//標(biāo)準(zhǔn)
function randomNum(min,max){
      return Math.floor(Math.random()*(max-min))+Math.floor(min)
}
randomNum(min,max)

• 寫(xiě)一個(gè)函數(shù)教藻，獲取從min都max之間的隨機(jī)整數(shù)距帅，包括min包括max

function randomNum(min,max){
      return Math.floor(Math.random()*(max-min+1))+Math.floor(min)
}
console.log(randomNum(6.2342,10.23432)) //輸出6、8括堤、10碌秸、9绍移、10、6

• 寫(xiě)一個(gè)函數(shù)讥电，獲取一個(gè)隨機(jī)數(shù)組蹂窖，數(shù)組中元素為長(zhǎng)度為len，最小值為min恩敌，最大值為max(包括)的隨機(jī)整數(shù)

function randomNum(len,min,max){
      var newArr = [];
      for(var i=0;i<len;i++){
            randomNum = min+Math.floor(Math.random()*(max-min+1))
            newArr.push(randomNum)
      }
      return newArr
}
console.log(randomNum(4,1,5))
[2, 2, 3, 2]
[5, 2, 3, 2]
[4, 4, 4, 3]
[3, 3, 2, 4]
[1, 4, 2, 3]
[2, 3, 4, 5]

• 寫(xiě)一個(gè)函數(shù)瞬测，生成一個(gè)長(zhǎng)度為 n 的隨機(jī)字符串，字符串字符的取值范圍包括0到9纠炮，a到 z月趟，A到Z。

function getRandStr(len){
      var str="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
      var result = "";
      for(var i=0;i<len;i++){
            result = result+str[Math.floor(Math.random()*str.length)]
      }
      return result
}
var str = getRandStr(10); // "0a3iJiRZap"
var str = getRandStr(6); //"49vAja"