JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象

一、内置对象

1.内置对象

  • JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
  • 前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于JS独有的,JS API讲解
  • 内置对象就是指js语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而非必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发。

2.查文档

学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN或W3C来查询
MDN(查阅文档):https://developer.mozilla.org/zh-CN/

3.Math对象

3.1 Math对象  不是构造函数(可以直接使用里面的属性和方法),它具有数学常数和函数的属性和方法,跟数学相关。

属性、方法名 功能
Math.PI 圆周率
Math.floor() 向下取整(往小了取整)
Math.ceil() 向上取整(往大了取整)
Math.round() 四舍五入版 就近取整   注意 -3.5   结果是  -3
Math.abs()

绝对值

(注意:有隐式转换 会把字符串型-1 转换为数字型)

但是:console.log(Math.abs('pink'));       // NaN

Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值

         // Math对象 不是构造函数(可以直接使用里面的属性和方法)
        console.log(Math.PI);                    // 一个属性 圆周率
        console.log(Math.max(1,99,3));          // 99
        console.log(Math.max(1,99,3,'pink'));   // NaN
        console.log(Math.max());                // -Infinity
        // Math.max()返回值:给定数值中最大的数。如果任一参数不能转换为数值,则返回 NaN。如果没有提供参数,返回 -Infinity。

        // 案例:利用对象封装自己的数学对象 里面有PI 最大值和最小值
        var myMath = {
            PI: 3.141592653,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;         // max
            },           // “,”不要忘了
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;        // min
            }
        }
        console.log(myMath.PI);             // 3.141592653
        console.log(myMath.max(1,5,9));     // 9

        // 1.绝对值方法
        console.log(Math.abs(1));       // 1
        console.log(Math.abs(-1));      // 1
        console.log(Math.abs('-1'));    // 1   注意:隐式转换 会把字符串型-1 转换为数字型  !!!!!
        // console.log(Math.abs('pink'));       // NaN
        // 2.三个取整方法
        // 1) Math.floor()   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 特殊,它往大了取  如-1.5
        console.log(Math.round(1.1));    // 1
        console.log(Math.round(1.5));    // 2
        console.log(Math.round(-1.5));   // -1    !!!!!!!
        console.log(Math.round(-1.9));   // -2

其他见

Math - JavaScript | MDNMath 是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

3.2 随机数方法 random()

  • Math.random() 函数返回一个浮点数,伪随机数在范围 [0 , 1) ,然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
  • 这个方法里面不跟参数
  • 返回值:一个浮点型伪随机数字,在0(包括 0)和1(不包括)之间。

        // 1. random() 方法中不跟参数    ,返回一个随机小数,[0,1)
        console.log(Math.random());     // 0.850641947562953

        // 2.得到一个两数之间的随机整数 并且 包含这两个数  [min,max]
        // 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,4));    

        // 3.随机点名
        var arr = ['张三','李四','王五','老六'];
        console.log(arr[getRandom(0,arr.length - 1)]);

1)得到一个两数之间的随机数 / 随机整数

  • 返回值:返回了一个在指定值之间的随机数。这个值不小于 min(有可能等于),并且小于(不等于)max。 公式: [min,max)
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
  • 这个例子返回了一个在指定值之间的随机整数。这个值不小于 min (如果 min 不是整数,则不小于 min 的向上取整数),且小于(不等于)max。 [floor(min),max)
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值,含最小值
}

案例:猜数字游戏

        // 1.猜数字游戏  程序随机生成了一个1~10之间的数字,并让用户输入一个数字.
        // 如果大于该数字,就提示 数字大了,继续猜
        // 如果小于该数字,就提示 数字小了,继续猜
        // 如果等于该数字,就提示 猜对了,结束程序

        // 随机生成了一个1~10之间的数字,我们需要用到 Math.random()方法
        // 需要一直猜到正确为止,所有需要一直循环
        // while循环更简单
        // 核心算法:使用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;              // 退出整个循环结束程序
            }
        }

4. 日期对象 Data 对象

4.1

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

  • 使用Date实例化日期对象

    • 获取当前时间必须实例化(和Math的区别)

    • 获取指定时间的日期对象

        // Date() 日期对象  是一个构造函数 必须使用new 来创建日期对象
        var arr = new Array();   // 创建了一个数组对象
        var obj = new Object();   // 创建了一个对象实例
        // 1.使用Date  如果没有参数 返回当前系统的当前时间
        var date = new Date();    // 实例化
        console.log(date);   // Date Wed Mar 29 2023 19:36:05 GMT+0800 (中国标准时间)
        // 2.参数常用的写法 数字型 2023,3,29 或者是字符串 '2023-3-29 19:32:8'
        var date1 = new Date(2023,3,29);
        console.log(date1);   // Date Sat Apr 29 2023 00:00:00 GMT+0800 (中国标准时间)
        var date2 = new Date('2023-3-29 19:32:8');
        console.log(date2);   // Date Wed Mar 29 2023 19:32:08 GMT+0800 (中国标准时间)

4.2 日期格式化  年月日

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

  • getMonth()方法获取到的月份 + 1 = 当月

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第1张图片

        // 格式化日期  年月日
        var date = new Date();
        console.log(date.getFullYear());   // 返回当前日期的年  2023
        console.log(date.getMonth());     // 月份 返回的月份小一个月 0~11   记得把月份加一哦!!如下   >>> 2
        console.log(date.getMonth() + 1);   // 3
        console.log(date.getDate());        // 返回的是几号  29
        console.log(date.getDay());        // 3 返回的是(纯数字)星期几  注:周日0~周六6

        // 写一个 2023年 3月 29日 星期三
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];   // 必须第一个是星期日0
        var day = date.getDay();
        console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);  // 今天是:2023年3月29日 星期三

4.3 格式化日期 时分秒

        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours());        // 时  19
        console.log(date.getMinutes());      // 分  58 
        console.log(date.getSeconds());     // 秒   7

        // 要求封装一个函数返回当前的时分秒  格式:19:58:08
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;   
         //即: 条件表达式 ? 表达式1 : 表达式2;如果条件表达式为 true ,则返回表达式1的值,如果条件表达式为 false,则返回表达式2的值
            var m = time.getMinutes();     
            m = m < 10 ? '0' + m : m;       // 若没有该语句的话,返回 20:0:53,有的话:20:00:53
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;   // 20:06:34
        }
        console.log(getTime());

4.4 获取Date日期总的毫秒数(时间戳)

基于1970年1月1日(世界标准世界)起的毫秒数

        // 获取Date日期总的毫秒数  不是当前时间的毫秒数  而是我们现在时间距离1970年1月1日过了多少毫秒数
        // 1.通过 valueOf()    getTime()
        var date = new Date();
        console.log(date.valueOf());  // 1680091888892
        console.log(date.getTime());  // 1680091888892

        // 2.简单的写法
        var date1 = +new Date();     // +new Date()  返回的就是总的毫秒数
        console.log(date1);          // 1680091995966

        // 3.H5新增的 获得总的毫秒数
        console.log(Date.now());     // 1680091995966

4.5 倒计时案例

  倒计时案例 :
  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;   // time是 剩余时间的秒数   (秒数=毫秒数/1000)
            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('2023-3-29 20:26:24'));  // 00天00时0-4分0-38秒

5.数组对象

5.1创建数组的两种方式

  •  字面量方式            var arr = [1,"test",true];

  • 实例化数组对象 new Array()     var arr = new Array();

    • 注意:上面代码中arr创建出的是一个空数组,如果需要使用构造函数Array创建非空数组,可以在创建数组时传入参数

    • 如果只传入一个参数(数字),则参数规定了数组的长度。

    • 如果传入了多个参数,则参数称为数组的元素。

        // 创建数组的两种方式
        // 1.利用数组字面量
        var arr = [1,2,3];
        console.log(arr[0]);             // 1

        // 2. 利用new Array()
        // var arr1 = new Array();   // 创建了一个空的数组
        var arr1 = new Array(2);     // 这个2 表示数组的长度为2  里面有两个空的数组元素
        console.log(arr1);                // Array [ <2 empty slots> ]
        var arr2 = new Array(2,3);        // 等价于 [2,3]  这样写表示里面有2个数组元素 是2和3
        console.log(arr2);

5.2 检测是否为数组

1). instanceof 运算符

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

2). Array.isArray(参数)

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

        // 检测是否为数组
        // 1) instanceof  运算符(可理解为 是否)  它可以用来检测是否为数组
        var arr1 = [];
        var obj = {};
        console.log(arr1 instanceof Array);          // true
        console.log(obj instanceof Array);          // false

        // 2) Array.isArray(参数)
        console.log(Array.isArray(arr1));          // true
        console.log(Array.isArray(obj));           // false

        // 翻转数组改良版
        function reverse(arr) {
            if (arr instanceof Array) {
                var newArr = [];
                for (var i = arr.length - 1;i >= 0;i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            } else {
                return '这个参数必须是数组格式[1,2,3]';
            }
        }
        console.log(reverse(1,2,3));         // 这个参数必须是数组格式[1,2,3]
        console.log(reverse([1,2,3]));       // Array(3) [ 3, 2, 1 ]

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

  • 数组中有进行增加、删除元素的方法,部分方法如下表

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第2张图片

注:添加有参数且可添加一个或多个元素,返回新数组的长度;

删除无参数且只能删除一个元素,返回删除的那个元素的值

        // 添加删除数组元素方法
        // 1.push()  ——末尾添加
        var arr1 = [1,2,3];
        // arr1.push(4,'pink');
        console.log(arr1.push(4,'pink'));      // 5
        console.log(arr1);         // Array(5) [ 1, 2, 3, 4, "pink" ]
        // (1) push() 参数直接写 数组元素就可以了
        // (2) push完毕后,返回的是 新数组的长度
        // (3) 原数组也会发生变化

        // 2.unshift()   ——开头添加
        console.log(arr1.unshift('red','green'));   // 7
        console.log(arr1);         // Array(7) [ "red", "green", 1, 2, 3, 4, "pink" ]

        // 3.pop()   ——末尾删除最后一个
        console.log(arr1.pop());       // pink
        console.log(arr1);             // Array(6) [ "red", "green", 1, 2, 3, 4 ]
        // (1) pop 可以删除数组的最后一个元素,一次只能删除一个
        // (2) pop()没有参数
        // (3) pop完毕后,返回结果是 删除的那个元素
        // (4) 原数组会发生变化

        // 4. shift()  ——开头删除第一个
        console.log(arr1.shift());   // red
        console.log(arr1);             // Array(5) [ "green", 1, 2, 3, 4 ]

5.4  数组排序

数组中有对数组本身排序的方法,部分方法如下表

方法名 说明 是否修改原数组
reverse() 颠倒数组中元素的顺序,无参数 该方法会改变原来的数组 返回新数组
sort() 对数组的元素进行排序 该方法会改变原来的数组 返回新数组

注意:sort方法需要传入参数(函数)来设置升序、降序排序

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

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

     // 踩坑 数组sort()排序(冒泡排序) return a - b 则升序
     // 写法固定 参考如下
     var arr1 = [13,4,77,1,7];
     arr1.sort(function(a,b){
        return a-b;    // 升序的顺序排列
        // return b-a;   // 降序的顺序排列
     });
     console.log(arr1);

5.5 数组索引方法

数组中有获取数组指定元素索引值的方法,部分方法如下表

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第3张图片

5.6 数组转换为字符串

  • 数组中有把数组转化为字符串的方法,部分方法如下表

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

    JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第4张图片

    var arr = [1, 2, 3, 4];
    var arr2 = arr;
    var str = arr.toString(); // 将数组转换为字符串
    console.log(str);  // 1,2,3,4
      
    var str2 = arr2.join('\');//按照键入字符将数组转换为字符串
    console.log(str2);   // 1\2\3\4

其他方法:

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第5张图片

    var arr = [1, 2, 3, 4];
    var arr2 = [5, 6, 7, 8];
    var arr3 = arr.concat(arr2);
    console.log(arr3); // [1,2,3,4,5,6,7,8]

    // slice(begin,end) 是一种左闭右开区间 [1,3)
    // 从索引1出开始截取,到索引3之前
    var arr4 = arr.slice(1, 3);
    console.log(arr4); // [2,3]

    var arr5 = arr2.splice(0, 3);
    console.log(arr5); // [5,6,7]
    console.log(arr2); // [8]   splice()会影响原数组

 案例:数组去重

        // 有一个数组['c','a','z','a','x','a','x','c','b']要求去除数组中重复元素
        function unique(arr) {
            var newArrr = [];
            for (var i = 0;i < arr.length;i++) {
                if (newArrr.indexOf(arr[i]) == -1) {
                    newArrr.push(arr[i]);
                }
            }
            return newArrr;
        }
        var demo = unique(['c','a','z','a','x','a','x','c','b']);
        console.log(demo);         // Array(5) [ "c", "a", "z", "x", "b" ]

6. 字符串对象

6.1基本包装类型

为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
    基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

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

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

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

6.2 字符串的不可变

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

  • 当重新给字符串变量赋值的时候,变量之前保存的字符串不会被修改,依然在内存中重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变。

  • 由于字符串的不可变,在 大量拼接字符串 的时候会有效率问题

6.3 根据字符返回位置

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

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

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第6张图片

    var str = "anndy";
    console.log(str.indexOf("d")); // 3
    //指定从索引号为4的地方开始查找字符"d"
    console.log(str.indexOf("d", 4)); // -1
    
    console.log(str.lastIndexOf("n")); // 2

6.4 根据位置返回字符

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

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第7张图片

      // 根据位置返回字符
      // 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));
      } // a n d y  (每行一个)
      
      // 2. charCodeAt(index)  
      //返回相应索引号的字符ASCII值 目的: 判断用户按下了那个键 
      console.log(str.charCodeAt(0)); // 97
      // 3. str[index] H5 新增的
      console.log(str[0]); // a

 案例:

1.查找字符串"abcoefoxyozzopp"中所有o出现的位置及次数

2.判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符,并统计其次数

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

        // 2.判断一个字符串 '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]++;          // 是属性值+1
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);         // Object { a: 1, b: 1, c: 1, o: 4, e: 1, f: 1, x: 1, y: 1, z: 2, p: 2 }
        // 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);          // 4
        console.log("最多的字符是" + ch);      // 最多的字符是o

6.5 字符串操作方法

JavaScript笔记6--内置对象、查文档、Math对象、日期对象、数组对象、字符串对象_第8张图片

      // 字符串操作方法
      // 1. concat('字符串1','字符串2'....)
      var str = 'andy';
      console.log(str.concat('red')); // andyred

      // 2. substr('截取的起始位置', '截取几个字符');
      var str1 = '改革春风吹满地';
      // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符
      console.log(str1.substr(2, 2)); // 春风

 

replace()方法

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

字符串.replace(被替换的字符串, 要替换为的字符串);

split()方法

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

  • 其使用格式如下:

字符串.split("分割字符")
    // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
    var str = "andyandy";
    console.log(str.replace("a", "b"));           // bndyandy
    // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
    var str1 = "abcoefoxyozzopp";
    while (str1.indexOf("o") !== -1) {
      str1 = str1.replace("o", "*");
    }
    console.log(str1);        // abc*ef*xy*zz*pp

    // 2. 字符转换为数组 split('分隔符')    
    // 前面我们学过 join 把数组转换为字符串
    var str2 = "red, pink, blue";
    console.log(str2.split(","));            //["red","pink","blue"]
    var str3 = "red&pink&blue";
    console.log(str3.split("&"));           // ["red","pink","blue"]

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