javaScript学习笔记五--内置对象(math / Date / 数组 / 字符串 ) /案例:倒计时效果

对象
对象分为三大类:

自定义对象
内置对象
浏览器对象
内置对象
内置对象就是JS语言自带的一些对象,供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
帮助我们快速开发

内置对象很多,可以查阅文档
MDN文档:http://developer.mozilla.org/zh-CN/

常用内置对象
Math对象
 

//Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不    是一个函数对象。
//Math 用于 Number 类型。它不支持 BigInt。
console.log(Math.PI); //圆周率
console.log(Math.max(1, 99, 3)); //99
console.log(Math.max(1, 99, yang)); //NaN
console.log(Math.max()); //-Infinity
//利用对象封装自己的数学对象 里面有PI 最大值和最小值
      var myMath = {
        PI: 3.1415926,
        max: function () {
          var max = arguments[0];
          for (var i = 0; i < arguments.length; i++) {
            if (arguments[i] > max) {
              max = arguments[i];
            }
          }
          return max;
        },
        min: function () {
          var min = arguments[0];
          for (var i = 0; i < arguments.length; i++) {
            if (arguments[i] < min) {
              min = arguments[i];
            }
          }
          return max;
        },
      };
      console.log(myMath.PI);
      console.log(myMath.max(9, 66, 25, 62));

Math常用内置对象

//**1.绝对值方法**
      console.log(Math.abs(-1)); // 1
      console.log(Math.abs("-1")); //1
      console.log(Math.abs("pink")); //NaN
      
      //**2.三个取整方法**
      //(1)Math.floor() 向下取整 ,往最小取整
      console.log(Math.floor(1.9)); //1
      //(2)Math.ceil() 向上取整 ,往最大取整
      console.log(Math.ceil(1.1)); //1
      //(3)Math.round() 四舍五入   其他数字都是正常情况,但.5他特殊,往大处取
      console.log(Math.round(1.2)); //1
      console.log(Math.round(-1.5)); // -1

      //**随机数方法 random()**
      //random() 返回一个随机的小鼠 0 =< x < 1  这个方法里不跟参数
      console.log(Math.random()); //输出任意在0-1间的小数
      
      //得到两个数之间的随机整数,并且包括这两个数
      //Math.floor(Math.random()*(max - min + 1)) + min;
      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      console.log(getRandom(1, 10)); //输出人格一个1-10之间的整数

Math.floor(Math.random()*(max - min + 1)) + min; //重要

Date日期对象

Date 日期对象 是一个构造函数 必须使用 new 来调用创建我们的日期对象

      var arr = new Array(); //创建一个数组对象
      var obj = new Object(); //创建了一个实例对象
      //1.使用Date   如果没有参数,返回当前系统的当前时间
      var date = new Date();
      console.log(date);
      //2.参数常用的写法  数字型 2020,09,28   或者是字符串型 ‘2020-09-28 8:8:8’
      var date1 = new Date(2020, 09, 1);
      console.log(date1); //返回的是10月,不是9月
      var date2 = new Date("2020-09-28 8:8:8");
      console.log(date2);//此时返回的正确

格式化日期 年月日

//想得到一个2020 年11月29日星期一
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var arr = ["日", "一", "二", "三", "四", "五", "六"];
      var week = date.getDay();
      console.log(year + "年" + month + "月" + day + "日" + "星期" + arr[week]);

格式化日期 时分秒

//格式化日期 时分秒
      function getTime() {
        var time = new Date();
        var h = time.getHours(); //的到当前小时
        h = h > 10 ? h : "0" + h;
        var m = time.getMinutes(); //得到当前分钟
        m = m > 10 ? m : "0" + m;
        var s = time.getSeconds(); //得到当前秒
        s = s > 10 ? s : "0" + s;
        return h + ":" + m + ":" + s;
      }
      console.log(getTime());

获取日期的总的毫秒数(时间戳) 永远不会重复 Date对象是基于1970年1月1日起的毫秒数

      //获取日期的总的毫秒数(时间戳) 永远不会重复  Date对象是基于1970年1月1日起的毫秒数
      //valueOf()  或 getTime()
      var time = new Date();
      console.log(time.valueOf());
      console.log(time.getTime());
      //简单的写法
      var date = +new Date(); // + new Date()  返回的就是总的毫秒数
      console.log(date);
      //H5新增方法  有兼容性问题
      console.log(Date.now());

倒计时效果(重要)
算法:
1.用输入的时间减去现在的时间即倒计时,但不能用时分秒直接相减,会有负数
2. 用时间戳实现 用户输入的时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数
3.把剩余时间总的毫秒数转化为天、时、分、秒
转换公式:
d = parseInt(总秒数/60/60/24) 计算天数
h = parseInt(总秒数/60/60%24) 计算小时
m = parseInt(总秒数/60%60) 计算分钟数
s = parseInt(总秒数%60) 计算当前秒数

倒计时具体代码:
 

function countDown(time) {
        var nowTime = +new Date(); //返回当前时间总的毫秒数
        var inputTime = +new Date(time);
        var times = (inputTime - nowTime) / 1000; //times 是剩余时间总的毫秒数
        var d = parseInt(times / 60 / 60 / 24);
        d = d > 10 ? d : "0" + d;
        var h = parseInt((times / 60 / 60) % 24);
        h = h >=m 10 ? h : "0" + h;
        var m = parseInt((times / 60) % 60);
        m = m >= 10 ? m : "0" + m;
        var s = parseInt(times % 60);
        s = s >= 10 ? s : "0" + s;
        return "倒计时为:" + d + "天" + h + "时" + m + "分" + s + "秒";
      }
      console.log(countDown("2020-10-1 12:00:00"));

数组对象

数组对象是一个有序的数据(数据可以是 原始类型 或 对象类型)集合。相对于变量,数组可用于在一个变量中存储多个变量值


创建数组

        //创建数组的两种方式
        //方式一
        var arr1 = new Array(2);  //创建了一个长度为2的数组,里面有两个空的数组元素
        var arr2 = new Array(2,3);  //等价于[2,3] 表示里面有两个元素 是2和3
        //方式二
        var arr3 =[];  
        console.log(arr3);

检测是否为数组

      //检测是否为数组
      //(1)instanceof 运算符  它可以用来检测是否为数组
      var arr = [];
      var obj = {};
      console.log(arr instanceof Array); //true
      console.log(obj instanceof Array); //false
      //方法(2) Array.isArray(参数)  参数为要检测的值  H5新增 ie9以上支持
      console.log(Array.isArray(arr));  //true

添加删除数组元素

  • push() 在我们数组的末尾添加一个或者多个数组元素
          var arr = [1, 2, 3];
          arr.push(4, "pink");
          console.log(arr); //输出[1, 2, 3, 4, 'pink']
          console.log(arr.push(4,'pink'));  //输出7
    

    (1)push是可以给数组追加新的元素
    (2)push () 参数直接写 数组元素就可以了
    (3)push 完毕之后,返回的结果是 新数组的长度
    (4)原数组也会发生变化

  • unshift() 在数组的开头添加一个或多个数组元素
          var arr = [1, 2, 3];
          arr.unshift(4, "pink");
          console.log(arr);  //输出[4, 'pink', 1, 2, 3]
          console.log(arr.unshift(4, "pink")); //输出7
    

    (1)unshift是可以给数组追加新的元素
    (2)unshift () 参数直接写 数组元素就可以了
    (3)unshift 完毕之后,返回的结果是 新数组的长度
    (4)原数组也会发生变化

  • pop() : 删除数组的最后一个元素,一次只能删一个
          var arr = [1, 2, 3, 4, 5, 6];
          arr.pop(); //删除6
          console.log(arr); //输出 [1, 2, 3, 4, 5]
          console.log(arr.pop()); //输出5  即输出刚刚删除的数字
    

    (1)pop是可以删除数组的最后一个元素,一次只能删除一个
    (2)pop()没有参数
    (3)pop 完毕之后,返回的结果是 刚删除的元素
    (4)原数组也会发生变化

  • shift() : 删除数组的第一个元素,一次只能删一个
          var arr = [1, 2, 3, 4, 5, 6];
          arr.shift(); //删除1
          console.log(arr); //输出 [ 2, 3, 4, 5, 6]
          console.log(arr.shift()); //输出2  即输出刚刚删除的数字
    

    1)shift是可以删除数组的第一个元素,一次只能删除一个
    (2)shift()没有参数
    (3)shift 完毕之后,返回的结果是 刚删除的元素
    (4)原数组也会发生变化


    数组排序

  • 1.翻转数组 reverse( )
      var arr = ["pink", "blue", "yellow", "red", "green"];
      arr.reverse();
      console.log(arr); //输出['green', 'red', 'yellow', 'blue', 'pink']
    

  • 2.数组排序 (冒泡排序)
    `sort( function (a, b) {
            //return a-b; //按照升序排列
            return b - a; //按照降序排列
          } );`
    

    例:

         var arr = [2, 6, 8, 3, 9, 4, 9, 7];
          arr.sort(function (a, b) {
            //return a-b; //按照升序排列
            return b - a; //按照降序排列
          });
          console.log(arr); //输出[2, 3, 4, 6, 7, 8, 9, 9]
    

  • 3.数组索引方法 :
  • indexOf(要返回的值) 从前面开始查找
    lastIndexOf(要返回的值) 从后面开始查找

          var arr = ["pink", "blue", "yellow", "red", "blue"];
          console.log(arr.indexOf("blue")); //返回值为1
          console.log(arr.lastIndexOf("blue")); // 返回值为4
    

(1)作用是返回改数组元素的索引号
(2)它只返回第一个满足条件的索引号
(3)它如果在改数组里找不到元素,则返回 -1

数组去重(重点)
算法:
1.遍历旧数组,然后用旧数组去查询新数组,如果该元素在新数组内不存在,则添加,否则不添加
2.利用 新数组.indexOf(数组元素) 如果返回 -1 说明里面没有这个元素

       function unique(arr) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
          if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i]);
          }
        }
        return newArr;
      }
      console.log(unique(["c", "a", "z", "a", "x", "a", "x", "c", "b"]));

  • 4.数组转换为字符串

(1)toString() 把数组转换为字符串,逗号分隔每一项 返回一个字符串

      var arr1 = [1, 2, 3];
      console.log(arr1.toString()); //1,2,3

(2)join(‘分隔符’) 把数组中的所有元素转换为一个字符串 返回一个字符串

      var arr2 = ["pink", "blue", "yellow", "red", "green"];
      console.log(arr2.join());  //pink,blue,yellow,red,green
      console.log(arr2.join("-"));  //pink-blue-yellow-red-green
      console.log(arr2.join("&")); //pink&blue&yellow&red&green

concat() 连接两个或多个数组,不影响原数组 返回一个新的数组

slice() 数组截取 slice(begin , end) 返回被截取项目的新数组

splice() 数组删除splice(从第几个开始,要删除个数) 返回被删除项目的新数组,这个会影响原数组 (重点)

字符串对象
基本包装类型:就是把简单数据类型包装成为了复杂数据类型,这样基本数据类型就有了属性和方法

//字符串是不可变的,我们所看到的变化实际是新开辟了空间,所以不要大量拼接字符串

字符串方法
字符串所有的方法都不会修改字符串本身(字符串是不可变的),操作完成后会返回一个新的字符串

1.根据字符返回位置 indexOf / lastIndexOf
 

     var str = "改革春风吹满地,春天来了";
      console.log(str.indexOf("春")); //返回2
      console.log(str.indexOf("春", 3)); //从索引号为3的位置开始查找 返回8
      console.log(str.lastIndexOf("春")); //返回8

应用案例1:查找字符串中某一个字符出现的位置及次数
算法:
1.先查找第一个o出现的位置
2.然后只要indexOf返回的结果不是-1就继续往后查找
3.因为indexOf只能查找到一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找

代码实例:

        function Seek(str) {
          var count = 0;
          var index = str.indexOf("o");
          while (index !== -1) {
            console.log(index);
            index = str.indexOf("o", index + 1);
            count++;
          }
          result = "次数为" + count;
          return result;
        }
        console.log(Seek("oabcoefoxyozzopp"));

//数组类似题算法一样

//数组类比
      function Seek2(arr) {
        var count2 = 0;
        var index2 = arr.indexOf("red");
        while (index2 !== -1) {
          console.log(index2);
          index2 = arr.indexOf("red", index2 + 1);
          count2++;
        }
        result2 = "次数为" + count2;
        return result2;
      }
      console.log(Seek2(["pink", "blue", "yellow", "red", "green", "red"]));
  • 2.根据位置返回字符

(1) charAt(index)

      var str = "andy";
      console.log(str.charAt(3)); //y
      //遍历所有的字符 输出字符串的所有字符
      for (var i = 0; i < str.length; i++) {
        console.log(str.charAt(i));
      }

(2)charCodeAt(index) 返回相应索引号的字符ACSII值 目的:判断用户按下了哪个键

 console.log(str.charCodeAt(0)); //97

应用案例2: 判断字符串中出现次数最多的字符,并统计次数
算法:
1.利用charAt() 遍历这个字符串
2.把每个字符都赋值给对象,如果对象没有该属性,就为1,如果存在了,就 +1
3.遍历对象,得到最大值和该字符

代码:

var str = "abcoefoxyozzopp";
      var o = {};
      for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i); //chars是字符串中的每一个字符
        if (o[chars]) {
          //o[chars]得到的是属性值
          o[chars]++;
        } else {
          o[chars] = 1;
        }
      }
      console.log(o); //输出对象
      //遍历对象
      var max = 0;
      var ch = "";
      for (var k in o) {
        // k得到的是属性名,o[k]得到的是属性值
        if (o[k] > max) {
          max = o[k];
          ch = k; //k出了for循环就不起作用了,这里再用一个参数存储k
        }
      }
      console.log("出现最多的字符为" + ch);
      console.log("出现次数为" + max);
  • 3.字符串的操作方法

(1)concat(‘字符串1’,‘字符串2’…)

      var str3 = "andy";
      console.log(str3.concat("red"));  //andyred

(2) substr(‘截取的起始位置’,‘截取几个字符’)

var str3 = "andy";
console.log(str3.substr(2, "2"));  //dy 第一个2是索引号的2,第二个2是取两个字符 

(3)substring(start,end) 从start开始截取到end位置,但end取不到,基本与slice相同,但不接受负值

  • 4.替换字符

    replace(‘被替换的字符’,’替换为的字符)
    只会替换第一个字符

          //可借助循环替换字符串中所有想要替换的字符  
          //将字符串中的o替换为*
          var str4 = "abcoefoxyozzopp";
          while (str4.indexOf("o") !== -1) {
            str4 = str4.replace("o", "*");
          }
          console.log(str4);
    

  • 5.字符转换为数组

    split(‘分隔符’) 前面学过join 把数组转换为字符串

    var str5 = "red,pink,blue";
          console.log(str5.split(",")); //['red', 'pink', 'blue']
          var str6 = "red&pink&blue";
          console.log(str6.split("&")); //['red', 'pink', 'blue']
    

你可能感兴趣的:(javascript,javascript,前端)