JS基础知识复习（一）

最新推荐文章于 2022-10-22 23:11:28 发布

mr_foxsand

最新推荐文章于 2022-10-22 23:11:28 发布

阅读量95

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/mr_foxsand/article/details/107233568

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. JS变量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * JS中的数据类型分为两大类：
         * 1.基本数据类型
         *      1.1 数字：number
         *      1.2 字符串：String
         *      1.3 布尔值：boolean
         *      1.4 特殊数据类型：null undefined
         * 2.复合数据类型
         */
        var age = 18 , name = "张三" , sex = "男";
        alert("姓名  =" + name + "，性别：" + sex + "，年龄：" + age);
        alert(typeof  name);

        for (let i = 0; i < 20; i++) {
            if (i % 5 == 0 && i != 0){
                break;
            }
            document.write(i + ";");
        }

        /**
         * 获取input标签属性失败的原因：
         * document执行顺序是自上而下，此时JS在input之上，所以获取不到。
         */
        var _input = document.getElementById("demo");
        alert(_input.name);

        /**
         * 解决方法：不讨论jQuery方式。
         */
        window.onload = function (){
            _input = document.getElementById("demo");
            alert(_input.name);
        };

    </script>
</head>
<body>
<input type="text" name="demo" value="123" id="demo">
</body>
</html>

2. 函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * arguments：当一个函数传入的参数个数不确定时，
         */
        function sum() {
            // alert(arguments);
            let p = arguments;
            alert(p.length);
            // 数组声明 及追加
            let arr = new Array(20);
            alert(arr instanceof Array);
            // arr.push("h");
            // alert(arr.length);
        }
        sum(1,2,3);
        /**
         * 数组的冒泡排序
         */
        function mySort(p , mode) {
            // let newArray;
            // 判断参数是否为数组
            if (p instanceof Array){
                if (mode == "" || mode == null || mode == undefined || mode == "asc"){
                    for (let i = 0; i < p.length; i++) {
                        let tmp ;
                        for (let j = i + 1; j < p.length; j++) {
                            if (p[i] > p[j]){
                                tmp = p[i];
                                p[i] = p[j];
                                p[j] = tmp;
                            }
                        }
                    }
                }else if (mode == "desc"){
                    for (let i = 0; i < p.length; i++) {
                        let tmp ;
                        for (let j = i + 1; j < p.length; j++) {
                            if (p[i] < p[j]){
                                tmp = p[i];
                                p[i] = p[j];
                                p[j] = tmp;
                            }
                        }
                    }
                }

            }
            return p;
        }

        var demo = [4,5,8,1,9 ,5 ,0 , 10 , 100 , 20 , 31];
        demo = mySort(demo , '');
        alert(demo);
    </script>
</head>
<body>

</body>
</html>

3. 数组常用函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = [10,20,30];
        var strArr = ["123" , "hello"];
        /**
         * forEach:循环遍历
         */
        strArr.forEach(function (value , index , array) {
            alert("下标：" + index + "；值 = " + value + "；数组 = " + array);
        });
        /**
         * map: 映射 遍历-操作-返回
         */
        var newArr = arr.map(function (value, index, array) {
            return value + 2;
        });
        alert("原数组 = " + arr + "新数组 = " + newArr);

        /**
         * filter:过滤器
         * @type {number[]}
         */
        var arrFilter = arr.filter(function (value , index , array) {
            return value >20;
        });
        alert("过滤后的数组 = " + arrFilter);

        /**
         * some:循环遍历数组，判断return的条件是否成立，成立返回true，不成立返回false
         * 注意：some并不会完整遍历数组，只要条件成立，则返回true，不再继续循环！
         */
        var arrCheck = arr.some(function (value, index, array) {
            return value == 20;
        });
        alert(arrCheck);

        /**
         * every:跟some用法一样，但是要求所有元素都符合return的条件，才返回true。如果有一项不符合的，则返回false，终止循环
         */
        var arrEvery = arr.every(function (value, index, array) {
            return value > 10;
        });
        alert("arr数组元素均大于10吗？" + arrEvery);
    </script>
</head>
<body>

</body>
</html>

4.Math对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * Math对象用于执行数学任务
         */

        /**
         * Math.round:四舍五入取整
         */
        alert(Math.round(3.521313));

        /**
         * Math.random:0~1之间的随机数
         */
        alert(Math.random());

        alert(Math.max(1,2,10,100)); //取最大值，min：最小值

        alert(Math.abs(-1)); //取绝对值

        alert(Math.ceil(3.1545));  //向上取整
        alert(Math.floor(3.1545)); //向下取整

        /**
         * Math.pow(x , y):求X的y次方
         */
        alert(Math.pow(2,3));

        alert(Math.sqrt(4)); // 开平方

        /**
         * Math对象的勾股函数：sin、cos、tan、
         *    参数：都应该是弧度。Math.PI = 180弧度。  1弧度 = Math.PI / 180
         */
        alert(Math.sin(30 * Math.PI / 180));
        alert(Math.cos(60 * Math.PI / 180));
    </script>
</head>
<body>

</body>
</html>

5.对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 对象的创建及声明
         */
            // 1. 使用new 创建对象
        var obj = new Object();
        obj.name = "张三";
        obj.age = 18;
        obj.getName = function () {
            return this.name;
        };

        alert(obj.getName());

        // 2. new 可以省略
        // 3. 使用常量创建对象
        var _obj = {};
        _obj.name = "李四";
        _obj.age = 20;
        _obj.setName = function (p) {
            this.name = p;
        };
        _obj.getName = function () {
            return this.name;
        }

        _obj.setName("呆萌");
        alert(_obj.getName());

        // delete 删除对象的属性
        delete _obj.age;
        alert(_obj.age);
    </script>
</head>
<body>

</body>
</html>

mr_foxsand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识复习（一）

1. JS变量：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /** * JS中的数据类型分为两大类： * 1.基本数据类型 * ...
复制链接

扫一扫