日夜談——數(shù)組、字符串、數(shù)學(xué)函數(shù)

JavaScript Array String and math

<h4>1.數(shù)組方法里pushpopshiftunshiftjoinsplit分別是什么作用?</h4>
<li>push方法用于數(shù)組,在數(shù)組的末端添加一個(gè)或者多個(gè)元素元素,并返回添加新元素后的數(shù)組的長度。注意:該方法會改變原來的數(shù)組

var a = [];
a.push(1) //1
a.push('abc') //2
a.push(ture,{}) //4
console.log(a);
a//[1,'abc',ture,{}];

<li>pop方法作用于數(shù)組,用于刪除數(shù)組最后的一個(gè)元素,并返回該元素。注意:該方法會改變原來的數(shù)組。

var a = [1,2,3];
a.pop() //3
a.pop() //2
a//[1]

<li>shift方法作用于數(shù)組,用于刪除數(shù)組的第一位元素,并返回該元素,意:該方法會改變原數(shù)組。

var a = [1,2,3,4,5];
a.shift(); //1
a.shift(); //2
a//[3,4,5]

<li>unshift方法作用于數(shù)組,可以在數(shù)組的第一位添加元素,并返回該數(shù)組的長度,意:該方法會改變原數(shù)組。

var a = [1,2,3,4];
a.unshift('b');//5
a//["b",1,2,3,4]

<li>join方法是以參數(shù)作為分隔符,將所有數(shù)組成員組成一個(gè)字符串返回,如果不能提供參數(shù),則默認(rèn)用逗號分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

<li>split方法按照給定規(guī)則分割字符串,返回一個(gè)由分割出來的子字符串組成的數(shù)組。

'a|b|c'.split('|') // ["a", "b", "c"]
 如果分割規(guī)則為空字符串,則返回?cái)?shù)組的成員是原字符串的每一個(gè)字符。
'a|b|c'.split('') // ["a", "|", "b", "|", "c"]
如果省略參數(shù),則返回?cái)?shù)組的唯一成員就是原字符串。
'a|b|c'.split() // ["a|b|c"]
如果滿足分割規(guī)則的兩個(gè)部分緊鄰著(即中間沒有其他字符),則返回?cái)?shù)組之中會有一個(gè)空字符串。
'a||c'.split('|') // ['a', '', 'c']

<h4>2.代碼:</h4>
1.用 splice 實(shí)現(xiàn) pushpopshiftunshift方法
<li>splice方法作用于數(shù)組,可用于刪除一部分原數(shù)組的成員,并可以在刪除的位置添加新加入的數(shù)組成員,并返回被刪除的數(shù)組成員,注意原數(shù)組被改變。
<li>splice的第一個(gè)參數(shù)是刪除的起始位置,第二個(gè)參數(shù)是被刪除的元素個(gè)數(shù)。如果后面還有更多的參數(shù),則表示這些就是要被插入數(shù)組的新元素。

var a = [1,2,3,4,5,6];
a.splice(1,3) //[2,3,4]
a.splice(0,1,2,3,4) //1
a //[2,3,4,5,6]
a.splice(0,0,1) //[]
a //[1,2,3,4,5,6]

<li>.push的splice實(shí)現(xiàn)方式:

var a = [1,2,3,4,5,6];
function push(item,val){
    a.splice(a.length,0,val);
    return a.length;
}

<li>,pop方法的splice實(shí)現(xiàn)方式:

var arr = [1,2,3,4,5,6]
function pop(item){
   return arr.splice(arr.length-1,arr.length)[0];
   
}

<li>.shift的splice實(shí)現(xiàn)方式:

var arr = [1,2,3,4,5,6]
function shift(item){
    return arr.splice(0,1)[0];
}

<li>.unshift的splice實(shí)現(xiàn)方式:

var arr = [1,2,3,4,5,6]
function unshift(item,val){
    arr.splice(0,0,val);
    return arr.length;
}

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

輸出以上.png

代碼如下:

var prod = {
    name: '女裝',
    styles: ['短款', '冬季', '春裝']
};
function getTpl(data){
    var htmls=[];
    htmls.push('<dl class="product">');
    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>');
    return htmls.join('\r');
};
     console.log(getTpl(prod));

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

find函數(shù)代碼:

    <script>
    var arr = ["test",2,1.5,false];
    function find(data,val){
        return data.indexOf(val);
    }
    </script>

4.寫一個(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]

代碼一:

        arr = ["a", "b", 1, 3, 5, "b", 2];
        newarr = filterNumberic(arr);
        function filterNumberic(data){
            var newarr = [];
            for(i=0;i<data.length;i++){
                if(typeof data[i] === "number"){
                    newarr.push(data[i]);
                }
            }
            return newarr;
        }

方法二:使用filter方法

        arr = ["a", "b", 1, 3, 5, "b", 2];
        newarr = filterNumberic(arr); //[1,3,5,2]
        function filterNumberic(arrayName){
            return arrayName.filter(function(elem){
                return typeof elem === "number"
            })
        }

5.對象obj有個(gè)className屬性,里面的值為的是空格分割的字符串(和html元素的class特性類似),寫addClassremoveClass函數(shù),有如下功能:

var obj = {
  className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因?yàn)閛pen已經(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')  // 因?yàn)閎labla不存在,所以此操作無任何影響

addClass代碼:

    var obj = {
  className: 'open menu'
};
    function addClass(obj,ele){
        var arr = obj.className.split(' ');
        for(i=0;i<arr.length;i++){
            if (arr[i] === ele) {
                return;
            }else{
                arr.push(ele);
                obj.className = arr.join(' ');
            }
        }
    }

removeClass代碼:

    var obj = {
  className: 'open menu'
};
    function removeClass(obj,ele){
        var arr = obj.className.split(' ');
        if(arr.indexOf (ele) === -1){
            return;
        }else{
            arr.splice(arr.indexOf (ele) , 1 );
            obj.className = arr.join(' ');
        }
    }

6.寫一個(gè)camelize函數(shù),把my-short-string形式的字符串轉(zhuǎn)化成myShortString形式的字符串?

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

代碼

function camelize(data){
    var a = data.split('-');
    return a.join('')
}

7.如下代碼輸出什么?為什么?

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

答:控制臺輸出hello hunger valley,彈出窗口為undefined。
因?yàn)椋篴rr.push()添加了一個(gè)function函數(shù),函數(shù)體內(nèi)alert包裹著一個(gè)console.log('hello hunger valley')。而arr'[' arr.length-1 ']'()是執(zhí)行數(shù)組的長度減一的元素,即是最后一個(gè)元素,所有選中最后一個(gè)元素,而()又調(diào)用了這個(gè)元素,函數(shù)先執(zhí)行console.log('hello hunger valley'),在控制臺打印出hello hunger valley,并且返回一個(gè)undefined,因此alter彈窗彈出一個(gè)undefined。

8.寫一個(gè)函數(shù)isPalindrome,判斷一個(gè)字符串是不是回文字符串(正讀和反讀一樣,比如 abcdcba 是回文字符串, abcdefg不是)寫一個(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 ]

代碼一(判斷會問字符串)

function isPalindrome(data){
    var arr = data.split('');
        if(data == arr.reverse().join('')){
            return true;
        }else{
            return false;
        }
}

var a = 'abccba'

var b = 'abcdefg'

代碼二(按年齡排序)

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(data){
    data.sort(function(a,b){
        return a.age-b.age;
    })
};

console.log(people);

8.寫一個(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)如下功能:

console.log(people);

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

代碼:

function isNumber (el){
    return typeof el === 'number';
}
function filter(arr,func){
    new a = [];
    for(var i = 0; i < arr.length ; i++){
        if(func(arr[i])){
            a.push(arr[i]);
        }
    }
    return a;
}

<h3>字符串</h3>

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

ucFirst("hunger") == "Hunger"

代碼:

function ucFirst(str){
    return str[0].toUpperCase()+str.slice(1,str.length);
}

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

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

代碼:

function truncate(str,maxlength){
    var newstr
    if(str.length>maxlength){
        return newstr = str.slice(0,maxlength)+'...';
    }else{
        return str
    }
}

<h3>數(shù)學(xué)函數(shù)</h3>
1.寫一個(gè)函數(shù),獲取從min到max之間的隨機(jī)整數(shù),包括min不包括max?

function getRandStr(min,max){
    return Math.floor(Math.random()*(max-min))
}

2.寫一個(gè)函數(shù),獲取從min都max之間的隨機(jī)整數(shù),包括min包括max?

function getRandStr(min,max){
    return Math.floor(Math.random()*(max-min+1))+min
}

3.寫一個(gè)函數(shù),獲取一個(gè)隨機(jī)數(shù)組,數(shù)組中元素為長度為len,最小值為min,最大值為max(包括)的隨機(jī)整數(shù)
代碼:

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

4.寫一個(gè)函數(shù),生成一個(gè)長度為 n 的隨機(jī)字符串,字符串字符的取值范圍包括0到9,a到 z,A到Z。

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

代碼

function getRandStr(len){
    var str='';
    var strRand ;
    var target='0123456789abcdefghijklnmopqrstuvwxyzABCDEFGHIJKLNMOPQRSTUVWXYZ';
    for(var i = 0; i < len; i++){
        strRand = Math.floor(Math.random()*target.length);
        str += target[strRand];
    }
    return str
}

參考資料:
<a >院一峰JS教程</a>
</br>
版權(quán)歸饑人谷peter和饑人谷所有,若有轉(zhuǎn)載,請注明來源

感謝吃瓜子觀眾:


gaki18
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容