forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。 map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。 JavaScript中Map和ForEach的区别
運用sort來建立排名
1 2 3 4 5 6 7 8 9
//sortEvent functionsortEvent() { data = data.sort((a, b) => { return b.money - a.money; }); //console.log(data); updateDOM(); }
sort()
sort依據字串的 Unicode 編碼進行排序，會改變原本的陣列。
排序進行方式：sort()會將所有元素轉成字串後，且以第一個字元為對象，再進行排序。
比較好的方式：一般會建議，還是以函式傳入參數來當排序條件會比較穩定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
const arr = [5, 9, 1, 3, 2, 6]; // 以匿名函式回參數做「升序」排序 arr.sort(function(a, b) { return a - b; // a - b > 0 }); // [1, 2, 3, 5, 6, 9]
// 如果要反過來做「降序」排序 arr.sort(function(a, b) { return b - a; }); // [9, 6, 5, 3, 2, 1]
functionrandom_bg_color() { // Get a random number between 64 to 256
// (for getting lighter colors) let red = Math.floor(Math.random() * 255) + 64; let green = Math.floor(Math.random() * 255) + 64; let blue = Math.floor(Math.random() * 255) + 64; let a = 0.5
// Construct a color withe the given values let bgColor = "rgba(" + red + ", " + green + ", " + blue + ", " + a + ")";
var bg = $(document.body).css('background', `${bgColor}`); // Set the background to the new color bg = bgColor; console.log(bg)
// Check input length functioncheckLength(input, min, max) { if (input.value.length < min) { showError( input, `${getFieldName(input)} must be at least ${min} characters` ); } elseif (input.value.length > max) { showError( input, `${getFieldName(input)} must be less than ${max} characters` ); } else { showSuccess(input); } }
密碼檢查
1 2 3 4 5 6
// check password match functioncheckPasswordMatch(input1, input2) { if (input1.value !== input2.value) { showError(input2, 'Password do not match') } }
//計算加總 var total = 0; $.each(amounts_arr, function () { total += parseFloat((this)) || 0; }); //傳回YOUR BALANCE $('#balance').text(`$${total}`); console.log(total);
//*************************** */ //從陣列找出>0的值，放置income //console.log(amounts) var income = amounts_arr.filter( function (item) { return item > 0 } ) console.log(income);
var totalIncome = 0; $.each(income, function () { totalIncome += parseFloat((this)) || 0; });
//計算加總 var total = 0; $.each(amounts_arr, function () { total += parseFloat((this)) || 0; }); //傳回YOUR BALANCE $('#balance').text(`$${total}`); console.log(total);
//*************************** */ //從陣列找出>0的值，放置income //console.log(amounts) var income = amounts_arr.filter( function (item) { return item > 0 } ) console.log(income); var totalIncome = 0; $.each(income, function () { totalIncome += parseFloat((this)) || 0; });
var total = 0; $.each(amounts_arr, function () { total += parseFloat((this)) || 0; }); //傳回YOUR BALANCE $('#balance').text(`$${total}`); console.log(total);
income 收入加總計算
1 2 3 4 5 6 7 8 9 10 11 12 13 14
//從陣列找出>0的值，放置income //console.log(amounts) var income = amounts_arr.filter( function (item) { return item > 0 } ) console.log(income); var totalIncome = 0; $.each(income, function () { totalIncome += parseFloat((this)) || 0; });
var currency_one = $("#currency-one").val(); var currency_two = $('#currency-two').val(); var amountOne = $('#amount-one').val(); var amountTwo = $('#amount-two').val();
//為什麼我們需要function //DRY -> Don't repeat yourself functionechoSheep(index) { console.log('第' + i + '隻綿羊') } for (var i = 1; i < 11; i++) { echoSheep(i) }
與過去所學結合
也可以return後面接物件
回傳結果為20
簡單練習題
創建空陣列，並於陣列中放數1,2,3,…10
要放入return，否則會出現undefined
也可以將參數改成兩個數
1 2 3 4 5 6 7 8
functiongenerateArray(a, b) { //a,b 可以改為 from,to var result = []; for (var i = a; i <= b; i++) { result.push(i); } return result; } console.log(generateArray(3, 10))
