陣列原型方法:map()、find()、filter()、some()、every()、sort()


在 JavaScript 中,陣列原型(Array.prototype)本身就自帶一些方法,我們可以直接套用而不必另外寫。以下一一介紹幾種常用的方法:


Array.prototype.map()

建立新陣列,內容是原陣列每個元素經回呼函式運算的內容。

let arr = ["a", "b", "c"];
let arrUpperCase = arr.map(i => {
    return i.toUpperCase();   //回呼函式內容:讓陣列內元素都改成大寫
    }
)

console.log(arrUpperCase);      //["A", "B", "C"]

Array.prototype.find()

原元素的資料型別回傳第一個符合測試函式條件的元素;若無元素符合條件則顯示 undefined。

let arr = [1, 2, 3];

let findFirstPositive = arr.find(i => {
    return i>0;   //測試函式內容:逐一判斷陣列內元素是否>0
    }
)

let findFirstNegative = arr.find(i => {
    return i<0;   //測試函式內容:逐一判斷陣列內元素是否<0
    }
)

console.log(findFirstPositive);      //1
console.log(findFirstNegative);      //undefined

Array.prototype.filter()

陣列回傳找到所有符合測試函式條件的元素;若無元素符合條件則顯示空陣列。

let arr = [1, 2, 3];

let findPositive = arr.filter(i => {
    return i>0;   //測試函式內容:判斷陣列內所有元素是否>0
    }
)

let findNegative = arr.filter(i => {
    return i<0;   //測試函式內容:判斷陣列內所有元素是否<0
    }
)

console.log(findPositive);      //[1,2,3]
console.log(findNegative);      //[]

Array.prototype.some()

檢查陣列內是否有一個元素符合測試函式條件,只要有就回傳布林值 true,否則回傳 false。

let arr = [-1,2,3];

let oneNegative = arr.some(i => {
    return i<0;   //測試函式內容:判斷陣列內是否有一個元素<0
    }
)

let allGreaterThanFour = arr.some(i => {
    return i>4;   //測試函式內容:判斷陣列內是否有一個元素>4
    }
)

console.log(oneNegative);          //true
console.log(allGreaterThanFour);   //false

Array.prototype.every()

檢查陣列內是否所有元素皆符合測試函式條件,有才回傳布林值 true,否則回傳 false。

let arr = [-1,2,3];

let allNegative = arr.every(i => {
    return i<0;   //測試函式內容:判斷陣列內元素是否全部<0
    }
)

let allGreaterThanFour = arr.every(i => {
    return i>4;   //測試函式內容:判斷陣列內元素是否全部>4
    }
)

let allIntegers = arr.every(i => {
    return i%1 === 0;  //測試函式內容:判斷陣列內元素是否全部皆為整數
    }
)

console.log(allNegative);          //false
console.log(allGreaterThanFour);   //false
console.log(allIntegers);          //true

Array.prototype.sort()

依照 Unicode 編碼由小到大排序;原本的陣列會被改變,而非做出新的陣列。

因為判斷大小的依據是用 Unicode 編碼,元素內容是字串也能夠使用,但比較數字大小時,輸出結果可能不如預期,要用回呼函式調整。

範例一:無負數~以Unicode編碼排序與預期結果相同
let arr1 = [5,2,1,6,9];
console.log(arr1.sort());                //[1,2,5,6,9]

===========================================================

範例二:有負數~以Unicode編碼排序,負數的值越大反而排越前面
let arr2 = [5,-2,1,-6,-9];
console.log(arr2.sort());                //[-2,-6,-9,1,5]

//範例二解決方法~用回呼函式,使負數也能依照其值由小到大排列
let sortByValue = arr2.sort((a,b) => {
    return a-b;
})
console.log(sortByValue);               //[-9,-6,-2,1,5]

===========================================================

範例三:有兩位數~以Unicode編碼排序,都是從最高位數逐一往最低位數比
let arr3 = [13, 5, 11, -5, -52];
console.log(arr3.sort());                //[-5,-52,11,13,5]

//範例三解決方法~用回呼函式,使有兩位數以上的值也能由小到大排列
let sortByValue3 = arr3.sort((a,b) => {
    return a-b;
})
console.log(sortByValue3);               //[-52,-5,5,11,13]

===========================================================

//範例四:字串依Unicode編碼由小到大排列,大寫優先
let arr4 = ["cat", "Ox", "Bird", "Fish"];
console.log(arr4.sort());          //["Bird","Fish","Ox","cat"]

===========================================================

//範例五:字串依長度由小到大排列,同長度者比較Unicode編碼
let arr5 = ["cat", "Ox", "Bird", "Fish"];
let sortByLength = arr5.sort((a,b) => {
    return a.length - b.length;
    }
)
console.log(sortByLength);           //["Ox","cat","Bird","Fish"]

===========================================================

//範例六:有字串有數字~字串依字串規則比、數字依數字規則比,數字在字串之前
let arr6 = ["Dog", 13, "fish", 3, "cat"];
console.log(arr6.sort());               //[13,3,"Dog","cat","fish"]

補充:Array.isArray()

非屬「Array.prototype」的方法,可用來確認是否為陣列。

因為陣列是一種物件,若用 typeof 去檢查陣列會回傳「object」,若要確認是否為陣列,則可用 Arr.isArray()。

let arr = ["a", "b", "c"];

console.log(typeof(arr));               //object
console.log(Array.isArray(arr));        //true
#javascript #陣列 #陣列原型方法







你可能感興趣的文章

一起讀 Knowledge-Enabled Robotic Agents for Shelf Replenishment in Cluttered Retail Environments

一起讀 Knowledge-Enabled Robotic Agents for Shelf Replenishment in Cluttered Retail Environments

什麼是盒模型(box modal)?

什麼是盒模型(box modal)?

F2E合作社|input group輸入群組|Bootstrap 5網頁框架開發入門

F2E合作社|input group輸入群組|Bootstrap 5網頁框架開發入門






留言討論