JavaScript基礎部分經典案例
再複雜的程式都是由一個個簡單的部分組成。
001案例 - 交換兩個變數的值
方法01 - 使用臨時變數
var n1 = 5; var n2 = 6; // 建立一個臨時中介變數 tmp var tmp; // 將 n1 的值備份給 tmp tmp = n1; // 把 n2 賦值給 n1 n1 = n2; // 把備份的 n1 賦值給 n2 n2 = tmp; console.log(n1, n2);
方法02 - 不使用第三個變數
var n1 = 5; var n2 = 6; // 利用兩個值的和充當第三個變數 n1 = n1 + n2;// 5 + 6 = 11 n2 = n1 - n2;// 11 - 6 = 5; n1 = n1 - n2;// 11 - 5 = 6; console.log(n1, n2);
002案例 - 求兩個數的最大值
方法01 - 使用條件判斷
var num1 = 2; var num2 = 5; // 使用條件判斷 if (num1 > num2) { console.log('最大值是num1:' + num1); } else { console.log('最大值是num2: ' + num2); }
方法02 - 使用三元表示式
var num1 = 13; var num2 = 6; // 表示式1 ? 表示式2 : 表示式3 // console.log( num1 > num2 ? num1 : num2 ); var max = num1 > num2 ? num1 : num2; console.log(max);
003案例 - 判斷一個數是偶數還是奇數
var num = 5; if (num % 2 === 0) { console.log('num是偶數'); } else { console.log('num是奇數'); }
004案例 - 考分轉換,把百分制轉換成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A;
方法01 - 使用條件判斷
var score = 59; if (score >= 90) { console.log('A'); } else if (score >= 80) { console.log('B'); } else if (score >= 70) { console.log('C'); } else if (score >= 60) { console.log('D'); } else { console.log('E'); }
方法02 - 使用 switch 語句
var score = 66; score = parseInt(score / 10); switch (score) { case 10: case 9: console.log('A'); break; case 8: console.log('B'); break; case 7: console.log('C'); break; case 6: console.log('D'); break; default: console.log('E'); break; }
005案列 - 判斷一個年齡是否成年, 當年齡超過18 返回成年;否則返回未成年.
var age = 19; // console.log( age >= 18 ? '成年' : '未成年' ); var msg = age >= 18 ? '成年' : '未成年'; console.log(msg);
006案例 - 輸入一個數字,列印對應的星期
//== 比較的是值=== 比較值和型別 //switch語句中的判斷使用的是=== var day = 10; switch (day) { case 1: console.log('星期一'); break; case 2: console.log('星期二'); break; case 3: console.log('星期三'); break; case 4: console.log('星期四'); break; case 5: console.log('星期五'); break; case 6: console.log('星期六'); break; case 7: console.log('星期日'); break; default: console.log('輸入的值不在星期範圍內'); break; }
007案例 - 列印1-100之間所有的數字
方法01 - 使用 while 實現
var i = 1; while (i <= 100) { console.log(i); // i = i + 1; // i += 1; i++; }
方法02 - 使用 for 實現
for (var i = 1; i <= 100; i++) { console.log(i); }
008案例 - 計算1-100之間所有數的和
方法01 - 使用 while 實現
var i = 1; var sum = 0; while (i <= 100) { sum = sum + i; i++; } console.log(sum);
方法02 - 使用 for 實現
var sum = 0; for (var i = 1; i <= 100; i++) { // sum = sum + i; sum += i; } console.log(sum);
009案例 - 列印100以內 7的倍數
var i = 1; while (i <= 100) { // 判斷當前的i是否是7的倍數 if (i % 7 === 0) { console.log(i); } // i自身+1 i++; }
變通:
var i = 1; while (i*7 <= 100) { console.log(i*7) // i自身+1 i++; } // 這樣減少了迴圈次數,還不需要條件判斷
010案例 - 列印100以內所有偶數
var i = 1; while (i <= 100) { // 判斷當前的i是否是偶數 if (i % 2 === 0) { console.log(i); } // i自身+1 i++; } // 這個案例同樣可以使用上面的變通方法
011案例 - 列印100以內所有偶數的和
方法01 - 使用 while 實現
var i = 1; var sum = 0; while (i <= 100) { // 判斷當前的i是否是偶數,如果是偶數的話累加 if (i % 2 === 0) { sum += i; } // i自身+1 i++; } console.log(sum);
方法02 - 使用 for 實現
var sum = 0; for (var i = 1; i <= 100; i++) { // 找到偶數 if (i % 2 === 0) { sum += i; } } console.log(sum);
012案例 - 1-100之間所有數字的和
var i = 1; var sum = 0; do { // 迴圈體 // 累加 sum += i; // i 自身+1 i++; } while (i <= 100); console.log(sum);
013案例 - 求100以內所有3的倍數的和
var i = 1; var sum = 0; do { // 迴圈體 // 判斷是否是3的倍數,如果是3的倍數累加 if (i % 3 === 0) { sum += i; } // i自身+1 i++; } while (i <= 100); console.log(sum);
014案例 - 使用do-while迴圈:輸出詢問“我愛你,嫁給我吧?”
do { var msg = prompt('你到底愛不愛我?', '請輸入yes/no'); } while (msg !== 'yes'); console.log('親親我的寶貝');
015案例 - 求1-100之間所有數的平均值
var sum = 0; var avg; for (var i = 1; i <= 100; i++) { sum += i; } avg = sum / 100; console.log(avg);
016案例 - 同時求1-100之間所有偶數和奇數的和
var oddSum = 0;// 奇數的和 var evenSum = 0; // 偶數的和 for (var i = 1; i <= 100; i++) { // 判斷i是奇數還是偶數 if (i % 2 === 0) { // 偶數 evenSum += i; } else { //奇數 oddSum += i; } } console.log('奇數的和:' + oddSum); console.log('偶數的和:' + evenSum);
017案例 - 在控制檯列印正方形
var str = ''; // 外層的迴圈控制輸出多少行 for (var j = 0; j < 10; j++) { // 控制一行中輸出 10 個* for (var i = 0; i < 10; i++) { // str = str + '*'; str += '* '; } // str = str + '\n'; str += '\n'; } console.log(str);
018案例 - 在控制檯列印三角形
// 外層迴圈 控制輸出的行數 var str = ''; for (var i = 0; i < 10; i++) { // 內層迴圈控制輸出的每一行的*的個數 for (var j = i; j < 10; j++) { str += '* '; } str += '\n'; } console.log(str);
019案例 - 列印99乘法表
// 外層迴圈控制輸出多少行 var str = ''; for (var i = 1; i <= 9; i++) { // 內層迴圈控制每一行有多少個內容 for (var j = i; j <= 9; j++) { str += i + '*' + j + '=' + i * j + '\t'; } str += '\n'; } console.log(str);
020案例 - 求整數50~200的第一個能被7整除的數
for (var i = 50; i <= 200; i++) { if (i % 7 === 0) { console.log(i); // 列印後終止迴圈 break; } } console.log('over');
021案例 - 求整數1~100的累加值,但要求跳過所有個位為3的數
var sum = 0; for (var i = 1; i <= 100; i++) { if (i % 10 === 3) { // 如果找到個位為3的數字 ,繼續執行下一次迴圈 continue; } sum += i; } console.log(sum);
022案例 - 本金10000元存入銀行,年利率是千分之三,每過1年,將本金和利息相加作為新的本金。計算5年後,獲得的本金是多少?
// 本金 var money = 10000; // 利率 var rate = 0.003; // money = money + money * rate; for (var i = 0; i < 5; i++) { money += money * rate; } console.log(money);
023案例 - 已知一對兔子每個月可以生一對小兔子,而一對兔子從出生後第3個月起每月生一對小兔子。假如一年內沒有發生死亡現象,那麼,一對兔子一年內(12個月)能繁殖成多少對?
// (兔子的規律為數列,1,1,2,3,5,8,13,21) // 前兩個數 var n1 = 1; // 前一個數 var n2 = 1; // 當前數 var n3; for (var i = 3; i <= 9; i++) { n3 = n2 + n1; n1 = n2; n2 = n3; } console.log(n3);
024案例 - 求一組數中的所有數的和與平均值
var numbers = [35, 12, 35, 90, 11, 12]; // 和 var sum = 0; // 平均值 var avg; // 遍歷陣列 // for (var i = 0; i <= numbers.length - 1; i++) for (var i = 0; i < numbers.length; i++) { // sum = sum + numbers[i]; sum += numbers[i]; } avg = sum / numbers.length; console.log('這組數的和:' + sum); console.log('這組數的平均值:' + avg);
025案例 - 求一組數中的最大值和最小值,以及所在位置
var numbers = [120, 13, 101, 88, 10, 25]; var max = numbers[0]; var min = numbers[0]; // 最大值的索引 var maxIndex = 0; // 最小值的索引 var minIndex = 0; for (var i = 1; i < numbers.length; i++) { // 找大的數 if (max < numbers[i]) { max = numbers[i]; maxIndex = i; } // 找小的數 if (min > numbers[i]) { min = numbers[i]; minIndex = i; } } console.log(max, min); console.log(maxIndex, minIndex);
026案例 - 將字串陣列用|或其他符號分割
方法01 - 使用 for 迴圈
var names = ['郭德綱', '郭麒麟', '于謙', '岳雲鵬', '燒餅']; // 讓我們把陣列中的每一項 用|或其他符號分割,形成一個字串'郭德綱|郭麒麟|于謙|岳雲鵬|燒餅' // 往第二個元素之前加分隔符 // 分隔符 var seperator = '|'; var str = names[0]; for (var i = 1; i < names.length; i++) { str += seperator + names[i]; } console.log(str);
方法02 - 使用陣列的方法
var names = ['郭德綱', '郭麒麟', '于謙', '岳雲鵬', '燒餅']; console.log(names.join('|'));
027案例 - 要求將不為0的值存入一個新的陣列,生成新的陣列
var numbers = [5, 6, 89, 0, 11, 0, 12, 3, 0]; // 把找到的非0元素儲存到一個新的陣列中 var newArray = []; // 空陣列 for (var i = 0; i < numbers.length; i++) { if (numbers[i] !== 0) { // numbers[i]; // 找到的非0元素,儲存到新的陣列中 newArray[newArray.length] = numbers[i]; } } console.log(newArray);
028案例 - 翻轉陣列
var numbers = [4, 5, 7, 9];// 生成一個新的陣列陣列中儲存 9 7 5 4 var newArray = []; for (var i = numbers.length - 1; i >= 0; i--) { newArray[newArray.length] = numbers[i]; } console.log(newArray);
029案例 - 氣泡排序
// 氣泡排序-- 從小到大的排序 var numbers = [1, 2, 3, 4, 5]; // var count = 0; // 記錄迴圈的次數 for (var i = 0; i < numbers.length - 1; i++) { // 內層迴圈:控制比較的次數,並且判斷兩個數的大小,把大的數往後移動,小的數往前移動 for (var j = 0; j < numbers.length - 1 - i; j++) { // 兩兩比較從小到大排序 if (numbers[j] > numbers[j + 1]) { // 交換位置 var tmp = numbers[j]; numbers[j] = numbers[j + 1]; numbers[j + 1] = tmp; } } } console.log(numbers);
程式碼優化:
var numbers = [1, 2, 3, 4, 5]; // 外層迴圈:控制趟數,每一趟找到一個最大值 for (var i = 0; i < numbers.length - 1; i++) { // 假設資料排好順序了 var isSort = true; // 內層迴圈:控制比較的次數,並且判斷兩個數的大小,把大的數往後移動,小的數往前移動 for (var j = 0; j < numbers.length - 1 - i; j++) { // 兩兩比較從小到大排序 if (numbers[j] > numbers[j + 1]) { // 沒有排好 isSort = false; // 交換位置 var tmp = numbers[j]; numbers[j] = numbers[j + 1]; numbers[j + 1] = tmp; } } // 某一趟結束,判斷一下排序是否結束 // 如何判斷排序是否排好,根據是否發生了資料交換,如果發生了資料交換說明沒有排好 if (isSort) { // 如果排好順序 break; } } console.log(numbers);
030案列 - 封裝一個函式,可以求一組數的最大值。
function getMax() { var max = arguments[0]; // 使用 arguments 獲取動態實參 for (var i = 1; i < arguments.length; i++) { if (max < arguments[i]) { max = arguments[i]; } } return max; } // 測試 求任意一組數的最大值 var max = getMax(5, 10, 1, 5, 100); console.log(max);
031案例 - 封裝一個函式可以求任意個數的和
function getSum() { var sum = 0; // 使用 arguments 獲取動態實參 for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } // 測試 求任意個數的和 var sum = getSum(5, 1, 3, 4); console.log(sum);
032案例 - 求斐波那契數列Fibonacci中的第n個數是多少?
// 斐波那契數列特徵:1 1 2 3 5 8 13 21... function getFib(n) { // 函式體 var n1 = 1; var n2 = 1; var n3; for (var i = 3; i <= n; i++) { n3 = n1 + n2; n1 = n2; n2 = n3; } return n3; } // 求第 6 個斐波那契數列的數 var r = getFib(6); console.log(r);
033案例 - 翻轉陣列,返回一個新陣列
function reverse(array) { var newArray = []; for (var i = array.length - 1; i >= 0; i--) { newArray[newArray.length] = array[i]; } return newArray; } // 測試翻轉一個數組 var arr = [5, 3, 2, 1]; console.log(reverse(arr));
034案例 - 對陣列排序,從小到大 -- 使用氣泡排序
function sort(array) { // 外層迴圈 控制趟數 for (var i = 0; i < array.length - 1; i++) { // 假設排好序了 var isSort = true; // 內層迴圈 控制比較的次數 for (var j = 0; j < array.length - 1 - i; j++) { if (array[j] > array[j + 1]) { isSort = false; // 交換位置 var tmp = array[j]; array[j] = array[j + 1]; array[j + 1] = tmp; } } // 判斷是否排好了 if (isSort) { break; } } return array; } // 測試 排序一個數組 var array = [34, 12, 88, 20, 30]; console.log(sort(array));
035案例 - 輸入一個年份,判斷是否是閏年[閏年:能被4整數並且不能被100整數,或者能被400整數]。
function isRun(year) { var result = false; if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) { result = true; } return result; } console.log(isRun(2016));
036案例 - 輸入某年某月某日,判斷這一天是這一年的第幾天?
// 判斷年份是否是閏年 function isRun(year) { var result = false; if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) { result = true; } return result; } // 獲取年月日 是當前年的多少天 function getDays(year, month, day) { // 計算總共有多少天 var days = day;// 當前月份的天數 for (var i = 1; i < month; i++) { switch (i) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: days += 31; break; case 4: case 6: case 9: case 11: days += 30; break; case 2: // 判斷是平年28還是閏年29 if (isRun(year)) { days += 29; } else { days += 28; } break; } } return days; } // 測 1998年5月2日 console.log(getDays(1998, 5, 2));
037案例 - 求10-20之間的隨機數 [10, 20] 整數
// 封裝函式 function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // 呼叫函式 console.log(random(10, 20));
038案例 - 隨機生成顏色RGB [0, 255] 整數
// 使用rgb 顏色模式:rgb(100, 100, 100) // 封裝整數區間 function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } // 封裝每種顏色模式的值區間 function randomRGB(min, max) { var color1 = random(min, max); var color2 = random(min, max); var color3 = random(min, max); return 'rgb(' + color1 + ', ' + color2 + ', ' + color3 + ')'; } // 隨機生成顏色 console.log(randomRGB(0, 255))
039案例 - 模擬實現 max()/min() 方法 ,並封裝
var MyMath = { max: function () { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (max < arguments[i]) { max = arguments[i]; } } return max; }, min: function () { var min = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (min > arguments[i]) { min = arguments[i]; } } return min; } }; // 測試封裝的方法 console.log(MyMath.max(10, 1, 100, 20));
040案例 - 封裝一個函式,格式化日期物件,返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) { // 判斷引數date是否是日期物件 // instanceofinstance 例項(物件)of 的 // console.log(date instanceof Date); if (!(date instanceof Date)) { console.error('date不是日期物件') return; } var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds(); // 以兩位數顯示 // if (month < 10) { //month = '0' + month; // } month = month < 10 ? '0' + month : month; day = day < 10 ? '0' + day : day; hour = hour < 10 ? '0' + hour : hour; minute = minute < 10 ? '0' + minute : minute; second = second < 10 ? '0' + second : second; return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } // ---------呼叫封裝的函式----------------- var d = new Date(); var dateStr = formatDate(d); console.log(dateStr); d = new Date(2017, 8, 10); var dateStr = formatDate(d); console.log(dateStr);
041案例 - 計算時間差,返回相差的天/時/分/秒
function getInterval(start, end) { // 兩個日期物件,相差的毫秒數 var interval = end - start; // 求 相差的天數/小時數/分鐘數/秒數 var day, hour, minute, second; // 兩個日期物件,相差的秒數 // interval = interval / 1000; interval /= 1000; day = Math.round(interval / 60 / 60 / 24); hour = Math.round(interval / 60 / 60 % 24); minute = Math.round(interval / 60 % 60); second = Math.round(interval % 60); return { day: day, hour: hour, minute: minute, second: second } } var d1 = new Date(); var d2 = new Date(2017, 9, 1); var o = getInterval(d1, d2); console.log(o);
042案例 - 模擬 sort() 方法內部實現
// 對陣列排序,從小到大-- 氣泡排序 function sort(array, fnCompare) { // 外層迴圈 控制趟數 for (var i = 0; i < array.length - 1; i++) { // 假設排好序了 var isSort = true; // 內層迴圈 控制比較的次數 for (var j = 0; j < array.length - 1 - i; j++) { if (fnCompare(array[j], array[j + 1]) > 0) { isSort = false; // 交換位置 var tmp = array[j]; array[j] = array[j + 1]; array[j + 1] = tmp; } } // 判斷是否排好了 if (isSort) { break; } } } var arr = [56, 10, 1, 17]; sort(arr, function (a, b) { return b - a; }) console.log(arr);
043案例 - 將一個字串陣列的元素的順序進行反轉。
var arr = ["a", "b", "c", "d"]; arr.reverse(); console.log(arr);
044案例 - 工資的陣列[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除
var arr = [1500, 1200, 2000, 2100, 1800]; // filter方法相容 IE9 及以上瀏覽器 var newArray = arr.filter(function (item) { // item就是陣列中的每一個元素 return item < 2000; }) console.log(newArray);
045案例 - 找到陣列['c', 'a', 'z', 'a', 'x', 'a']中每一個a出現的位置
var arr = ['c', 'a', 'z', 'a', 'x', 'a']; // whiledo...while var index = -1; do { // indexOf 如果沒有匹配到指定字元,返回 -1 index = arr.indexOf('a', index + 1); if (index !== -1) { console.log(index); } } while (index !== -1);
046案例 - 編寫一個方法去掉一個數組['c', 'a', 'z', 'a', 'x', 'a']的重複元素
function clear(arr) { // 1 如何獲取陣列中每一個元素出現的次數 var o = {}; // 記錄陣列中元素出現的次數 for (var i = 0; i < arr.length; i++) { var item = arr[i]; // 陣列中的每一個元素 // o[item] = 1; // 判斷o物件是否有當前遍歷到的屬性 if (o[item]) { // 如果o[item] 存在,說明次數不為1 o[item]++; } else { // 如果o[item] 不存在,說明是第一次出現 o[item] = 1; } } // 2 生成一個新的陣列,儲存不重複的元素 var newArray = []; // 遍歷物件o中的所有屬性 for (var key in o) { // 判斷o物件中當前屬性的值是否為 1如果為1 說明不重複直接放到新陣列中 if (o[key] === 1) { newArray.push(key); } else { // o物件中當前屬性 次數不為1 ,說明有重複的,如果有重複的話,只儲存一次 // 判斷當前的newArray陣列中是否已經有該元素 if (newArray.indexOf(key) === -1) { newArray.push(key); } } } return newArray; } // 去除陣列中的 a var array = ['c', 'a', 'z', 'a', 'x', 'a']; var newArray = clear(array); console.log(newArray);
047案例 - 擷取字串"我愛中華人民共和國",中的"中華"
var s = '我愛中華人民共和國'; // 第一個引數,擷取的開始位置 // 第二個引數,擷取的長度 var newStr = s.substr(2, 2); console.log(newStr);
048案例 - "abcoefoxyozzopp"查詢字串中所有o出現的位置
// indexOflastIndexOf var s = 'abcoefoxyozzopp'; // 當查詢不到的時候返回的是-1 var index = -1; do { index = s.indexOf('o', index + 1); if (index !== -1) { console.log(index); } } while (index !== -1);
049案例 - 把字串中所有的o替換成!
var s = 'abcoefoxyozzopp'; //abc!efoxyozzopp //只會替換第一個找到的字串 // s = s.replace('o', '!'); // console.log(s); // var index = -1; do { index = s.indexOf('o', index + 1); if (index !== -1) { // 替換 s = s.replace('o', '!'); } } while(index !== -1); console.log(s);
050案例 - 把字串中的所有空白去掉' abc xyz a 123 '
// trim() 只可以去除字串前後的空格 // s = s.trim(); // console.log('===' + s + '==='); // 思路1 可以把 字串中的所有空格 字串用replace替換成 ''空字串 // 思路2 使用split 簡化 // split 演示如何使用 // var str = 'a,b,c,d'; // var arr = str.split(','); // console.log(arr.join('!')); var s = 'abcxyza123'; var arr = s.split(' '); console.log(arr.join(''));
051案例 - 判斷一個字串中出現次數最多的字元,統計這個次數
var s = 'abcoefoxyozzopp'; var ch; // 此字元出現的次數 var num; // 記錄字串中每一個字元出現的次數 var o = {}; for (var i = 0; i < s.length; i++) { var item = s.charAt(i); if (o[item]) { // 已經有該屬性,+1 o[item]++; } else { // 物件中沒有該屬性 o[item] = 1; } } // 2 求最大值 並且找到次數最多的字元 // 假設最大值是1 num = 1; for (var key in o) { if (num < o[key]) { // 最多的次數 num = o[key]; // 次數最多的字元 ch = key; } } console.log(num); console.log(ch);
052案例 - 獲取url中?後面的內容
var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2'; // console.log(url.substr(2)); // var index = url.indexOf('?') + 1; // console.log(url.substr(index)); // { //name: 'zs', //age: 18 // } // 獲取url後面的引數 function getParams(url) { // 獲取? 後面第一個字元的索引 var index = url.indexOf('?') + 1; // url中?後面的字串 name=zs&age=18&a=1&b=2 var params = url.substr(index); // 使用& 切割字串 ,返回一個數組 var arr = params.split('&'); var o = {}; // 陣列中每一項的樣子 key = value for (var i = 0; i < arr.length; i++) { var tmpArr = arr[i].split('='); var key = tmpArr[0]; var value = tmpArr[1]; o[key] = value; } return o; } var obj = getParams(url); console.log(obj); console.log(obj.name); console.log(obj.age);