JS基礎知識知多少(三)--數組、字符串、數學函數

1.數組方法里push、pop、shift、unshift、join、split分別是什么作用?
數組是JavaScript的內置對象,同時也是一個構造函數,可以用它生成新的數組。
push方法用于在數組的末端添加一個或多個元素,并返回添加新元素后的數組長度。注意,該方法會改變原數組。

var arr=[1,4,7,2,5,8];
console.log(arr.push(6,3));//輸出結果為8,此時arr=[1,4,7,2,5,8,3]

pop方法用于刪除數組的最后一個元素,并返回該元素。注意,該方法會改變原數組。

var arr=[1,4,7,2,5,8];
console.log(arr.pop());//輸出結果為8,此時arr=[1,4,7,2,5]

注意:push和pop結合使用,就構成了“后進先出”的棧結構。

shift方法用于刪除數組的第一個元素,并但會該元素。注意,該方法會改變原數組。

var arr=[1,4,7,2,5,8];
console.log(arr.shift());//輸出結果為1,此時arr=[4,7,2,5,8]

注意push和shift結合使用,就構成了"先進先出"的隊列結構。

unshift方法用于在數組的第一個位置添加元素,并返回添加新元素后的數組長度。注意,該方法會改變原數組。

var arr=[1,4,7,2,5,8];
console.log(arr.unshift(3));//輸出結果為7,此時arr=[3,1,4,7,2,5,8]

join方法以參數作為分隔符,將所有數組成員組成一個字符串返回。如果不提供參數,默認用逗號分隔。

var arr=[1,4,7,2,5,8];
console.log(arr.join(''));//輸出結果為“147258”

split方法用于把一個字符串分割成字符串數組。

數組代碼練習題

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

a.實現push:

var arr=[1,4,7,2,5,8]
function push(arr,val){
      arr.splice(arr.length,0,val);
      return arr.length;
}
console.log(push(arr,3));//輸出結果為7,此時arr為[1,4,7,2,5,8,3]

b.實現pop:

var arr=[1,4,7,2,5,8];
var result=arr.splice(arr.length-1,1);
console.log(result);//輸出結果為[8],此時arr=[1,4,7,2,5]

c.實現shift:

var arr=[1,4,7,2,5,8];
var result=arr.splice(0,1);
console.log(arr);//輸出結果為[4,7,2,5,8]

d.實現unshift:

var arr=[1,4,7,2,5,8];
var result=arr.splice(0,0,3);
console.log(arr);//輸出結果為[3,1,4,7,2,5,8]

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

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

實現:


輸出結果為:


3.寫一個find函數,實現下面的功能

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

實現方法:

輸出結果為:

方法二:(參考同學的代碼,寫的很好,記錄下)

var arr=["test",2,1.5,false];
function find(arr,val){
      var index=-1;
      if(!!arr&&arr.length>0){
            for(key in arr){
                  if(arr[key]===value){
                        index=key;
                  }
            }
      }
      return index;
}
console.log( find(arr,'test') );     //0
console.log( find(arr,2) );        //1
console.log( find(arr,0) );        //-1

4.寫一個函數filterNumeric,實現如下功能

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

實現方法:

var arr = ["a", 1,3,5, "b", 2];
function filterNumeric(arr)
{
     console.log(arr.filter(function(arr){
          return typeof(arr) === "number";
     })); // [1,3,5,2]
}
newarr = filterNumeric(arr); // [1,3,5,2]

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

var obj = {
      className: 'open menu'
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因為open已經存在,此操作無任何辦法
addClass(obj, 'me') // obj.className='open menu new me'
console.log(obj.className)  // "open menu new me"

removeClass(obj, 'open') // obj.className='menu new me'
removeClass(obj, 'blabla')  // 不變

實現addClass和removeClass:

var obj = {
    className: 'open menu new me'
}
var obj = {
    className: 'open menu '
}
function addClass(obj,val){//實現addClass
     var arr=obj.className.split('  ');
     for(var i=0;i < arr.length;i++){
        if(arr[i]===val){
            console.log(val+"已存在");
            break;
        }
        else{
            arr[arr.length]=val;
            obj.className=arr.join('  ');
            break;
         }
      }
      return arr;
}
function removeClass(obj,val){//實現removeClass
    var newarr=obj.className.split(' ');
    for(var i=0;i < newarr.length;i++)
    {
        if(newarr[i]===val){
           newarr.splice(newarr[i],1);
           obj.className=newarr.join(' ');
           break;
         }
         else{
           console.log("該元素不存在");
          }
    }
}
addClass(obj, 'new') // obj.className='open menu new'
addClass(obj, 'open')  // 因為open已經存在,此操作無任何辦法
addClass(obj, 'me') // obj.className='open menu new me'
console.log(obj.className)  // "open menu new me"

removeClass(obj, 'open') // obj.className='menu new me'
removeClass(obj, 'blabla')  // 不變

6.寫一個camelize函數,把my-short-string形式的字符串轉化成myShortString形式的字符串

function camelize(str){
       var arr = str.toLowerCase().split("-");
       var str = "";
       for(i=0;i < arr.length;i++){
           if(i == 0){
            str += arr[i];
           }else {
            str += arr[i].substring(0,1).toUpperCase()+arr[i].substring(1);
           }
        }
       return str;
}
console.log(camelize("background-color"));//backgroundColor
console.log(camelize("list-style-image"));//listStyleImage

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

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

輸出結果:
先輸出hello hunger valley,再輸出undefined
原因是:arr.push( function() { alert(console.log('hello hunger valley')) } );會把函數function(){alert(console.log('hello hunger valley'))}插入到arr的末端,arr [arr.length-1] () 會調用function(){},輸出hello hunger valley,輸出結果后,函數銷毀,所以最后一次輸出undefined

8.寫一個函數filterNumericInPlace,過濾數組中的數字,刪除非數字

arr = ["a", 1,3,4,5, "b", 2];//對原數組進行操作,不需要返回值
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"){
            arr.splice(i,1);
        }
    }
}
filterNumericInPlace(arr);
console.log(arr)  // [1,3,4,5,2]

9.寫一個ageSort函數實現如下功能

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 ]

實現:

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 ]
function ageSort(people){
    arr.sort(function(a,b){
        return a.age-b.age;
    })
    return arr;
}
console.log(ageSort(people)); // [ bob, mary, john ]

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 val > 0 });  
// arr = [2] 過濾出大于0的整數

實現:

function isNumeric (el){
    return typeof el === 'number'; 
}
arr = ["a",3,4,true, -1, 2, "b"]
function filter(arr,func){
    for(var i=0;i<arr.length;i++)
    {
        if(!func(arr[i])){
            arr.splice(i,1);
        }
    }
    return arr;
}

console.log(arr = filter(arr, isNumeric)) ; // arr = [3,4,-1, 2],  過濾出數字
console.log(arr = filter(arr, function(val) { return val > 0 }));  // arr = [2] 過濾出大于0的整數

字符串
1.寫一個 ucFirst函數,返回第一個字母為大寫的字符

ucFirst("hunger") == "Hunger"
function ucFirst(str){
      var arr=str.split('');
      for(var i=0;i < arr.length;i++)
      {
       arr[0]=arr[0].toUpperCase();
      }
      console.log(arr.join(''));
}
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){
        str=str.slice(0,maxlength+1)+"...";
    }
    console.log(str) ;
}

truncate("hello, this is hunger valley,", 10)
truncate("hello world", 20)

數學函數
1.寫一個函數limit2,保留數字小數點后兩位,四舍五入, 如:

var num1 = 3.456
limit2( num1 ); //3.46
limit2( 2.42 ); //2.42

實現:

 function limit2(num){
      return (Math.round(num*100))/100;
 }
 console.log( limit2(3.456) ); //3.46
 console.log( limit2(2.42) ); //2.42

2.寫一個函數,獲取從min到max之間的隨機數,包括min不包括max

function getRandomNum(min,max){
      var result=Math.random()*(max-min)+min;
      console.log(result);
}
getRandomNum(6,16);

3.寫一個函數,獲取從min都max之間的隨機整數,包括min包括max

function getRandomNum(min,max){
      var result=Math.floor(Math.random()*(max-min+1)+min);
      console.log(result);
}
getRandomNum(6,16);

4.寫一個函數,獲取一個隨機數組,數組中元素為長度為len,最小值為min,最大值為max(包括)的隨機數

function getRandomNum(min,max,len){
      var arr=[];
      for(i=0;i < len;i++){
          arr[i]=Math.floor(Math.random()*(max-min+1)+min);
      }
      console.log(arr);
}
getRandomNum(1,10,9)

版權歸本人所有,如有轉載,請注明來源

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,936評論 6 535
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,744評論 3 421
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,879評論 0 381
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,181評論 1 315
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,935評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,325評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,384評論 3 443
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,534評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,084評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,892評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,067評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,623評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,322評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,735評論 0 27
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,990評論 1 289
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,800評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,084評論 2 375

推薦閱讀更多精彩內容