一、數(shù)組方法里push、pop、shift、unshift、join、split分別是什么作用。

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

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ù)組前開頭新添一個(gè)或者多個(gè)元素，也會(huì)返回新數(shù)組的長度；

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) //剩余長度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è)字符串，多用于給變量賦值；
通過傳入的分隔符進(jìn)行分隔的，分隔符可以是空格,橫線等；
如果（）括號(hào)里不傳參數(shù)，則默認(rèn)以逗號(hào)，作為分割；
注意：無論傳參后結(jié)果如何，都不會(huì)修改原數(shù)組內(nèi)容。

var a = [1,2,3,4];
console.log(a.join());// 不填寫參數(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ù)組的長度為1.
如果傳入了參數(shù)（一般以逗號(hào)或者字符串中出現(xiàn)的字符分割）就以該參數(shù)分割數(shù)組。
留意：這兩個(gè)參數(shù)，第一個(gè)參數(shù)作為分隔作用來分隔元素，第二個(gè)是分割出來的數(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))//分割出來的數(shù)組項(xiàng)的前2個(gè)["1", "a"]
console.log(str.split("",4))//分割出來的數(shù)組項(xiàng)的前4個(gè)["1", "a", "2", "b"]
console.log(str.split(","))//因?yàn)樵址疅o逗號(hào)，所以以逗號(hào)分割也無效
console.log(str.split("-"))//因?yàn)樵址?逗號(hào)，所以以-分割也無效
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ù)來判斷大小，結(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(開始下標(biāo)，刪除個(gè)數(shù)，插入元素(可以是多個(gè)))

//splice(開始下標(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

• 寫一個(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

答題：
//兼容寫法
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

• 寫一個(gè)函數(shù)filterNumeric，把數(shù)組 arr 中的數(shù)字過濾出來賦值給新數(shù)組newarr， 原數(shù)組arr不變。

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

模擬過濾器
方法一：用新數(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
}

• 對象obj有個(gè)className屬性，里面的值為的是空格分割的字符串(和html元素的class特性類似)，寫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不存在，所以此操作無任何影響

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è)沒注意到
          }
       } 
       obj.className = classArr.join(' '); 
}

• 寫一個(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)測試發(fā)現(xiàn)平常寫alert(console.log())也會(huì)彈出undefined，所以彈框結(jié)果如此

• 寫一個(gè)函數(shù)filterNumericInPlace，過濾數(shù)組中的數(shù)字，刪除非數(shù)字。要求在原數(shù)組上操作

題目：
arr = ["a", "b", 1, 3, 4, 5, "b", 2];//對原數(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)致檢測b是無法被取出,過程是0→匹配對→再i--變成負(fù)1→再i++→i重回0，所以需要i-- ,回到原始位置,再進(jìn)行條件判斷

filter.png

• 寫一個(gè)ageSort函數(shù)實(shí)現(xiàn)數(shù)組中對象按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()方法巧妙之處能按需求的那部分來為數(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)

• 寫一個(gè)filter(arr, func)函數(shù)用于過濾數(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], 過濾出數(shù)字
arr = filter(arr, function(val) { 
      return typeof val === "number" && val > 0 
}); // arr = [3,4,2] 過濾出大于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ì)跳過刪掉的元素的下一元素 
           } 
      } 
      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], 過濾出數(shù)字
arr = filter(arr, function(val) { return val > 0 }); // arr = [2] 過濾出大于0的整數(shù)

三.字符串

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

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

解答：

substr和substring方法.png

簡單粗暴

str方法.png

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

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

解題

QQ截圖20160927181922.png

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

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

//過程
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)

• 寫一個(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

• 寫一個(gè)函數(shù)，獲取一個(gè)隨機(jī)數(shù)組，數(shù)組中元素為長度為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]

• 寫一個(gè)函數(shù)，生成一個(gè)長度為 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"