一、問答

數組方法里push、pop、shift、unshift、join、split分別是什么作用。（*）

• 棧方法
  push和pop都為棧方法，index和length會自動改變，它能夠讓我們像使用堆棧那樣先入后出使用數組。

• push
  使用push可以在數組最后添加一個或多個元素，并且返回新數組的長度，該方法會改變原來的數組。

  
  
  push測試
  
  

  還可以將push用來給一個數組添加另一個數組的所有元素。

  
  
  合并數組

• pop
  pop方法用來刪除數組的最后一個元素，并且返回這個被刪除的元素，該方法會改變原來的數組。

  
  
  pop測試
• 隊列方法
  shift和unshift是先入先出的模擬隊列方法，index和length會自動改變。

• shift
  shift方法相當于把數組整體往左移一位，這樣就擠掉了第一個數，所以該方法可以刪除數組中的第一個元素，也就是index最小的元素，并且后面元素的index和數組的length會自動減一。該方法會返回被刪除的元素。

  
  
  shift測試

• unshift
  與shift對應的就是unshift，unshift方法相當于把數組往右移位（這樣移動的前幾位就空了），并且把括號里的數給空出來的那幾位。所以unshift()
  方法可以在數組的開頭添加一個或者多個元素，并返回數組新的 length 值。

  
  
  unshift測試

• join
  join()方法是把數組元素（對象調用其toString()方法）使用參數作為連接符連接成一字符串，該方法不會修改原數組內容。其中作為連接符的參數可以指定，如果不寫，默認就是逗號。

  
  
  join測試
  
  

  join()方法還可以用于模板語言，把數據拼裝成html字符串，放于頁面展示。

var scores = [100,99,69,70];
var htmls = [];
htmls.push('<div class="ct">');
for (var i=0;i<scores.length-1;i++) {
    htmls.push('<div class="box">'+scores[i]+'</div>');
}
htmls.push('</div>');
console.log(htmls.join('')); 

join使用場景

• split
  split后面括號里的參數會從字符串中被移除，返回存進一個數組當中的子字符串。如果忽略參數，則返回原字符串。如果參數是一個空字符串，則原字符串將被轉換為由字符串中字符組成的一個數組。
  split()方法通過把字符串分割成子字符串來把一個 String對象分割成一個字符串數組。返回一個數組，這樣分割之后就可以使用一些數組的方法。
  
  split測試

補充：

• splice
  splice()方法用于一次性解決數組添加、刪除，會自動調整索引和length，該方法有三個參數，依次為：
• 開始索引位置
  從數組的哪一位開始修改內容。如果超出了數組的最大索引值，則從數組末尾開始添加內容；如果是負值，則表示從數組末位開始的第幾位。
• 刪除元素的位移
  表示要移除位數的個數。如果為0，則可以達到插入的效果，而第三個參數就是要插入的數。如果第二個參數大于從索引位置（第一個參數）開始之后的元素總數，那么從索引位置開始之后的元素都會刪除（包含索引位置的元素）。

• 插入的新元素，當然也可以寫多個。若不寫，就是刪除元素。

  
  
  splice舉例
  
  

  替換元素（需要注意一下細節）：

  
  
  splice替換元素
  
  splice的第一個參數是絕對索引值，而不是相對于數組索引，第二個參數并不是刪除元素的個數，而是刪除動作執行多少次，并不是按數組實際索引移動，而是連續移動。所以當索引值不是從0開始時，需要注意。
  
  索引不是從0開始時splice刪除

• reverse
  將數組逆序，它會改變原數組。這里也需要注意當索引不是從0開始時的情況。

  
  
  reverse逆序
• sort
  sort方法用于對數組進行排序，當沒有參數的時候會按字母表升序排序，如果含有undefined會被排到最后面。sort方法會改變原數組。
  
  sort排序
  
  這個結果是意料之中的，因為sort默認按照字符串的Unicode位點排序。比如說上面的10和11，先比較第一位，誰小誰就在前面，如果相等再比較第二位。
  如果我們要實現真正大小的排序，就需要傳入自定義排序函數。
  
  自定義排序
  
  如果返回的是true，則進行調換。所以return v2-v1;，就是從大到小排序。

二、代碼

數組

1.用 splice 實現 push、pop、shift、unshift方法 （***）

• push

function push(arr,val) {
    arr.splice(arr.length,0,val);
    return arr.length;
}

用splice實現push

• pop

function pop(arr) {
    return arr.splice(arr.length-1,1)[0];//之所以加個索引值0，是為了和pop的返回值相同，因為splice刪除時返回的是刪除元素（數組形式），此時這里只有一個元素，所以索引值為0的元素就是刪除的元素。
}

用splice實現pop

• shift

function shift(arr) {
    return arr.splice(0,1)[0];
}

用splice實現shift

• unshift

function unshift(arr,val) {
    arr.splice(0,0,val);
    return arr.length;
}

用splice實現unshift

這里需要注意一下push、pop、shift、unshift和splice的返回值的區別。push和unshift返回的是新數組的長度值length，pop和shift返回的是被刪除的元素（不是數組形式顯示）。splice插入元素時，返回的是空數組（以數組的形式顯示）；替換元素時，返回的是被替換的元素；刪除元素時，返回的是插入元素（以數組的形式顯示）。

2.使用數組拼接出如下字符串 （***）

var prod = { 
    name: '女裝', 
    styles: ['短款', '冬季', '春裝']
};
function getTplStr(data) {
//todo...
};
var result = getTplStr(prod); //result為下面的字符串

<dl class="product"> 
    <dt>女裝</dt> 
    <dd>短款</dd> 
    <dd>冬季</dd> 
    <dd>春裝</dd>
</dl>

實現的方式如下：

var prod = { 
    name: '女裝', 
    styles: ['短款', '冬季', '春裝']
};
function getTplStr(data) {
    var htmls = [];
    htmls.push('<dl class="product">');  //這里不需要加換行符，拼接完html字符串后一般會放到頁面。加‘\n’不但沒有意義，還會帶來問題。
    htmls.push('<dt>'+data.name+'</dt>');
    for(var i=0;i<data.styles.length;i++){
        htmls.push('<dd>'+data.styles[i]+'</dd>');
    }
    htmls.push('</dl>');
    console.log(htmls.join(''));
};
var result = getTplStr(prod);

運行結果

3.寫一個find函數，實現下面的功能 （***）

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

• 實現方式1：

var arr = [ "test", 2, 1.5, false ];
function find(arr,val) {
    for (var i=0;i<arr.length;i++) {
        if (arr[i] === val) {
            console.log(i);
            return i;
        }
    }
    console.log(-1);
}
find(arr, "test"); // 0
find(arr, 2); // 1
find(arr, 0); // -1

運行結果

• 實現方式2（利用ES5的.indexOf(element)方法）：

var arr = [ "test", 2, 1.5, false ];
function find(arr,val){
    console.log(arr.indexOf(val));
}
find(arr, "test") // 0
find(arr, 2) // 1
find(arr, 0) // -1

運行結果

4.寫一個函數filterNumeric，把數組 arr 中的數字過濾出來賦值給新數組newarr， 原數組arr不變 （****）

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

實現方式：

arr = ["a", "b", 1, 3, 5, "b", 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;
}
newarr = filterNumeric(arr);

運行結果

5.對象obj有個className屬性，里面的值為的是空格分割的字符串(和html元素的class特性類似)，寫addClass、removeClass函數，有如下功能：(****)

var obj = {
  className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因為open已經存在，所以不會再次添加open
addClass(obj, 'me') // me不存在，所以 obj.className變為'open menu new me'
console.log(obj.className)  // "open menu new me"

removeClass(obj, 'open') // 去掉obj.className里面的 open，變成'menu new me'
removeClass(obj, 'blabla')  // 因為blabla不存在，所以此操作無任何影響

• 實現方式1：

var obj = {
    className: 'open menu'
}
function addClass(obj,val) {
    var strName = obj.className.split(' ');
    for (var i = 0; i < strName.length; i++) {
        if (strName[i] === val) {
            console.log(val + ' already exists')
            return
        } 
    }
    strName.push(val);
    obj.className = strName.join(' ')
}
function removeClass(obj, val) {
    var strName = obj.className.split(' ')
    for (var i = 0; i< strName.length; i++) {
        if (strName[i] === val) {
            strName.splice(i,1)
            i--  //splice刪除之后，strName.length減少1
            obj.className = strName.join(' ')
            return obj.className
        }
    }
    console.log(val + ' does not exists')
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因為open已經存在，所以不會再次添加open
addClass(obj, 'me') // me不存在，所以 obj.className變為'open menu new me'
console.log(obj.className)  // "open menu new me"
removeClass(obj, 'open') // 去掉obj.className里面的 open，變成'menu new me'
removeClass(obj, 'blabla') // 因為blabla不存在，所以此操作無任何影響
console.log(obj.className);

運行結果

• 實現方式2（利用ES5的indexOf方法，不過這里需要注意，對象里面不能有重復的元素，因為indexOf查詢到第一個滿足條件之后就會返回索引值。）：

var obj = {
    className: 'open menu'
}
function addClass(obj, val) {
    var strName = obj.className.split(' ')
    if(strName.indexOf(val) === -1) {
        strName.push(val)
        obj.className = strName.join(' ')
        return obj.className
    }else {
        console.log(val + ' already exists')    
        }
}
function removeClass(obj, val) {
    var strName = obj.className.split(' ')
    if (strName.indexOf(val) != -1) {
        strName.splice(strName.indexOf(val), 1)
        obj.className = strName.join(' ')
        return obj.className
    }else {
        console.log(val + ' does not exist')
        }
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因為open已經存在，所以不會再次添加open
addClass(obj, 'me') // me不存在，所以 obj.className變為'open menu new me'
console.log(obj.className)  // "open menu new me"
removeClass(obj, 'open') // 去掉obj.className里面的 open，變成'menu new me'
removeClass(obj, 'blabla')  // 因為blabla不存在，所以此操作無任何影響

運行結果

6.寫一個camelize函數，把my-short-string形式的字符串轉化成myShortString形式的字符串，如 (***)

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

實現方式：

function camelize(val) {
    var arr = val.split('-')
    if (arr.length === 1) {
        return val
    }
    for (var i =1; i < arr.length; i++) {
        arr[i] = arr[i][0].toUpperCase().concat(arr[i].substring(1)) //substring(1)是把第一個字母截取掉
        }
    return arr.join('')
}
camelize("background-color") //'backgroundColor'
camelize("list-style-image") //'listStyleImage'

運行結果

7.如下代碼輸出什么？為什么? (***)

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

彈窗顯示undefined，控制臺輸出hello hunger valley。

arr = ["a", "b"]; //聲明arr并賦值
arr.push( function() { alert(console.log('hello hunger valley')) } ); //push方法把function() { alert(console.log('hello hunger valley')) }放入arr數組中，作為最后一個元素
arr[arr.length-1]() //顯示arr數組中的最后一個元素，并且執行。控制臺輸出hello hunger valley。alert里面的console.log返回的是undefined，所以彈窗顯示undefined。

8.寫一個函數filterNumericInPlace，過濾數組中的數字，刪除非數字。要求在原數組上操作 (****)

arr = ["a", "b", 1, 3, 4, 5, "b", 2]; //對原數組進行操作，不需要返回值
filterNumericInPlace(arr);
console.log(arr) // [1,3,4,5,2]

• 錯誤示例
  下面是我第一遍寫的代碼，可以看出結果是錯誤的。為什么呢？
  就拿下面的arr來說，第一個是字符串，不是數字，滿足if條件，利用splice把a刪除了。因為splice會改變原數組，此時arr所有的元素整體往前移一位（比如此時b的索引值變成1）。第二遍循環，i加一變為1，從第二個元素開始，所以很顯然b就漏掉沒有進行判斷了。所以下面的結果也是預料之中的。

  
  
  錯誤示例
• 實現方式1：
  當在循環語句中滿足條件，把元素刪除之后，讓i減一就可以正確的得出結果了。

function filterNumericInPlace(val) {
    for (var i = 0; i < val.length; i++) {
        if (typeof val[i] !== 'number'){
            val.splice(i,1)
            i--
        }
    }
}
arr = ["a", "b", 1, 3, 4, 5, "b", 2] //對原數組進行操作，不需要返回值
filterNumericInPlace(arr)
console.log(arr) // [1,3,4,5,2]

運行結果

• 實現方式2：
  按照這么一想，其實我們從后面開始循環判斷也是可以的，因為它不會影響到沒有判斷的元素。它移動的位置只是已經判斷過的元素，前面的元素并不會受到影響。

function filterNumericInPlace(val) {
    for (var i = val.length-1; i >= 0; i--) {
        if (typeof val[i] !== 'number'){
            val.splice(i,1)
        }
    }
}
arr = ["a", "b", 1, 3, 4, 5, "b", 2] //對原數組進行操作，不需要返回值
filterNumericInPlace(arr)
console.log(arr) // [1,3,4,5,2]

9.寫一個ageSort函數實現數組中對象按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 ]

實現方式：

function ageSort(val) {
    val.sort(function(a,b) { //sort方法用于對數組進行排序，當里面沒有參數的時候是按照字母順序排序的，所以我們需要傳入自定義的排序函數
        return a.age - b.age //結果為true時，調換順序。換成 b.age - a.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 ]
console.log(people)

運行結果

10.寫一個filter(arr, func)函數用于過濾數組，接受兩個參數，第一個是要處理的數組，第二個參數是回調函數(回調函數遍歷接受每一個數組元素，當函數返回true時保留該元素，否則刪除該元素)。實現如下功能： （****）

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

實現方式：

function filter(arr, func) {
    for (var i = arr.length-1; i >= 0; i--) {
        if (!fun(arr[i])) {
            arr.splice(i,1) //若函數返回值不為真，則刪除元素
        }
    }
return arr    
}
function isNumeric (el) {
    return typeof el === 'number'; 
}
arr = ["a",3,4,true, -1, 2, "b"]
arr = filter(arr, isNumeric) ; // arr = [3,4,-1, 2],  過濾出數字
arr = filter(arr, function(val) { return  typeof val === "number" && val > 0 });  // arr = [3,4,2] 過濾出大于0的整數

運行結果

字符串

1.寫一個ucFirst函數，返回第一個字母為大寫的字符（***）

ucFirst("hunger") == "Hunger"

實現方式：

function ucFirst(val) {
    return val[0].toUpperCase().concat(val.substring(1)) 
}
ucFirst('hunger')

運行結果

2.寫一個函數truncate(str, maxlength), 如果str的長度大于maxlength，會把str截斷到maxlength長，并加上...，如 （****）

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

實現方式：

function truncate(str, maxlength) {
    if (str.length > maxlength) {
        return str.substring(0, maxlength).concat('...')
    }else {
        return str
        }
}
truncate("hello, this is hunger valley,", 10)
truncate("hello world", 20)

運行結果

數學函數

1.寫一個函數，獲取從min到max之間的隨機整數，包括min不包括max（***）

function getRandom(min, max) {
    console.log(min + Math.floor(Math.random()*(max - min)))  //floor返回小于參數值的最大整數
}

2.寫一個函數，獲取從min都max之間的隨機整數，包括min包括max （***）

function getRandom(min, max) {
    console.log(min + Math.floor(Math.random()*(max - min + 1)))
}

3.寫一個函數，獲取一個隨機數組，數組中元素為長度為len，最小值為min，最大值為max(包括)的隨機整數 （***）

function getRandomArr(min, max, len) {
    var result = []
    for (var i = 0; i < len; i++) {
        result[i] = min + Math.floor(Math.random()*(max - min + 1))
    }
    return result
}

4.寫一個函數，生成一個長度為 n 的隨機字符串，字符串字符的取值范圍包括0到9，a到 z，A到Z。

function getRandStr(len){
  //todo...
}
var str = getRandStr(10); // 0a3iJiRZap

實現方式：

function getRandomStr(n) {
    var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    var result = ' '
    for (var i = 0; i < n; i++) {
        result = str[Math.floor(Math.random()*str.length)]
    }
return result
}

感覺邏輯思維能力還是不夠啊。經常想不到方法或者思考不周全。。。。。