跳到主要內容

Javascript:陣列的基本操作、遍歷方式、Map/Reduce、排序、過濾



Javascript中,陣列(Array)是一個標準的集合,除了可以添加、刪除裡面的元素,還可以透過for循環來遍歷各個元素,以下將說明陣列(Array)的基本操作與遍歷方式。
一、基本操作

     (一)、建立陣列
var a = [5,2,8];
var a = new Array(5,2,8);
    (二)新增元素:unshift()、push()
        1.unshift():新增在陣列最前端
a.unshift(9);//a[9,5,2,8]     
        2.push()://新增在陣列最後端
a.push(9);//a[5,2,8,9]
    (三)刪除元素:shift()、pop()、delete a[index]
        1.shift():從陣列最前端移除
a.shift();//a[2,8]
        2.pop():從陣列最後端移除
a.pop();//a[5,2]
        3.delete array[index]:刪除某一元素
delete a[1];//a[5,8]
    (四)轉換成字串符號分隔的字串:join()
console.log(a.join(','));//"5,2,8"
    (五)連接兩個或多的數據組:concat(array1、array2....),另外也可以用來作字串連接
var a = [5,2,8];
var b = [9,10,11];
console.log(a.concat(b));//[5,2,8,9,10,11]
    (六)複製某一片段:slice(sourceIndex,targetIndex - 1)
var a = [5,2,8];
var copyArr = a.slice(1,a.length);
console.log(copyArr);//[2,8]
    (七)萬用的:splice(),允許你在任何位置刪除、插入元素,但會修改原數據組。
        1.參數說明:array.splice(index,howmany,item1,.....,itemX)
             (1)index:第幾個索引起
             (2)howmany:刪除幾個元素
             (3),item1,.....,itemX:加入的元素
        2.情況一:將2移除並在5跟8之間插入3、4的值。
var a = [5,2,8] 
a.splice(1,1,3,4);
console.log(a);//[5,3,4,8]
        3.情況二:第一個位置起全部刪除
var a = [5,2,8]
a.splice(1);
console.log(a);//[5]
    (八)反轉:reverse()
var a = [5,2,8]
console.log(a.reverse());//8,2,5

二、遍歷方式

    (一)forLoop:這種方式是屬於較具效率的方式,但當內容越多,可讀性就較差,最大的優點就是可以使用break、continue等來中斷。
var a = [5,2,8];
for (var i = 0;i < a.length;i++){
     console.log(a[i]);
}
    (二)forEach:需要一個callback function,在遍歷每個元素的時候都會調用一次這個function,而該function提供三個參數如下:
          ●value:元素值
          ●index:元素索引
          ●array:當前的陣列
var a = [5,2,8];
a.forEach(function(value,index,array){          
      console.log(value);
      console.log(index);
      console.log(array[index]);
})
    (三).some:測試陣列中是否符合某條件,類似.NET的LINQ(.Any(x => x.IsAwesome)),使用起來類似forEach提供一個callback function,一樣有value、index、array三個參數,其運作時會遍歷array,直到有一個callback function返回true,也可以看成類似下面的forLoop。
         1.forLoop
var a = [5,2,8];
for (var i = 0;i < a.length;i++){
     if (a[i] == 2) break;//find
}
        2. .some
var a = [5,2,8];
a.some(function(value,index,array){
      if (value == 2) {
          console.log(value);//印出了5跟2,因為2已找到則中斷
          return true;
      }
})
    (四).every:用法類似於.some,只是返回的是false,可以看作「陣列中每個條件都要符合」。
var a = [5,2,8];
a.every(function(value,index,array){
       if (value != 2) {
            console.log(value);//只印出5就中斷
            return false;
       }
})

三、Map/Reduce、排序、過濾

後來的javascript也加入了一些運算的函數(Map/Reduce)與資料的操作(排序、過濾)

    (一)Map:將原本的陣列映射到另一個陣列,過程中可以做一些加工,如下我們在映射過程中都將值+1

var a = [5,2,8];       
a = a.map(function(value,index,array){
        return value + 1;
})
console.log(a)
    (二)Reduce:.reduce(callback(previousValue, currentValue, index, array), initialValue),以下是用來作為陣列的加總。
var a = [5,2,8];
var sum  = a.reduce(function(previousValue,currentValue){
        return previousValue + currentValue;
})
console.log(sum);//15
    (三).sort:可以提供一個比較的函數來設計自己的sort,若未提供則預設會將元素轉換為字串符作為排序依據,但會出現不是我們所想要的結果。
        1.排序中callback function提供了三種return方式:
             ●callback(a,b) < 0,a會排在b前面。
             ●callback(a,b) = 0,不會改變。
             ●callback(a,b) > 0,a會排在b後面。
        2.未指定callback function造成的錯誤,我們期望的結果是2、5、8、10但卻非如此,因為它會轉成字串符做排序。
var arr = [5,2,8,10];
arr.sort();
console.log(arr);//[10,2,5,8]
3.參數函數通常會有兩個參數,用於傳遞陣列中的元素,並用排序規則操作,如果返回值大於0則兩數會交換。
var arr = [5,2,8];
arr.sort(function(a,b){
     return a - b; 
})
console.log(a);
(四).filter:過濾,可以根據條件進行過濾,一樣會帶入callback function,如下要過濾出>5的數字
var arr = [5,2,8]
var filterArr = arr.filter(function(value,index,array){
       return value > 5
})
console.log(filterArr)//[8]

留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

C#資料庫操作(新增、修改、刪除、查詢)

【Excel好好玩】 自己的資產自己管!善用Google Sheet來幫我們評估貸款

這次介紹的主題是關於Excel的貸款還款計畫試算,我們人生中總會遇到需要大筆金額的花費,但當資金不夠時就得進行貸款,而貸款之前如果我們能夠審慎評估,並分析自己的還款能力之後在進行凍作,相信風險會小很多,因此就自己動動手來使用Google Sheet進行試算吧! 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式,我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉,即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能,但如果我們想要進一步管理自己的資產時,就需要將每一期的金額給計算出來,因此才會將公式運用在Excel表,讓我們的資產管理表能夠結合負債,進一步評估我們理財行動的下一步,希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴,讓我們透過有效的管理,幫助荷包長大吧! 喜歡撰寫文章的你,不妨來了解一下: Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入? 歡迎加入一起練習寫作,賺取知識,累積財富!