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

一、算法-二分搜索法

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