020Day-算法、JSON、面向对象、通过构造函数创建对象

最新推荐文章于 2022-08-13 16:33:21 发布

码小白的求学之路

最新推荐文章于 2022-08-13 16:33:21 发布

阅读量290

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yanxiaona111/article/details/108311867

版权

一、算法-二分搜索法

二分搜索法：折半查找法。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>

二、算法-快速排序

<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>

三、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对象。

<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>

四、面向对象介绍

1：面向过程编程：
解决问题的思维的方式：将问题分解为若干个功能模块。将这些功能模块按照一定的顺序执行。
是一种线性的解决问题的思维模式。
c 语言就是一种典型的面向过程的编程语言。
面向过程思维的问题：
1：随着软件规模的扩大，使用线性的思维解决问题的逻辑过于复杂，实现起来比较困难。
2：后期的代码的维护的成本比较高，代码的独立性，复用性不好。
2：面向对象编程：
解决问题的思维的模式：分析问题域中存在多少个对象。让这些对象具有需要的功能和属性，
然后让对象之间相互作用实现最终的需求。
是面向过程之后出现的思维方式，典型的语言：java、c# 纯粹的面向对象的编程语言。
c++ 是在面向过程的基础上增加了面向对象的特性。
面向对象的三大特性：封装、继承、多态。
面向对象的语言都有类型的概念。
面向对象的好处：
1：对于比较复杂的问题，解决起来相对更加的容易。
2：代码的复用性更好。
问题：对于小问题，使用面向对象就比较复杂了。
面向对象通常是包含了面向过程的。让创建的对象去一步步的去执行自己的功能。
3：例子：开车去拉萨。
面向过程：打开车门，开始出发、保定、石家庄、太原、西安、兰州、…拉萨、布达拉宫。
面向对象：找个司机（开车）、找一辆车（跑），有导航（引领方向）。
例子：农夫与蛇。
面向过程：农夫发现了一条冻僵的蛇，揣怀里了。蛇醒了，蛇咬了他一口。农夫死了。
面向对象：2个对象、农夫+蛇。农夫：救蛇、死亡。蛇：苏醒、咬人。
4：javascript语言是基于对象的语言，有封装、有继承、没有多态。
java的继承和js的继承的区别：
java的继承：基于模板的继承。
长城汽车，要造跑车，基于模板继承的方式：基于现有的生产车的流水线去改造成生产跑车的流水线。有了流水线，就可以造无数个跑车了。原有的流水线就是初始的模板。继承了该模板进行了响应的改造。
js的继承是基于原型对象的继承。
长城汽车，要造跑车。基于原型对象的继承方式：以现有的车为模板进行跑车的改造。现有的车就是原型对象。
5：js中的对象：
本质上对象就是键值对的无序的集合。
6：创建对象的方式：
1：字面量直接赋值。
2：构造函数方式。
7: 以前创建对象的方式都不太满意，两种方式都有一些问题。
接下来看其他的方式。

<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>

五、通过构造函数创建对象

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：当前对象。通过该构造函数刚刚创建出来的对象。

<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>

六、构造函数练习

构造函数练习：
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>

七、构造函数和普通函数的区别

构造函数和普通函数的区别：
1：语法的区别
a：构造函数的首字符是需要大写的。遵循驼峰命名的规范。
b：普通函数的周字符小写。遵循驼峰命名的规范。
2：语义的区别：
a：定义构造函数就是为了创建构造函数名对应的类型的对象的。
b：普通函数的定义是为了实现某个功能。功能也可能是创建一个对象。
3：使用的区别：
a：构造函数的使用，如果创建对象需要使用new关键字调用。返回创建并初始化好的对象。
也可以不通过new关键字调用。直接使用。就当做普通函数使用了。如果当做普通函数调用
就不能创建对象了。返回undefined。
b：普通函数的使用。直接调用。也可以通过new关键字调用，来创建对象。但是不建议用普通函数来创建对象。
4：函数中的this的区别：
a：构造函数中的this。使用new 调用构造函数。this就是刚刚创建好的对象。
直接调用构造函数，this就是window对象。
b：普通函数中的this。通常是window对象。

<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>