JavaScript基础学习 内置对象

内置对象之Math

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        // 取绝对值
        console.log(Math.abs(-125)); //125
        console.log(Math.abs('-125')); //125   会进行隐式转换  会把字符串型 转换为数字型
        console.log(Math.abs('zhangsan')); //NaN


        // 取整方法
        console.log(Math.floor(1.1)); //向下取整,往最小了取值  1

        console.log(Math.ceil(1.1)); //向上取整,往最大了取值   2

        console.log(Math.round(1.5)); //四舍五入 2

        console.log(Math.round(-5.5)); //-5     对于负数的.5来说,如果5后面没有数字,往大了取
        console.log(Math.round(-5.56)); //-6    对于负数的.5来说,如果5后面有数字,往小了取


        //  产生随机数方法   Math.random()
        console.log(Math.random());

        // 得到两个数之间的随机整数并且包含这两个整数
        function getRndInteger(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRndInteger(1, 10));



        //随机点名
        var arr = ['张三', '李四', '王五', '王二麻子', '路人甲'];
        console.log(arr[getRndInteger(0, 4)]);
    </script>

</head>

<body>

</body>

</html>

使用Math产生随机数进行猜数游戏

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        console.log('-----------------------------------');
        var randomNumber = Math.floor(Math.random() * (50 - 1 + 1)) + 1;
        console.log(randomNumber);
        var i = 3;
        while (i > 0) {
            var a = prompt('请您输入一个数字');
            var number = parseInt(a);
            if (number > randomNumber) {
                alert('您猜大了,继续猜');
                i--;
                console.log(i);
                if (i == 0) {
                    alert('对不起,你的机会用完了!');

                }
            } else if (number < randomNumber) {
                alert('您猜小了,继续猜');
                i--;
                console.log(i);
                if (i == 0) {
                    alert('对不起,你的机会用完了!');
                }
            } else {
                alert('恭喜您,猜对啦!');
                break;
            }
        }
    </script>

</head>

<body>

</body>

</html>

内置对象之Date

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        // Date() 日期对象   是一个构造函数  必须使用new   来调用创建我们的日期对象
        var date = new Date(); // 没有参数 返回系统的当前时间
        console.log(date);

        // 参数常用的写法  数字型  2019,10,01  或者是 字符串型'2019-10-1  8:8:8'
        var date1 = new Date(2019, 10, 01);
        console.log(date1); //Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)

        var date2 = new Date('2019-10-1  8:8:8');
        console.log(date2); //Tue Oct 01 2019 08:08:08 GMT+0800 (中国标准时间)

        console.log('--------------------------------------------------------------');


        //获取当前时间的年份
        console.log(date.getFullYear());

        //获取  时-分-秒
        function getTimer() {
            var time = new Date();

            var h = time.getHours();
            h = h < 10 ? '0' + h : h;

            var m = time.getMinutes();

            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        }
        console.log(getTimer());

        console.log('--------------------------------------------------------------');

        //获取Date总的毫秒数(时间戳)不是当前时间的毫秒数  而是距离1970年1月1号过了多少毫秒数

        // 1.通过  valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf());
        console.log(date.getTime());

        // 2.简单的写法(最常用的写法)
        var date1 = +new Date();
        console.log(date1);

        // 3.H5  新增的  获取总的毫秒数
        console.log(Date.now());
    </script>

</head>

<body>

</body>

</html>

Date案例

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        //做一个时间倒计时的例子
        //计算天数:  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是剩余时间总的秒数

            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('2021-12-12 11:00:00'));

        var date = new Date();
        console.log(date);
    </script>

</head>

<body>

</body>

</html>

内置对象之数组

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        //判断是否为数组的两种方式   1. arr instanceof Array  2. Array.isArray(arr)
        function reverse(arr) {
            var newArr = [];
            if (arr instanceof Array) {
                for (var i = arr.length - 1; i >= 0; i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
            } else {
                return 'erro,你输入的不是数组元素';

            }

        }
        var result = reverse([1, 2, 3, 4, 5]);
        console.log(result);

        var result = reverse(1, 2, 3, 4, 5);
        console.log(result);

        var arr1 = new Array();
        var obj = new Object();
        console.log(Array.isArray(arr1));
        console.log(Array.isArray(obj));
    </script>


</head>

<body>

</body>

</html>

添加删除数组元素的方法

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        //添加删除数组元素方法

        //1. push()  在我们数组的末尾,添加一个或者多个数组元素
        // push()
        var arr = [1, 2, 3];

        arr.push(4, 'pink'); // 向数组当中添加两个元素

        console.log(arr.push(5, 'pig')); //返回向数组当中添加两个元素之后的数组长度
        console.log(arr);


        console.log('-----------------------');

        //2. unshift()  在数组的开头添加一个或者多个数组元素
        arr.unshift(0, 'zhangsan');
        console.log(arr.unshift(0, 'zhangsan')); //返回向数组当中添加两个元素之后的数组长度
        console.log(arr);

        console.log('-----------------------');


        //3.  pop() 它可以删除数组的最后一个元素
        console.log(arr.pop()); // 返回数组删除的元素
        console.log(arr);

        console.log('-----------------------');

        //4.  shift() 它可以删除数组的第一个元素
        console.log(arr.shift()); // 返回数组删除的元素
        console.log(arr);
    </script>

</head>

<body>

</body>

</html>

内置对象数组案例

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        //  筛选数据
        var arr = [1000, 1900, 2500, 3000, 1500, 1600];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > 1500) {
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);

        //  翻转数组
        var arr1 = ['red', 'green', 'blue', 'purple'];
        arr1.reverse();
        console.log(arr1); // ['purple', 'blue', 'green', 'red']



        //  数组排序  冒泡排序

        var arr2 = [1, 15, 7, 77, 9, 90, 5, 55];
        arr2.sort();
        console.log(arr2); //[1, 15, 5, 55, 7, 77, 9, 90]  遇到这样的数组使用会出问题


        var arr3 = [1, 3, 2, 6, 5, 99, 90, 12];
        arr3.sort(function(a, b) {
            //  return a - b; // 按照升序的顺序进行排列
            return b - a; // 按照降序的顺序进行排列
        });
        console.log(arr3);



        // 返回数组索引号   indexOf(数组元素)  作用就是返回该数组元素的索引号
        // 它只返回第一个满足条件的索引号  
        // 如果在该数组中找不到该元素,只会返回-1
        var arr4 = ['red', 'green', 'blue', 'purple', 'red'];
        console.log(arr4.indexOf('red'));
        console.log(arr4.indexOf('yellow'));

        //  从后往前查找元素
        console.log(arr4.lastIndexOf('red'));
        console.log(arr4.lastIndexOf('yellow'));


        console.log('------------------------------------------------');
        //  数组去重(重点案例)
        function unique(ar) {
            var newArrT = [];
            for (var i = 0; i < ar.length; i++) {
                if (newArrT.indexOf(ar[i]) === -1) {
                    newArrT.push(ar[i]);
                }
            }
            return newArrT;
        }
        var result = unique(['c', 'a', 'b', 'd', 'e', 'f', 'c', 'm', 'a', 'd', 'g', 'q']);
        console.log(result);

        //  数组z转换为字符串
        //  1. toString()  将我们的数组转换为字符串
        var arr5 = [1, 2, 3];
        console.log(arr5.toString());

        // 2. join(分隔符)
        var arr6 = ['green', 'blue', 'red', 'purple'];
        console.log(arr6.join()); // 默认逗号分隔元素
        console.log(arr6.join('-'));
    </script>

</head>

<body>

</body>

</html>

内置对象之字符串(包装数据类型)

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        //  JavaScript提供了三个特殊的引用类型:String Number Boolean
        //  基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法
        var str = 'andy';
        console.log(str.length); // 4

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


        console.log('--------------------------------------------');

        //  字符串的不可变
        var st = 'andy';
        console.log(st);
        st = 'peter';
        console.log(peter);
        //表面上看st此时的值是peter,但内存其实是开辟了一个新的空间里面存放了peter,
        // 将原来指向andy的st指向了peter, 此时内存空间当中存放了俩个变量空间  我们在使用时不要进行字符串拼接操作,会非常占内存空间
    </script>

</head>

<body>

</body>

</html>

内置对象之字符串案例

<!DOCTYPE html>
<html>

<head>
    <title>js开始学习</title>
    <script>
        // 字符串对象 1. 根据字符返回位置  

        // indexOf 从头开始查找   lastIndexOf 从末尾开始查找
        var str = '改革春风吹满地,春天来了';
        console.log(str.indexOf('春')); //  3
        console.log(str.indexOf('春', 3)); //  从索引号是  3的位置开始往后查找  数组没有这种性质

        console.log(str.lastIndexOf('春'));

        console.log('-----------------------------------------------------------');
        //  查找字符串abcoefoxyozzopp当中所有o出现的位置以及次数
        var str1 = 'abcoefoxyozzopp';
        var index = str1.indexOf('o');
        var total = 0;
        while (index != -1) {
            total++;
            console.log(index);
            index = str1.indexOf('o', index + 1);
        }
        console.log('o一共出现了' + total + '次');


        // 类似于字符串 我们也可以进行数组元素的查找
        var newArr = ['red', 'green', 'blue', 'yellow', 'red', 'mangy', 'purple', 'pink', 'red'];
        var index = newArr.indexOf('red');
        var number = 0;
        for (var i = 0; i < newArr.length; i++) {
            if (index != -1) {
                number++;
                console.log(index);
                index = newArr.indexOf('red', index + 1);

            }
        }
        console.log(number);
        console.log('-----------------------------------------------------');

        // 2.  根据位置返回字符串  charAt(index)      H5 支持的写法:str[index]
        var str2 = 'andy';
        console.log(str2.charAt(3));
        console.log(str2[3]);

        //遍历所有的字符
        for (var i = 0; i < str2.length; i++) {
            console.log(str2.charAt(i));
        }

        // 3.返回索引值对应字符的ASCII值  charCodeAt(index)
        console.log(str2.charCodeAt(0)); //97


        console.log('-----------------------------------------------------');


        //  判断一个字符串当中出现次数最多的字符,并统计其出现的次数
        //  把字符串当中的每个字符存储给对象,如果对象没有该属性,就为1,如果有存在了就+1
        var str3 = 'abcoefoxyozzoppomn';
        var obj = {}; // 声明一个对象
        for (var i = 0; i < str3.length; i++) {
            var charNum = str3.charAt(i);
            if (obj[charNum]) {
                obj[charNum]++;
            } else {
                obj[charNum] = 1;
            }
        }
        console.log(obj);
        //遍历对象
        var max = 0;
        var ch = '';
        for (var k in obj) {
            if (obj[k] > max) {
                max = obj[k];
                ch = k;
            }
        }
        console.log('出现次数最多的字符是:' + ch);
        console.log('出现了' + max + '次');

   console.log('-----------------------------------------------------习题');


        var str4 = 'abaasdffggghhjjikkgfddsssss3444343';
        console.log(str4.length);

        function getStrs(number) {
            if (number >= str4.length) {
                console.log('数组长度越界!');
            } else {
                var strs = str4.charAt(number);
            }
            return strs;
        }
        console.log(getStrs(1));

        function getExistStrs(strs) {
            if (str4.indexOf(strs) !== -1) {
                console.log('你要查找的字符' + strs + '存在');
            } else {
                console.log('你要查找的字符' + strs + '不存在');
            }
        }
        var result = getExistStrs('9');

        function replaceStrs(str1, str2) {
            str4 = str4.replace(str1, str2);
            return str4;
        }
        var result = replaceStrs('ggg', '22123')
        console.log(result);

        console.log(str4.substr(1, 5));
        console.log('-------找出出现次数最多的字符以及出现的次数------');
        var objT = {};
        for (var i = 0; i < str4.length; i++) {
            var charnum = str4.charAt(i);
            if (objT[charnum]) {
                objT[charnum]++;
            } else {
                objT[charnum] = 1;
            }
        }
        console.log(objT);

        var max = 0;
        var ch = '';
        for (var key in objT) {
            if (objT[key] > max) {
                max = objT[key];
                ch = key;
            }
        }
        console.log(objT[ch]);
        console.log(ch);
    </script>

</head>

<body>

</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_43537319/article/details/121879325