JavaScript基础部分经典案例

Posted PingWebNotes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 + '
';
      str += '
';
    }
    
    console.log(str);

018案例 - 在控制台打印三角形

    // 外层循环 控制输出的行数
    var str = '';
    for (var i = 0; i < 10; i++) {
      // 内层循环  控制输出的每一行的*的个数
      for (var j = i; j < 10; j++) {
        str += '* ';
      }
      str += '
';
    }
    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 + '	';
      }
      str += '
';
    }
    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);

以上是关于JavaScript基础部分经典案例的主要内容,如果未能解决你的问题,请参考以下文章

几个关于js数组方法reduce的经典片段

几个关于js数组方法reduce的经典片段

常用Javascript代码片段集锦

TIM 案例

JavaScript 代码片段

48个值得掌握的JavaScript代码片段(上)