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']