JavaScript内置对象

一、内置对象

• JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象。

• 前面两种对象是JS 基础内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的。

• 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）

• 内置对象最大的优点就是帮助我们快速开发。

• JavaScript 提供了多个内置对象：Math、 Date 、Array、String等。

二、查文档

• 学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
• Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
• MDN:https://developer.mozilla.org/zh-CN/

三、 Math对象

3.1 Math概述

• Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

  属性、方法名	功能
  Math.PI	圆周率
  Math.floor()	向下取整
  Math.ceil()	向上取整
  Math.round()	四舍五入版 就近取整 注意 -3.5 结果是 -3
  Math.abs()	绝对值
  Math.max()/Math.min()	求最大和最小值

  • 注意：上面的方法使用时必须带括号。

    <script>
      // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
      console.log(Math.PI); // 一个属性 圆周率
      console.log(Math.max(1, 99, 3)); // 99
      console.log(Math.max(-1, -10)); // -1
      console.log(Math.max(1, 99, 'aaa')); // NaN
      console.log(Math.max()); // -Infinity
    </script>
    

    <script>
      // 1.绝对值方法
      console.log(Math.abs(1)); // 1
      console.log(Math.abs(-1)); // 1
      console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
      console.log(Math.abs('aaa')); // NaN 
    
      // 2.三个取整方法
      // (1) Math.floor()   地板 向下取整  往最小了取值
      console.log(Math.floor(1.1)); // 1
      console.log(Math.floor(1.9)); // 1
      // (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
      console.log(Math.ceil(1.1)); // 2
      console.log(Math.ceil(1.9)); // 2
      // (3) Math.round()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
      console.log(Math.round(1.1)); // 1
      console.log(Math.round(1.5)); // 2
      console.log(Math.round(1.9)); // 2
      console.log(Math.round(-1.1)); // -1
      console.log(Math.round(-1.5)); // 这个结果是 -1
    </script>
    

3.2 随机数方法random()

• random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1。

• 得到一个两数之间的随机整数，包括两个数在内：

  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min; 
  }
  

  <script>
    // 猜数字游戏
    // 1.随机生成一个1~10 的整数  我们需要用到 Math.random() 方法。
    // 2.需要一直猜到正确为止，所以需要一直循环。
    // 3.while 循环更简单
    // 4.核心算法：使用 if  else if 多分支语句来判断大于、小于、等于。
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    var random = getRandom(1, 10);
    while (true) { // 死循环
      var num = prompt('你来猜？ 输入1~10之间的一个数字');
      if (num > random) {
        alert('你猜大了');
      } else if (num < random) {
        alert('你猜小了');
      } else {
        alert('你好帅哦，猜对了');
        break; // 退出整个循环结束程序
      }
  
    }
  </script>
  

四、日期对象

4.1 Date概述

• Date 对象和 Math 对象不一样，Date是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。
• Date 实例用来处理日期和时间。

4.2 Date()方法的使用

• 获取当前时间必须实例化：

  var now = new Date();
  console.log(now);
  

• Date() 构造函数的参数：

  • 如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2022-3-2’，可以写成new Date(‘2022-3-2’) 或者 new Date(‘2022/3/2’)

  • 如果Date()不写参数，就返回当前时间。

  • 如果Date()里面写参数，就返回括号里面输入的时间。

    <script>
      // Date() 日期对象  是一个构造函数 必须使用new 来调用创建我们的日期对象
      var arr = new Array(); // 创建一个数组对象
      var obj = new Object(); // 创建了一个对象实例
      // 1. 使用Date  如果没有参数 返回当前系统的当前时间
      var date = new Date();
      console.log(date);
      // 2. 参数常用的写法  数字型  2022, 3, 2  或者是 字符串型 '2022-3-2 8:8:8'
      var date1 = new Date(2022, 3, 2);
      console.log(date1); // 返回的是 11月 不是 10月 
      var date2 = new Date('2022-3-2 8:8:8');
      console.log(date2);
    </script>
    

4.3 日期格式化

• 使用Date实例的方法和属性：

  

• 通过Date实例获取总毫米数。

  • 总毫秒数的含义：基于1970年1月1日（世界标准时间）起的毫秒数。

  • 获取总毫秒数：

    // 实例化Date对象
    var now = new Date();
    // 1. 用于获取对象的原始值
    console.log(date.valueOf())	
    console.log(date.getTime())	
    // 2. 简单写可以这么做
    var now = + new Date();			
    // 3. HTML5中提供的方法，有兼容性问题
    var now = Date.now();
    

• 格式化日期日：

  <script>
    // 格式化日期 年月日 
    var date = new Date();
    console.log(date.getFullYear()); // 返回当前日期的年
    console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
    console.log(date.getDate()); // 返回的是 几号
    console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
  </script>
  

• 格式化日期时分秒：

  <script>
    // 格式化日期 时分秒
    var date = new Date();
    console.log(date.getHours()); // 时
    console.log(date.getMinutes()); // 分
    console.log(date.getSeconds()); // 秒
    // 要求封装一个函数返回当前的时分秒 格式 08:08:08
    function getTimer() {
      var time = new Date();
      var h = time.getHours();
      h = h < 10 ? '0' + h : h;
      var m = time.getMinutes();
      m = m < 10 ? '0' + m : m;
      var s = time.getSeconds();
      s = s < 10 ? '0' + s : s;
      return h + ':' + m + ':' + s;
    }
    console.log(getTimer());
  </script>
  

• 倒计时效果:

  <script>
    // 倒计时效果
    // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
    // 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 ? '0' + d : d;
      var h = parseInt(times / 60 / 60 % 24); //时
      h = h < 10 ? '0' + h : h;
      var m = parseInt(times / 60 % 60); // 分
      m = m < 10 ? '0' + m : m;
      var s = parseInt(times % 60); // 当前的秒
      s = s < 10 ? '0' + s : s;
      return d + '天' + h + '时' + m + '分' + s + '秒';
    }
    console.log(countDown('2022-5-1 18:00:00'));
    var date = new Date();
    console.log(date);
  </script>
  

五、数组对象

5.1 数组对象的创建

• 创建数组的两种方式：

  • 字面量方式

  • new Array()

5.2 检测是否为数组

• instanceof 运算符：

  • instanceof 可以判断一个对象是否是某个构造函数的实例。

    var arr = [1, 23];
    var obj = {};
    console.log(arr instanceof Array); // true
    console.log(obj instanceof Array); // false
    

• Array.isArray()

  • Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法。

    var arr = [1, 23];
    var obj = {};
    console.log(Array.isArray(arr));   // true
    console.log(Array.isArray(obj));   // false
    

5.3 添加删除数组元素的方法

• 数组中有进行增加、删除元素的方法：

  

  • 注意：push、unshift为增加元素方法；pop、shift为删除元素的方法。

    <script>
      // 添加删除数组元素方法
      // 1. push() 在我们数组的末尾 添加一个或者多个数组元素   push  推
      var arr = [1, 2, 3];
      // arr.push(4, 'pink');
      console.log(arr.push(4, 'pink'));
    
      console.log(arr);
      // (1) push 是可以给数组追加新的元素
      // (2) push() 参数直接写 数组元素就可以了
      // (3) push完毕之后，返回的结果是 新数组的长度 
      // (4) 原数组也会发生变化
      // 2. unshift 在我们数组的开头 添加一个或者多个数组元素
      console.log(arr.unshift('red', 'purple'));
    
      console.log(arr);
      // (1) unshift是可以给数组前面追加新的元素
      // (2) unshift() 参数直接写 数组元素就可以了
      // (3) unshift完毕之后，返回的结果是 新数组的长度 
      // (4) 原数组也会发生变化
    
      // 3. pop() 它可以删除数组的最后一个元素  
      console.log(arr.pop());
      console.log(arr);
      // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
      // (2) pop() 没有参数
      // (3) pop完毕之后，返回的结果是 删除的那个元素 
      // (4) 原数组也会发生变化
      // 4. shift() 它可以删除数组的第一个元素  
      console.log(arr.shift());
      console.log(arr);
      // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
      // (2) shift() 没有参数
      // (3) shift完毕之后，返回的结果是 删除的那个元素 
      // (4) 原数组也会发生变化
    </script>
    

5.4 数组排序

• 数组中有对数组本身排序的方法：

  

• 注意：sort方法需要传入参数来设置升序、降序排序：

  • 如果传入“function(a,b){ return a-b;}”，则为升序。

  • 如果传入“function(a,b){ return b-a;}”，则为降序。

    <script>
      // 数组排序
      // 1. 翻转数组
      var arr = ['pink', 'red', 'blue'];
      arr.reverse();
      console.log(arr);
    
      // 2. 数组排序（冒泡排序）
      var arr1 = [13, 4, 77, 1, 7];
      arr1.sort(function(a, b) {
        //  return a - b; 升序的顺序排列
        return b - a; // 降序的顺序排列
      });
      console.log(arr1);
    </script>
    

5.5 数组索引方法

• 数组中有获取数组指定元素索引值的方法：

  

  <script>
    // 返回数组元素索引号方法  indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找
    // 它只返回第一个满足条件的索引号 
    // 它如果在该数组里面找不到元素，则返回的是 -1  
    // var arr = ['red', 'green', 'blue', 'pink', 'blue'];
    var arr = ['red', 'green', 'pink'];
    console.log(arr.indexOf('blue'));
    // 返回数组元素索引号方法  lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
    var arr = ['red', 'green', 'blue', 'pink', 'blue'];
  
    console.log(arr.lastIndexOf('blue')); // 4
  </script>
  

• 数组去重：

  <script>
    // 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
    // 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
    // 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
    // 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
    // 封装一个 去重的函数 unique 独一无二的 
    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;
    }
    // var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
    var demo = unique(['blue', 'green', 'blue'])
    console.log(demo);
  </script>
  

5.6 数组转换为字符串

• 数组中有把数组转化为字符串的方法:

  

  • 注意：join方法如果不传入参数，则按照 “ , ”拼接元素。

    <script>
      // 数组转换为字符串 
      // 1. toString() 将我们的数组转换为字符串
      var arr = [1, 2, 3];
      console.log(arr.toString()); // 1,2,3
      // 2. join(分隔符) 
      var arr1 = ['green', 'blue', 'pink'];
      console.log(arr1.join()); // green,blue,pink
      console.log(arr1.join('-')); // green-blue-pink
      console.log(arr1.join('&')); // green&blue&pink
    </script>
    

5.7 其他方法

• 数组中还有其他操作方法：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yox5GTrC-1651830609328)(/Users/canying/Library/Application Support/typora-user-images/image-20220302210705622.png)]

六、字符串对象

6.1 基本包装类型

• 为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

• 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

  // 下面代码有什么问题？
  var str = 'andy';
  console.log(str.length);
  

  • 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js 会把基本数据类型包装为复杂数据类型，其执行过程如下 ：

    // 1. 生成临时变量，把简单类型包装为复杂数据类型
    var temp = new String('andy');
    // 2. 赋值给我们声明的字符变量
    str = temp;
    // 3. 销毁临时变量
    temp = null;
    

6.2 字符串的不可变

• 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

  var str = 'abc';
  str = 'hello';
  // 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
  // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
  // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
  var str = '';
  for (var i = 0; i < 100000; i++) {
    str += i;
  }
  console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
  

6.3 根据字符返回位置

• 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是返回指定字符的位置的方法：

  

• 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数：

  <script>
    // 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
    // 核心算法：先查找第一个o出现的位置
    // 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
    // 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
    var str = "oabcoefoxyozzopp";
    var index = str.indexOf('o');
    var num = 0;
    // console.log(index);
    while (index !== -1) {
      console.log(index);
      num++;
      index = str.indexOf('o', index + 1);
    }
    console.log('o出现的次数是: ' + num);
  </script>
  

  ​

6.4 根据位置返回字符

• 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是根据位置返回指定位置上的字符：

  

• 在上述方法中，charCodeAt方法返回的是指定位置上字符对应的ASCII码，ASCII码对照表如下：

  

• 判断一个字符串 ‘abcoefoxyozzopp’ 中出现次数最多的字符，并统计其次数：

  <script>
    // 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
    // 核心算法：利用 charAt(） 遍历这个字符串
    // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
    // 遍历对象，得到最大值和该字符
    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);
    // 2. 遍历对象
    var max = 0;
    var ch = '';
    for (var k in o) {
      // k 得到是 属性名
      // o[k] 得到的是属性值
      if (o[k] > max) {
        max = o[k];
        ch = k;
      }
    }
    console.log(max);
    console.log('最多的字符是' + ch);
  </script>
  

6.5 字符串操作方法

• 字符串通过基本包装类型可以调用部分方法来操作字符串，以下是部分操作方法：

  

6.6 replace()方法

• replace() 方法用于在字符串中用一些字符替换另一些字符，其使用格式如下：

  字符串.replace(被替换的字符串， 要替换为的字符串)；
  

6.7 split()方法

• split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

  字符串.split("分割字符")