JavaScript基础部分经典案例
程序员文章站
2023-04-07 19:18:25
再复杂的程序都是由一个个简单的部分组成。整理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是否是日期对象 // instanceof instance 实例(对象) 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']; // while do...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出现的位置
// indexof lastindexof 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 = ' abc xyz a 123 '; 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);
上一篇: python函数缺省值与引用学习笔记分享
下一篇: Flash制作旋转的花朵