初识JavaScript （十九）

最新推荐文章于 2023-01-12 19:04:18 发布

打酱油的女孩子

最新推荐文章于 2023-01-12 19:04:18 发布

阅读量240

点赞数

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_38341556/article/details/108303583

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

初识JavaScript （十九）

1 正则的分组

正则的分组：
1: 可以将正则的一部分或者是整体使用小括号括起来，作为一组存在。
组可以作为一个整体去进行匹配，可以加数量词。

2：正则的分组中可以有多个备选方案，使用| 代表或者的意思。

3：正则中的分组，每一组都有一个组号，组号从1开始。组和组之间是可以嵌套的。组号是根据向右的小括号的顺序号来确定的。可以根据 RegExp 的静态变量 $+组号的方法来获得对应组匹配到的内容。一定要先调用test，然后再获得组对应的匹配的内容。
分组最大的意义：根据分组来获得不同组号匹配的子串的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var str = "hihihihihihihihi";
    var reg = /^hihihihihi$/;
    var reg = /^(hi){5,8}$/;
    console.log (reg.test(str));//true

    var reg = /^I love (html|css|js)$/;
    console.log (reg.test("I love html"));//true
    console.log (reg.test("I love css"));//true
    console.log (reg.test("I love js"));//true
    console.log (reg.test("I love java"));//false

    var str = "2020-08-19";
    var reg = /^((\d{4})-(\d{2}))-(\d{2})$/;
    console.log (reg.test(str));//true
    //根据组号去获得该组号中匹配的子串的内容
    console.log (RegExp.$1);//2020-08
    console.log (RegExp.$2);//2020
    console.log (RegExp.$3);//08
    console.log (RegExp.$4);//19

</script>
</body>
</html>

2 正则的exec方法

正则对象的实例方法：exec 是单词execute 缩写。

该方法的主要的作用就是用于字符串中子串的查找。
语法：正则对象.exex(查找的字符串)
注意：
1：该方法每次就返回一个被匹配到的子串内容。
2：如果想获得所有的匹配的子串的内容。加修饰符g。
3：每次调用该方法，都会记录上次匹配结束的位置。下次再次调用从上次匹配结束的位置继续往后匹配。
4：如果匹配完毕之后继续匹配，返回null。然后再次调用该方法，从头匹配。
5: 可以通过分组，对子串中的内容进行获取。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   var str = "12345asdfg_2345asf_345qwe_4567ertyu";
   //书写正则匹配上诉的四个子串
   var reg = /((\d{3,5})([a-z]{3,5}))/g;

   // while(true){
   //     var result = reg.exec(str);
   //     if(result === null)break;
   //     console.log (result);
   // }
   var result;
   while((result = reg.exec(str)) != null){
       console.log (RegExp.$1);
       console.log (RegExp.$2);
       console.log (RegExp.$3);
       console.log ("----------")
       // console.log (result[0]);
   }

</script>
</body>
</html>

3 正则的贪婪和懒惰模式

正则的贪婪和懒惰模式：
在正则中的数量词部分。分为了两类。
1：贪婪模式的数量词。尽可能多的去匹配内容。
之前涉及的数量词都是贪婪模式。
2：懒惰模式的数量词，尽可能少的去匹配内容。
通过在贪婪模式的数量词后添加 ? 来启动懒惰模式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var str = "12345asdfg";
    var reg = /((\d{3,5})([a-z]{3,5}?))/;
    reg.test(str);
    console.log (RegExp.$1);
</script>
</body>
</html>

4 正则练习

1:匹配邮政编码：由6个数字构成，第一个不可以是0
2：匹配手机号：由13,15,17,18，开头的11位数字。
3：匹配qq号。第一位不能是0，位数在5-12之间。
4：匹配压缩文件的名称：文件由字母、数字、下划线构成，不可以数字开头
后缀：.zip .rar .gz
5：匹配一个年龄在【18-40】之间
6：匹配身份证号。18位，最后一位可以是X
7：匹配姓名，三个汉字，中间的字必须是军或者君
提示：[\u4e00-\u9fz5] 代表了所有的汉字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 1:匹配邮政编码：由6个数字构成，第一个不可以是0
    var reg = /^[1-9]\d{5}$/;
    // 2：匹配手机号：由13,15,17,18，开头的11位数字。
    var reg = /^1[3579]\d{9}$/;
    // 3：匹配qq号。第一位不能是0，位数在5-12之间。
    var reg = /^[1-9]\d{4,11}$/;
    // 4：匹配压缩文件的名称：文件由字母、数字、下划线构成，不可以数字开头
    // 后缀：.zip .rar .gz
    var reg = /^[a-zA-Z_]\w*\.(zip|rar|gz)$/;
    // 5：匹配一个年龄在【18-40】之间
    var reg = /^[1][89]$|^[2]\d$|^[3]\d$|^40$/;
    console.log (reg.test("17"));//false
    console.log (reg.test("18"));//true
    console.log (reg.test("20"));//true
    console.log (reg.test("32"));//true
    console.log (reg.test("40"));//true
    console.log (reg.test("41"));//false
    // 6：匹配身份证号。18位，最后一位可以是X,不可以0开始。
    var reg = /^[1-9]{17}[\dX]$/;
    // 7：匹配姓名，三个汉字，中间的字必须是  军 或者 君
    // 提示：[\u4e00-\u9fa5] 代表了所有的汉字
    var reg = /^[\u4e00-\u9fa5][军君][\u4e00-\u9fa5]$/;
</script>
</body>
</html>

5 算法-数组去重indexOf

数组去重。利用数组的实例方法indexOf 方法。
indexOf：检测当前数组对象中是否包含了指定的元素，包含返回索引，否则-1；
语法：数组.indexOf(key)
思路：遍历原数组，将原数组中的每个元素逐个判断并添加到新的数组中。如果新数组中已经存在了即将添加的值，就不再添加。只添加没有的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [1,2,1,2,1,2,1,2,1,2,1,1,1,1,1,2,2,2,2];

    //对指定的数组去重。
    function unique(arr) {
        if(!Array.isArray(arr))
            return;
        const LEN = arr.length;
        if(LEN === 0)
            return;

        var newArr = [];
        for (let i = 0; i < LEN; i++) {
            var ele = arr[i];
            //no problem
            // if(newArr.indexOf(ele) === -1){
            //     newArr.push(ele);
            // }
            if(newArr.indexOf(ele) >= 0)
                continue;
            newArr.push(ele);
        }
        return newArr;
    }

    console.log (unique(arr));
</script>
</body>
</html>

6 算法-数组去重-splice

数组去重：使用数组的实例方法splice方法。直接删除原数组中的内容。
splice：可以对数组实现增删改的操作。
思路：遍历数组，用当前数组元素和后续的元素逐个比较，后续的元素只要和当前的元素相同就被删掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2];

    //对指定的数组去重。
    (function (arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN === 0)
            return;

        //外层用户获得每一个元素。
        for (let i = 0; i < arr.length; i++) {
            //内层循环用于当前i对应的元素和i后续的所有的元素比较
            var value = arr[i];
            for (let j = i + 1; j < arr.length; j++) {
                if (value === arr[j]) {
                    //删除j位置上的元素。//j--的意思：删除了j位置上的元素，后续的元素就补上来了。
                    //j位置上的元素需要重新判断。j--是为了抵消j++。保证此次的j的值不发生变化，、
                    //继续判断j位置的元素。
                    arr.splice (j--, 1);
                }
            }
        }
    })(arr);

    console.log (arr);
</script>
</body>
</html>

7 算法-数组去重-哈希

哈希去重：根据哈希数据结构的特点。哈希中的数据都是键值对数据。
key+value的形式。key是具有唯一性的。
实现的思路：将数组的所有的元素都作为对象的key添加到对象中。value是无所谓的。
对象中的所有的key就是去重之后的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2];

    //对指定的数组去重。
    function unique(arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN === 0)
            return;

        var newArr = [];
        var obj = {};
        //遍历数组的元素。
        for (let i = 0; i < arr.length; i++) {
            //如果arr[i]还不是obj的key。存在的话就不再添加。实现去重。
            if(!obj[arr[i]]){
                obj[arr[i]] = "a";
                newArr.push(arr[i]);
            }
        }
        return newArr;
        //得到对象的所有的key.结果是字符串类型。
        // return Object.keys(obj);
    };

    console.log (unique(arr));

</script>
</body>
</html>

8 算法—排序—冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    冒泡排序的实现：
-->
<script>
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function randomArray(len, min, max) {
        var arr = [];
        for (let i = 0; i < len; i++) {
            arr[i] = random (min, max);
        }
        return arr;
    }

    function bubbleSort(arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN === 0)
            return;

        //外层循环控制趟数
        for (let i = 0; i < LEN - 1; i++) {
            //内层控制第i趟的相邻元素之间的比较和交换。
            var flag = false;
            for (let j = 0; j < LEN - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    flag = true;
                    var temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
            if (!flag) {
                return;
            }
        }
    }

    (function () {
        var array = randomArray (10, 0, 100);
        console.log (array);

        setTimeout (function () {
            bubbleSort (array);
            console.log (array);
        }, 1000);
    }) ();

</script>
</body>
</html>

9 算法—排序—选择排序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 内层循环控制本趟的无序区的最小元素的查找。
    // 外层循环外，无序区的最小元素和无序区的第一个元素互换。
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function randomArray(len, min, max) {
        var arr = [];
        for (let i = 0; i < len; i++) {
            arr[i] = random (min, max);
        }
        return arr;
    }

    //对指定的数组进行选择排序
    function selectSort(arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN === 0)
            return;
        //外层循环控制趟数。长度-1
        //i即作为外层循环的控制变量，也作为无序区的第一个元素的索引。
        for (let i = 0; i < LEN - 1; i++) {
            //无序区的最小元素的索引。
            //先假设无序区的最小元素的索引是无序区的第一个元素。
            var minIndex = i;
            //内层循环控制第i趟的最小元素的查找。
            for (let j = i + 1; j < LEN; j++) {
                //找最小元素索引的过程。
                if (arr[j] < arr[minIndex]) {
                    //minIndex永远保存的是最小元素的索引。
                    minIndex = j;
                }
            }
            //内层循环外。最小元素和无序区第一个元素互换。
            if(minIndex !== i){
                //无序区的第一个元素不是最小元素。
                var temp = arr[minIndex];
                arr[minIndex] = arr[i];
                arr[i] = temp;
            }
        }
    }

    (function () {
        var array = randomArray (10, 0, 100);
        console.log (array);

        setTimeout (function () {
            selectSort (array);
            console.log (array);
        }, 1000);
    }) ();

</script>
</body>
</html>

9 算法—排序—插入排序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    插入排序的核心思想：将无序区的第一个元素，插入到有序区的合适的位置。
    *
    * */
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function randomArray(len, min, max) {
        var arr = [];
        for (let i = 0; i < len; i++) {
            arr[i] = random (min, max);
        }
        return arr;
    }

    function insertSort(arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN === 0)
            return;
        //外层循环控制趟数。i还用来代表无序区的第一个元素的索引。
        for (let i = 1; i < LEN; i++) {
            //备份无序区的第一个元素。
            var temp = arr[i];
            //内层循环负责第i趟的有序区的元素的比较和移动。
            //j逆序取到有序区的所有的元素。
            for (var j = i - 1; j >= 0 && arr[j] > temp; j--) {
                //后移动元素
                arr[j+1] = arr[j];
            }
            //将备份的数据，插入到合适的位置。
            arr[j+1] = temp;
        }
    }

    function insertSort1(arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN === 0)
            return;
        //外层循环控制趟数。i还用来代表无序区的第一个元素的索引。
        for (let i = 1; i < LEN; i++) {
            //备份无序区的第一个元素。
            var temp = arr[i];
            //内层循环负责第i趟的有序区的元素的比较和移动。
            //j逆序取到有序区的所有的元素。
            for (var j = i - 1; j >= 0; j--) {
                //有序区的遍历的元素比待插入的元素大。
                if(arr[j] > temp){
                    //后移动元素
                    arr[j+1] = arr[j];
                }else{
                    break;
                }
            }
            //将备份的数据，插入到合适的位置。
            arr[j+1] = temp;
        }
    }

    (function () {
        var array = randomArray (10, 0, 100);
        console.log (array);

        setTimeout (function () {
            insertSort1 (array);
            console.log (array);
        }, 1000);
    }) ();

</script>
</body>
</html>

10 算法—排序—快排

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function randomArray(len, min, max) {
        var arr = [];
        for (let i = 0; i < len; i++) {
            arr[i] = random (min, max);
        }
        return arr;
    }

    /**
     * 对指定的数组进行快速排序。
     * @param arr
     */
    function quickSort(arr) {
        if (!Array.isArray (arr))
            return;
        const LEN = arr.length;
        if (LEN <= 1)//长度小于等于1，返回自身。
            return arr;
        //删除并获得中间的值。
        var midValue = arr.splice (LEN >> 1, 1);
        var small = [];
        var big = [];
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] < midValue)
                small.push (arr[i]);
            else
                big.push (arr[i]);
        }
        //对small和big进行上述的递归的操作。
        var smallArr = quickSort (small);
        var bigArr = quickSort (big);
        return smallArr.concat (midValue, bigArr);
    }

    var arr = randomArray (10, 0, 100);
    console.log (arr);
    console.log (quickSort (arr));

</script>
</body>
</html>

11 算法—查找—二分查找

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    二分搜索法：折半查找法。binarysearch。
    作用：做内容查找。功能类似于数组的实例方法：indexOf 时间复杂度 O(n)
    通常binarysearch用于查找数组元素的索引。找到返回索引，否则返回-1.
    时间复杂度：O(lg(2n))

    使用该算法的前提：数列必须是有序的。

-->
<script>
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function randomArray(len, min, max) {
        var arr = [];
        for (let i = 0; i < len; i++) {
            arr[i] = random (min, max);
        }
        return arr;
    }

    var counter = 0;

    /**
     * 对指定的数组使用二分搜索法查找指定的内容。
     * 如果找到，返回第一个相等的元素的索引。如果没有找到返回 -1
     * @param arr  待搜索的数组。
     * @param key  查找的内容。
     */
    function binarySearch(arr, key) {
        if (!Array.isArray (arr))
            return -1;
        const LEN = arr.length;
        if (LEN === 0)
            return -1;

        var low = 0;
        var high = LEN - 1;
        var mid = low + high >> 1;
        //次数不确定
        while (low <= high) {
            counter ++;
            var value = arr[mid];
            if (value === key) {//找到了
                return mid;
            }
            //key在mid的右边。修改low
            if (value < key) {
                low = mid + 1;
            } else {
                //key 在mid的左边。修改high
                high = mid - 1;
            }
            //修改完low 或者是 high。重新确定再次二分的点。
            mid = low + high >> 1;
        }
        return -1;
    }

    var array = randomArray (10000, 0, 20000);
    array.sort (function (num1, num2) {
        return num1 - num2;
    })
    // console.log (array);
    var key = 3377;
    var index = binarySearch (array, key);
    console.log (index);
    console.log (counter);
</script>
</body>
</html>

12 JSON介绍

xml：小毛驴 eXtendsible markup language 可扩展标记语言。也是一种保存和数据交换的格式。

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JS直接支持JSON这样的数据格式。
对应的类型 JSON用于解析和生成json数据。

JSON本质上就是字符串的集合。字符串描述的是实体对象。
使用JSON 可以将json数据和对象之间相互的转换。

JSON的构成：
1：js支持的类型中，不支持 Undefined 和方法。
2：所有的键都需要使用引号包裹。
3：json数据可以直接放到js源代码中，也可以放到独立的文件中。以.json结尾。

json字符串对象和js对象之间的相互转换：
1：js对象到 json字符串对象。
方法：JSON.stringify(obj)
返回：json字符串对象。

2：json字符串对象到 js对象
方法：JSON.parse(字符串)
返回：js对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var obj = {
        name:"小刚",
        age:17,
        money:null,
        girlfriend:undefined,
        handsome:true,
        books:["围城","茶馆"],
        brother:{
            name:"大刚",
            age:20
        },
        study:function () {
            console.log ("I love study");
        }
    };
    // {"name":"小刚","age":17,"money":null,"handsome":true,"books":["围城","茶馆"],"brother":{"name":"大刚","age":20}}
    console.log (JSON.stringify(obj));

    var str = '{"name":"小刚","age":17,"money":null,"handsome":true,"books":["围城","茶馆"],"brother":{"name":"大刚","age":20}}';

    console.log (JSON.parse(str));
    console.log (JSON.parse(str).name);//小刚。
</script>
</body>
</html>

13 面向对象介绍

1：面向过程编程：
解决问题的思维的方式：将问题分解为若干个功能模块。将这些功能模块按照一定的顺序执行。
是一种线性的解决问题的思维模式。
c 语言就是一种典型的面向过程的编程语言。

面向过程思维的问题：
1：随着软件规模的扩大，使用线性的思维解决问题的逻辑过于复杂，实现起来比较困难。
2：后期的代码的维护的成本比较高，代码的独立性，复用性不好。

2：面向对象编程：
解决问题的思维的模式：分析问题域中存在多少个对象。让这些对象具有需要的功能和属性，
然后让对象之间相互作用实现最终的需求。
是面向过程之后出现的思维方式，典型的语言：java、c# 纯粹的面向对象的编程语言。
c++ 是在面向过程的基础上增加了面向对象的特性。

面向对象的三大特性：封装、继承、多态。
面向对象的语言都有类型的概念。
面向对象的好处：
1：对于比较复杂的问题，解决起来相对更加的容易。
2：代码的复用性更好。
问题：对于小问题，使用面向对象就比较复杂了。
面向对象通常是包含了面向过程的。让创建的对象去一步步的去执行自己的功能。
3：例子：开车去拉萨。
面向过程：打开车门，开始出发、保定、石家庄、太原、西安、兰州、…拉萨、布达拉宫。
面向对象：找个司机（开车）、找一辆车（跑），有导航（引领方向）。

例子：农夫与蛇。
面向过程：农夫发现了一条冻僵的蛇，揣怀里了。蛇醒了，蛇咬了他一口。农夫死了。
面向对象：2个对象、农夫+蛇。农夫：救蛇、死亡。蛇：苏醒、咬人。

4：javascript语言是基于对象的语言，有封装、有继承、没有多态。
java的继承和js的继承的区别：
java的继承：基于模板的继承。
长城汽车，要造跑车，基于模板继承的方式：基于现有的生产车的流水线去改造成生产跑车的流水线。有了流水线，就可以造无数个跑车了。原有的流水线就是初始的模板。继承了该模板进行了响应的改造。
js的继承是基于原型对象的继承。
长城汽车，要造跑车。基于原型对象的继承方式：以现有的车为模板进行跑车的改造。现有的车就是原型对象。

5：js中的对象：
本质上对象就是键值对的无序的集合。

6：创建对象的方式：
1：字面量直接赋值。
2：构造函数方式。
7: 以前创建对象的方式都不太满意，两种方式都有一些问题。
接下来看其他的方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /* function step1() {
         console.log ("农夫发现了一条冻僵的蛇，揣怀里了");
     }
     function step2() {
         console.log ("蛇醒了,蛇咬了他一口");
     }
     function step3() {
         console.log ("农夫死了");
     }
     step1();
     step2();
     step3();*/

    //字面量
    var farmer = {
        name: "善良的农夫",
        save: function (snake) {
            console.log (this.name + "将冻僵的" + snake.name + "揣到了怀里");
            snake.wakeup ();
            //蛇咬了救助它的农夫
            snake.attack (this);
        },
        die: function () {
            console.log (this.name + "挂了");
        }
    }

    var snake = {
        name: "小青",
        wakeup: function () {
            console.log (this.name + "醒来了");
        },
        attack: function (farmer) {
            console.log (`${this.name}攻击了${farmer.name}`);
            farmer.die ();
        }
    }

    farmer.save (snake);

    //构造函数方式
    var obj = new Object ();
    obj.name = "123";

</script>
</body>
</html>

14 通过构造函数创建对象

1：之前涉及到的构造函数，用来创建不同类型的对象的构造函数有哪些？
Array、Function、Object、Number、String、Boolean、RegExp、Date
上述的对象既是构造函数对象，也是构造函数对象创建出来的对象的类型。
这些类型只是一些基础的类型。不能满足需求。
2：如果想使用构造函数创建出不同的对象来，需要自定义构造函数。
自定义构造函数的语法：
function 构造函数名(){
this.属性1 = 值1;
this.属性2 = 值2;
this.属性3 = 值3;
…
this.功能1 = function(){};
this.功能2 = function(){};
…
}
构造函数用来创建对象，要使用关键字new 来调用。

3: 使用上述的构造函数创建的对象的属性都是一样的。不能满足对象之间属性差异化的需求。
可以通过参数来实现差异化。
自定义构造函数的语法：
function 构造函数名(参1,参2,参3){
this.属性1 = 参1;
this.属性2 = 参2;
this.属性3 = 参3;
…
this.功能1 = function(){};
this.功能2 = function(){};
…
}

4: 构造函数本质上是定义了一个模板，模板中规定了该构造函数名的类型的对象有什么属性和功能。
通过该构造函数模板，可以创建任意个该类型的对象，每个对象的属性和功能都有自己独立的内存。

5：构造函数的定义：
a：构造函数的名字首字符要大写，遵循驼峰命名的规范。
b：构造函数的名字，既是函数的名字，也代表了要创建的对象的类型。
c：构造函数中的属性就是普通的变量，遵循变量的命名规则。
d: 构造函数创建对象要使用 new 关键字调用。
e：构造函数中的this：当前对象。通过该构造函数刚刚创建出来的对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //自定义学生的构造函数，用来创建学生对象。
    function Student() {
        this.name = "小刚";
        this.age = 16;
        this.score = 90;
        this.study = function () {
            console.log (this.name + "热爱学习");
        };
        this.eat = function () {
            console.log (this.name + "是个吃货");
        }
    }
    //使用构造函数创建对象
    // var student = new Student();
    // //使用的方式和之前的一样
    // console.log (student.name);
    // student.study();
    // student.eat();
    // console.log (student);
    // console.log (new Student());

    //定义构造函数，并根据参数设置属性的值
    function Student(name,age,score) {
        //给this绑定属性的过程。
        this.name = name;
        this.age = age;
        this.score = score;
        this.study = function () {
            console.log (this.name + "热爱学习");
        };
        this.eat = function () {
            console.log (this.name + "是个吃货");
        }
    }

    //创建10个不同属性的学生对象。保存到数组中
    var students = [];
    const COUNT = 10;
    var names = ["小白","小黑","小马","小王","小刘","小孙","小张","小李","小宋","小何"];
    for (let i = 0; i < COUNT; i++) {
        students.push(new Student(names[i],10+i,80+i));
    }
    console.log (students);
    students[7].study();
    students[7]["name"] = "老李";
    console.log (students[7].name);


</script>
</body>
</html>

15 构造函数练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    构造函数练习：
    1：定义一个用于创建矩形对象的构造函数。
        属性：宽度、高度。
        方法：周长、面积。

     创建一个矩形对象，然后求周长和面积。

     2：使用构造函数的方式创建之前的练习的农夫与蛇。
        创建农夫和蛇两个对象，展示故事的过程。

-->
<script>
    //1定义一个用于创建矩形对象的构造函数。
    var Rectangle = function (width,height) {
        this.width = width;
        this.height = height;
        this.perimeter = function () {
            return this.width + this.height << 1;
        };
        this.area = function () {
            return this.width * this.height;
        }
    };

    //创建矩形对象
    var rect = new Rectangle(6,8);
    console.log (rect.perimeter());//28
    console.log (rect.area());//48

    //2
    function Farmer(name) {
        this.name = name;
        this.save = function (snake) {
            console.log (`${this.name}救了一条受伤的蛇${snake.name}`);
            snake.love(this);
        };
        this.marry = function (snake) {
            console.log (`${this.name}开开心心的娶了${snake.name}`);
        };
    }
    function Snake(name) {
        this.name = name;
        this.hurt = function () {
            console.log (`${this.name}负伤了！`);
        };
        this.love = function (farmer) {
            console.log (`${this.name}爱上了救她的${farmer.name}`);
        }
    }
    function Story(farmer,snake) {
        this.farmer = farmer;
        this.snake = snake;
        this.start = function () {
            this.snake.hurt();
            this.farmer.save(this.snake);
            this.farmer.marry(this.snake);
        }
    }

    new Story(new Farmer("许仙"),new Snake("白素贞")).start();
</script>
</body>
</html>

16 构造函数和普通函数的区别

构造函数和普通函数的区别：
1：语法的区别
a：构造函数的首字符是需要大写的。遵循驼峰命名的规范。
b：普通函数的周字符小写。遵循驼峰命名的规范。

2：语义的区别：
a：定义构造函数就是为了创建构造函数名对应的类型的对象的。
b：普通函数的定义是为了实现某个功能。功能也可能是创建一个对象。

3：使用的区别：
a：构造函数的使用，如果创建对象需要使用new关键字调用。返回创建并初始化好的对象。
也可以不通过new关键字调用。直接使用。就当做普通函数使用了。如果当做普通函数调用
就不能创建对象了。返回undefined。
b：普通函数的使用。直接调用。也可以通过new关键字调用，来创建对象。但是不建议用普通函数来创建对象。

4：函数中的this的区别：
a：构造函数中的this。使用new 调用构造函数。this就是刚刚创建好的对象。
直接调用构造函数，this就是window对象。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   var Rectangle = function (width,height) {
       this.width = width;
       this.height = height;
       this.perimeter = function () {
           return this.width + this.height << 1;
       };
       this.area = function () {
           return this.width * this.height;
       }
   }

   // Rectangle {width: 10, height: 20, perimeter: ƒ, area: ƒ}
   console.log (new Rectangle(10,20));//对象
   console.log (Rectangle(20,30));//undefined
</script>
</body>
</html>

打酱油的女孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识JavaScript （十九）

初识JavaScript （十九）1 正则的分组2 正则的exec方法3 正则的贪婪和懒惰模式4 正则练习5 算法-数组去重indexOf6 算法-数组去重-splice7 算法-数组去重-哈希8 算法—排序—冒泡9 算法—排序—选择排序9 算法—排序—插入排序10 算法—排序—快排11 算法—查找—二分查找12 JSON介绍13 面向对象介绍14 通过构造函数创建对象15 构造函数练习16 构造函数和普通函数的区别1 正则的分组正则的分组：1: 可以将正则的一部分或者是整体使用小括号括起来，作为一组
复制链接

扫一扫

专栏目录