一变汪、問答

數(shù)組方法里push虫埂、pop两疚、shift巫玻、unshift蔬浙、join岂津、split分別是什么作用。（*）

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

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

  
  
  push測試
  
  

  還可以將push用來給一個數(shù)組添加另一個數(shù)組的所有元素耀怜。

  
  
  合并數(shù)組

• pop
  pop方法用來刪除數(shù)組的最后一個元素恢着，并且返回這個被刪除的元素，該方法會改變原來的數(shù)組财破。

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

• shift
  shift方法相當(dāng)于把數(shù)組整體往左移一位左痢，這樣就擠掉了第一個數(shù)靡羡，所以該方法可以刪除數(shù)組中的第一個元素，也就是index最小的元素俊性，并且后面元素的index和數(shù)組的length會自動減一略步。該方法會返回被刪除的元素。

  
  
  shift測試

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

  
  
  unshift測試

• join
  join()方法是把數(shù)組元素（對象調(diào)用其toString()方法）使用參數(shù)作為連接符連接成一字符串，該方法不會修改原數(shù)組內(nèi)容宫峦。其中作為連接符的參數(shù)可以指定岔帽，如果不寫，默認就是逗號导绷。

  
  
  join測試
  
  

  join()方法還可以用于模板語言犀勒，把數(shù)據(jù)拼裝成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后面括號里的參數(shù)會從字符串中被移除贾费，返回存進一個數(shù)組當(dāng)中的子字符串。如果忽略參數(shù)檐盟，則返回原字符串褂萧。如果參數(shù)是一個空字符串，則原字符串將被轉(zhuǎn)換為由字符串中字符組成的一個數(shù)組葵萎。
  split()方法通過把字符串分割成子字符串來把一個 String對象分割成一個字符串數(shù)組导犹。返回一個數(shù)組唱凯，這樣分割之后就可以使用一些數(shù)組的方法。
  
  split測試

補充：

• splice
  splice()方法用于一次性解決數(shù)組添加谎痢、刪除磕昼，會自動調(diào)整索引和length，該方法有三個參數(shù)节猿，依次為：
• 開始索引位置
  從數(shù)組的哪一位開始修改內(nèi)容票从。如果超出了數(shù)組的最大索引值，則從數(shù)組末尾開始添加內(nèi)容沐批；如果是負值纫骑，則表示從數(shù)組末位開始的第幾位蝎亚。
• 刪除元素的位移
  表示要移除位數(shù)的個數(shù)九孩。如果為0，則可以達到插入的效果发框，而第三個參數(shù)就是要插入的數(shù)躺彬。如果第二個參數(shù)大于從索引位置（第一個參數(shù)）開始之后的元素總數(shù)，那么從索引位置開始之后的元素都會刪除（包含索引位置的元素）梅惯。

• 插入的新元素宪拥，當(dāng)然也可以寫多個。若不寫铣减，就是刪除元素她君。

  
  
  splice舉例
  
  

  替換元素（需要注意一下細節(jié)）：

  
  
  splice替換元素
  
  splice的第一個參數(shù)是絕對索引值，而不是相對于數(shù)組索引葫哗，第二個參數(shù)并不是刪除元素的個數(shù)缔刹，而是刪除動作執(zhí)行多少次，并不是按數(shù)組實際索引移動劣针，而是連續(xù)移動校镐。所以當(dāng)索引值不是從0開始時，需要注意捺典。
  
  索引不是從0開始時splice刪除

• reverse
  將數(shù)組逆序鸟廓，它會改變原數(shù)組。這里也需要注意當(dāng)索引不是從0開始時的情況襟己。

  
  
  reverse逆序
• sort
  sort方法用于對數(shù)組進行排序引谜，當(dāng)沒有參數(shù)的時候會按字母表升序排序，如果含有undefined會被排到最后面擎浴。sort方法會改變原數(shù)組员咽。
  
  sort排序
  
  這個結(jié)果是意料之中的，因為sort默認按照字符串的Unicode位點排序退客。比如說上面的10和11骏融，先比較第一位链嘀，誰小誰就在前面，如果相等再比較第二位档玻。
  如果我們要實現(xiàn)真正大小的排序怀泊，就需要傳入自定義排序函數(shù)。
  
  自定義排序
  
  如果返回的是true误趴，則進行調(diào)換霹琼。所以return v2-v1;，就是從大到小排序凉当。

二枣申、代碼

數(shù)組

1.用 splice 實現(xiàn) push、pop看杭、shift忠藤、unshift方法 （***）

• push

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

用splice實現(xiàn)push

• pop

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

用splice實現(xiàn)pop

• shift

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

用splice實現(xiàn)shift

• unshift

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

用splice實現(xiàn)unshift

這里需要注意一下push榨咐、pop、shift谴供、unshift和splice的返回值的區(qū)別块茁。push和unshift返回的是新數(shù)組的長度值length，pop和shift返回的是被刪除的元素（不是數(shù)組形式顯示）桂肌。splice插入元素時数焊，返回的是空數(shù)組（以數(shù)組的形式顯示）；替換元素時轴或，返回的是被替換的元素昌跌；刪除元素時，返回的是插入元素（以數(shù)組的形式顯示）照雁。

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

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>

實現(xiàn)的方式如下：

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);

運行結(jié)果

3.寫一個find函數(shù)，實現(xiàn)下面的功能 （***）

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

• 實現(xiàn)方式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

運行結(jié)果

• 實現(xiàn)方式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

運行結(jié)果

4.寫一個函數(shù)filterNumeric污呼，把數(shù)組 arr 中的數(shù)字過濾出來賦值給新數(shù)組newarr裕坊， 原數(shù)組arr不變 （****）

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

實現(xiàn)方式：

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);

運行結(jié)果

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

var obj = {
  className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因為open已經(jīng)存在，所以不會再次添加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')  // 因為blabla不存在，所以此操作無任何影響

• 實現(xiàn)方式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已經(jīng)存在彼乌，所以不會再次添加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') // 因為blabla不存在慰照，所以此操作無任何影響
console.log(obj.className);

運行結(jié)果

• 實現(xiàn)方式2（利用ES5的indexOf方法，不過這里需要注意琉朽，對象里面不能有重復(fù)的元素毒租，因為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已經(jīng)存在漓骚，所以不會再次添加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')  // 因為blabla不存在蝌蹂，所以此操作無任何影響

運行結(jié)果

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

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

實現(xiàn)方式：

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'

運行結(jié)果

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數(shù)組中齐鲤，作為最后一個元素
arr[arr.length-1]() //顯示arr數(shù)組中的最后一個元素，并且執(zhí)行椒楣「迹控制臺輸出hello hunger valley。alert里面的console.log返回的是undefined捧灰，所以彈窗顯示undefined淆九。

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

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

• 錯誤示例
  下面是我第一遍寫的代碼煌寇，可以看出結(jié)果是錯誤的焕蹄。為什么呢？
  就拿下面的arr來說阀溶，第一個是字符串腻脏，不是數(shù)字鸦泳，滿足if條件，利用splice把a刪除了永品。因為splice會改變原數(shù)組辽故，此時arr所有的元素整體往前移一位（比如此時b的索引值變成1）。第二遍循環(huán)腐碱，i加一變?yōu)?誊垢，從第二個元素開始，所以很顯然b就漏掉沒有進行判斷了症见。所以下面的結(jié)果也是預(yù)料之中的喂走。

  
  
  錯誤示例
• 實現(xiàn)方式1：
  當(dāng)在循環(huán)語句中滿足條件，把元素刪除之后谋作，讓i減一就可以正確的得出結(jié)果了芋肠。

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] //對原數(shù)組進行操作，不需要返回值
filterNumericInPlace(arr)
console.log(arr) // [1,3,4,5,2]

運行結(jié)果

• 實現(xiàn)方式2：
  按照這么一想遵蚜，其實我們從后面開始循環(huán)判斷也是可以的帖池，因為它不會影響到?jīng)]有判斷的元素。它移動的位置只是已經(jīng)判斷過的元素吭净，前面的元素并不會受到影響睡汹。

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] //對原數(shù)組進行操作，不需要返回值
filterNumericInPlace(arr)
console.log(arr) // [1,3,4,5,2]

9.寫一個ageSort函數(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 ]

實現(xiàn)方式：

function ageSort(val) {
    val.sort(function(a,b) { //sort方法用于對數(shù)組進行排序寂殉，當(dāng)里面沒有參數(shù)的時候是按照字母順序排序的囚巴，所以我們需要傳入自定義的排序函數(shù)
        return a.age - b.age //結(jié)果為true時，調(diào)換順序友扰。換成 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)

運行結(jié)果

10.寫一個filter(arr, func)函數(shù)用于過濾數(shù)組彤叉，接受兩個參數(shù)，第一個是要處理的數(shù)組村怪，第二個參數(shù)是回調(diào)函數(shù)(回調(diào)函數(shù)遍歷接受每一個數(shù)組元素秽浇，當(dāng)函數(shù)返回true時保留該元素，否則刪除該元素)甚负。實現(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ù)

實現(xiàn)方式：

function filter(arr, func) {
    for (var i = arr.length-1; i >= 0; i--) {
        if (!fun(arr[i])) {
            arr.splice(i,1) //若函數(shù)返回值不為真柬焕，則刪除元素
        }
    }
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],  過濾出數(shù)字
arr = filter(arr, function(val) { return  typeof val === "number" && val > 0 });  // arr = [3,4,2] 過濾出大于0的整數(shù)

運行結(jié)果

字符串

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

ucFirst("hunger") == "Hunger"

實現(xiàn)方式：

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

運行結(jié)果

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

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

實現(xiàn)方式：

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)

運行結(jié)果

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

1.寫一個函數(shù)碰辅，獲取從min到max之間的隨機整數(shù)懂昂，包括min不包括max（***）

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

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

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

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

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.寫一個函數(shù)褐澎，生成一個長度為 n 的隨機字符串，字符串字符的取值范圍包括0到9伐蒋，a到 z工三，A到Z。

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

實現(xiàn)方式：

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
}

感覺邏輯思維能力還是不夠啊先鱼。經(jīng)常想不到方法或者思考不周全俭正。。焙畔。掸读。。