JavaScript基础语法11-内置对象 code6

关注

原创 2022-03-01 23:10:07 531 阅读 AI 写同款· GEO 优化 ›

网页页面浮动窗口示例代码（JavaScript Code）这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：具体使用方法，看下面的这个完整的页面代码应该就知道了。//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=orange, 阅读详情

1.内置对象

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

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

2.查文档

查文档学习，通过MDN/W3C来查询

3.Math对象

3.1 常用

    <script>
        // 1. 绝对值方法
        console.log(Math.abs(1)); //1
        console.log(Math.abs(-1));  //1
        console.log(Math.abs('-1'));  //1 隐式转换为数字型
        console.log(Math.abs('mmm')); //NaN
        // 2. 三个取整方法
        // (1) Math.floor()  向下取整
        console.log(Math.floor(1.1)); //1
        console.log(Math.floor(1.7)); //1
        // (1) Math.ceil()  向上取整 ceil:天花板
        console.log(Math.ceil(1.1)); //2
        console.log(Math.ceil(1.7)); //2
        // (1) Math.round()  四舍五入取整  .5 往大了取
        console.log(Math.floor(1.1)); //1
        console.log(Math.floor(1.7)); //2
        console.log(Math.floor(-1.1)); //-1
        console.log(Math.floor(-1.5)); //-1
    </script>

3.2 随机数方法 random( )

Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

Math.random() - JavaScript | MDN

    <script>
        // 1.Math对象随机数方法 random() 返回一个随机的小数 [0,1)
        // 2. 这个方法里面不跟参数
        // 3. 代码验证 
        console.log(Math.random());
        // 4. 两个整数之间的随机整数 并且 包含这两个整数
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
        }
        console.log(getRandomIntInclusive(1,10));
        // 5.随机点名
        var arr = ['张三','李四','王八','刘芳'];
        console.log(arr[getRandomIntInclusive(0,arr.length-1)]);
    </script>

4.日期对象 Date( )

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

实例输出当前年月日星期

    <script>
        //  2022年2月24日 星期四
        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>

实例返回当前的时分秒格式 08:08:08

<script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒
        // 封装函数 返回当前的 时分秒 格式 08:08:08
        function getTimes(){
            var time = new Date();
            
            var hour = time.getHours();
            hour = hour < 10 ? '0' + hour : hour;
            var minutes = time.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = time.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds;

           return '现在的时间是：' + hour + ':' + minutes + ':' + seconds ;
        }
        console.log(getTimes()); 
    </script>

时间戳

<script>
    // 获得Date总的毫秒数（时间戳） 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒
    // 1. 通过 valuOf()  getTime()
    var date = new Date();
    console.log(date.valueOf()); // 现在距离1970.1.1 总的毫秒数
    console.log(date.getTime());
    // 2. 简单的写法
    var date1 = +new Date();
    console.log(date1);
    // 3. H5 新增的 获得总的毫秒数
    console.log(Date.now());
</script>

时间戳转换为时分秒

案例：倒计时

<script>
    // 倒计时效果
    function countDown(time){
       var nowTime =  +new Date(); // 返回的是当前时间总的毫秒数
       var inputTime = +new Date(time);  // 返回的是用户输入时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; //time 是剩余时间总的秒数
        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-3-4 18:00:00'));
</script>

5.数组对象

5.1 数组对象的创建

创建数组对象的两种方式

字面量方式
new Array()

    <script>
        // 创建数组的两种方式
        // 1. 利用数组字面量
        var arr = [1, 2, 3];
        console.log(arr[0]);
        // 2. 利用new Array
        // var arr1 = new Array(); // 创建了一个空的数组
        // var arr1 = new Array(2);  // 2 表示数组的长度为2  里面有2个空的数组元素
        var arr1 = new Array(2, 3); // 等价于[2, 3]  里面有2个数组元素 是 2和3
        console.log(arr1);

    </script>

5.2 检测数组

instanceof 运算符它可以用来检测是否为数组
Array.isArray(参数)

    <script>
        // 检测是否为数组
        // （1） instanceof 运算符 它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array); //true
        console.log(obj instanceof Array); //false
        // (2) Array.isArray(参数)
        console.log(Array.isArray(arr)); //true
        console.log(Array.isArray(obj)); //false
    </script>

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

5.3.1 添加数组元素的方法

push(参数1...) 在数组的末尾添加一个或者多个数组元素
unshift(参数1...) 在数组的开头添加一个或者多个数组元素

    <script>
        // 添加删除数组元素的方法
        //  1. 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() 在我们数组的开头  添加一个或者多个数组元素
        // arr.unshift('red', 'purple');
        console.log(arr.unshift('red', 'purple'));
        console.log(arr);
        // (1) unshift() 是可以给数组前面追加新的元素
        // (2) unshift() 参数直接写 数组元素就可以了
        // (3) unshift() 完毕之后，返回的结果是 新数组的长度
        // (4) 原数组也会发生变化
    </script>

5.3.1 删除数组元素的方法

pop() 无参数，删除数组的最后一个元素(一次只能删一个)
shift() 无参数，删除数组的第一个元素(一次只能删一个)

   <script>
        // 3. pop() 删除数组的最后一个元素
        // arr.pop();
        console.log(arr.pop());
        console.log(arr);
        // (1) pop() 是可以给数组删除数组的最后一个元素 一次只能删除一个元素
        // (2) pop() 无参数
        // (3) pop() 完毕之后，返回的结果是 删除的那个元素
        // (4) 原数组也会发生变化

        // 3. shift() 删除数组的最后一个元素
        // arr.shift();
        console.log(arr.shift());
        console.log(arr);
        // (1) shift() 是可以给数组删除数组的第一个元素 一次只能删除一个元素
        // (2) shift() 无参数
        // (3) shift() 完毕之后，返回的结果是 删除的那个元素
        // (4) 原数组也会发生变化

    </script>

案例：筛选数组

    <script>
        // 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]要求把数组中超过2100的删除，剩余的放在新数组中
        var arr = [1500, 1200, 2000, 2100, 1800];
        var newArr = [];
        for(var i =0; i < arr.length; i++){
            if(arr[i] < 2000){
                // newArr[newArr.length] = arr[i];
                newArr.push(arr[i])
            }
        }
        console.log(newArr);
    </script>

5.4 数组排序

举例

    <script>
        // 数组排序
        // 1. 翻转数组
        var arr = ['pink', 'red', 'blue'];
        arr.reverse();
        console.log(arr);

        // 2. 数组排序（冒泡排序）
        var arr1 = [33, 4, 8, 2];
        arr1.sort(function(a, b){
            // return a - b; // 升序的顺序排列
            return  b - a; // 降序的顺序排列
        });
        console.log(arr1);
    </script>

5.5 数组索引方法

    <script>
        // 返回数组元素索引号方法 (索引号从0开始位置固定不变)
        // indexOf(数组元素) 
        // 作用就是从前面开始查找， 返回该数组元素满足条件的第一个元素索引号
        // 如果元素不存在 返回-1
        var arr = ['pnk', 'grenn', 'blank', 'blue', 'grenn'];
        console.log(arr.indexOf('grenn')); // 1
        console.log(arr.indexOf('red')); // -1

        // lastIndexOf(数组元素)
        // 作用就是从最后开始查找， 返回该数组元素满足条件的第一个元素索引号
        // 如果元素不存在 返回-1
        console.log(arr.lastIndexOf('grenn')); // 4
        console.log(arr.lastIndexOf('red')); // -1

    </script>

案例：数组去重（重点案例）

    <script>
        // indexOf() 元素不存在返回-1
        // var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'];
        // 封装一个 去重的函数 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']);
         console.log(demo);
    </script>

5.6 数组转换为字符串

    <script>
        // 数组转换为字符串
        //  1. toString() 将数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString());

        // 2. join(分隔符)
        var arr1 = ['pink', 'blue', 'orange'];
        console.log(arr1.join());  // pink,blue,orange
        console.log(arr1.join('-')); // pink-blue-orange
        console.log(arr1.join('&')); //pink&blue&orange
    </script>

5.7 补充数组函数

6.字符串对象

6.1 基本包装类型

    <script>
        // 基本包装数据类型
        var str = 'andy';
        console.log(str.length);
        // 对象 才有 属性和方法  复杂数据类型才有 属性和方法
        // 简单数据类型为什么会有length属性呢？
        // 基本包装类型； 就是把简单数据类型 包装成了复杂数据类型
        // （1）把简单数据类型包装为复杂数据类型
        var temp = new String('andy');
        // （2）把临时变量的值 给 str
        str = temp;
        // （3）销毁这个临时变量
        temp = null;
    </script>

6.2 字符串的不可变

6.3 根据字符串返回位置

    <script>
        // 字符串对象 根据字符串返回位置
        // str.indexOf('要查找的字符', 起始的位置)
        var str = '改革春风吹满地，春天来了';
        console.log(str.indexOf('春')); // 2
        console.log(str.indexOf('春', 3)); // 8 从索引号是 3 的位置开始往后查找

        console.log(str.lastIndexOf('春')); // 8
        console.log(str.lastIndexOf('春', 5)); // 2
    </script>

案例：返回字符位置

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

（1）核心算法：先查找第一个o出现的位置

（2）然后只要indexOf 返回的结果不是-1就继续往后查找

（3）因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找

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

6.4 根据位置返回字符串 (重点)

    <script>
        // 根据位置返回字符
        // 1. charAt(index) 根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));
        // 遍历所有的字符
        for(var i =0; i < str.length; i++){
            console.log(str.charAt(i));
        }
        // 2. charCodeAt(index) 返回相应索引号的字符ASCII值  目的：判断用户按下了哪个键
        console.log(str.charCodeAt(0)); //97
        // 3. str[index] H5新增的
        console.log(str[0]);
    </script>

案例：返回字符位置

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

    <script>
        // 有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }
        if(o['age']){
            console.log('里面有该属性');
            console.log(o['age']);
        }else{
            console.log('没有该属性');
        }
        // 判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符，并统计其次数
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心算法： 利用 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(ch+'字符出现次数最多为：'+max);
    </script>

6.5 字符串操作方法(重点)

    <script>
        // 字符串操作方法
        // 1. concat('字符串1','字符串2','字符串3'...)
        var str ='andy';
        console.log(str.concat('acc'));
        // 2. substr('截取的起始位置','截取几个字符')
        var str1 = '改革春风吹满地';
        console.log(str1.substr(2, 2)); //第一个2 是索引号的2 
    </script>

    <script>
        // 1. 替换字符 replace('被替换的字符', '替换为的字符') 只会替换选中字符的第一个
        var str = 'andyandy';
        console.log(str.replace('a', 'm'));

        // 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while(str1.indexOf('o') !== -1){
            str1 = str1.replace('o', '*');
        }
        console.log(str1);

        // 2. 字符转换为数组 split('分隔符')  Tips: 之前学过 join 把数组转换为字符串
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));
        var str3 = 'red&pink&blue';
        console.log(str3.split('&'));
    </script>

其他方法：