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>