前端入门到熟悉day24

js数组

01.js面向对象

<script>

//从生活 再到程序 将生活中的实际行动转化成对象 自定义一个对象 万物皆对象

var obj ={name:"章哥",age:18,sex:"男",height:180,skill:"H5,js,css3,vue,mysql",eat:function(str,time){

if(str == "早上" && time>"6:00:00"&& time <"11:00:00"){

alert("吃早餐")

}else if(str == "中午" && time>"12:00:00"&& time <"13:00:00"){

alert("吃午餐")

}else if(str == "晚上" && time>"17:00:00"&& time <"19:00:00"){

alert("吃晚餐")

}

}};

</script>

 

02js数组

<script>

//js数组的声明方式1 array对象

var arr = [1,true,null,"sdadasdas",{run:function(){

alert(1111)

}}]

// console.log(arr);

// alert(typeof arr);

 

//实例化数组

var arr2 = new Array();

 

arr2[0]=12;

arr2[1]=13;

arr2[2]=133;

//空的元素 返回的是undefined

// console.log(arr2[3]);

// for(var i=0;i<arr2.length;i++){

// console.log(arr2[i]);

// }

// for in循环迭代比较安全 只迭代非空元素 不会返回undefied

for(var i in arr2){

console.log(arr2[i]);

}

//第三种创建数组

//一个系数就会默认为数组长度

var arr3=new Array(10);

console.log(arr3);

//超过一个系数 我们就会把它作为数组的元素

var arr4 = new Array(10.01,"aaaadd",true)

// console.log(arr4)

 

//放一个为非数字类型 我们就会把它作为数组元素 而不是长度

var arr5 = new Array("adsds");

// console.log(arr5)

</script>

 

03js数组的特性

<script>

//弱类型语言不仅类型定义没有限制，在数组方面还很灵活

var arry = [1,2,5,"vovol"];

// alert(typeof arry);

// arry[3] = 100;

//arry[4]= 1001;

// console.log(arry.length);

// console.log(arry.indexOf("vovol"));

 

var myCars=new Array("Saab","Volvo","BMW",2,true);

console.log(myCars.indexOf("Volvo")); //返回我们这个Volvo的索引值（下标）

</script>

 

04二维数组

<script>

var array = 1;

var array2 = [3,4,5,6];

//二维数组 数组里面嵌套一个数组 多维数组 数组里面嵌套数组 一直嵌套

var zong = [array,[3,4,5,["sdadda",true]]];

// console.log(zong);

for(i in zong){

console.log(zong[i]);

for(j in zong[i]){

console.log(zong[i][j]);

for(k in zong[i][j]){

console.log(zong[i][j][k]);

}

}

}

</script>

 

05冒泡排序

<script>

//冒泡排序的原理

//前后两个数进行比较 如果复合条件 交换位置 直到所有的数排序完成 结束比较

 

// var array = [199,10,11,2,22]

 

// array.sort(function(a,b){

// return a-b;

// })

// //升序

// console.log(array);

 

// 冒泡排序

/*

5 4 3 2 1

 

第一轮比较 4 3 2 1 5 比较了4次

第二轮比较 3 2 1 4 5 比较了3次

第三轮比较 2 1 3 4 5 比较了2次

第四轮比较 1 2 3 4 5 比较了1次

 

1 5 10 3 100 20

 

第一轮比较 1 5 3 10 20 100 比较了5次

第二轮比较 1 3 5 10 20 100 比较了4次

第三轮比较 1 3 5 10 20 100 比较了3次

第四轮比较 1 3 5 10 20 100 比较了2次

第五轮比较 1 3 5 10 20 100 比较了1次

*/

var arr = [1, 5, 10, 3, 100, 20]

//循环控制比较的轮数

for (var i = 0; i < arr.length - 1; i++) {

//控制两两比较的次数 换位 -i 把两两比较的最大值 不用比较

for (var j = 0; j < arr.length - 1 -i; j++) {

//此时只是比较了一次

// if (arr[0] > arr[1]) {

// var temp = arr[0];

// arr[0] = arr[1];

// arr[1] = temp;

// }

//多次两两比较

if (arr[j] < arr[j + 1]) {

var temp = arr[j]

arr[j] = arr[j + 1]

arr[j + 1] = temp

}

}

}

 

console.log(arr);

</script>

 

json数组

JSON数组必须用中括号书写。

数组也是合法的数据类型(字符串，数字，对象，数组,布尔值或者null)。

JSON数组可以嵌套到JSON对象里面。

JSON数组操作：循环迭代，嵌套JSON对象，修改数组值，删除数组元素。

普通数组里面的一些操作，JSON数据也适用。

01json数组

<script>

//http协议 传输数据都是以文本格式传输

//js数组

var arrayText='[1,true,55,"dsadasdasd",{run:function(){alert("aaaaa")}}]'

 

//json数组

var jsonText = '["dsadsa",23,"etwr",{"name":"张三"}]';

var jsonArray = JSON.parse(jsonText);

// console.log(jsonArray);

// alert(typeof jsonArray)

 

var arryText = eval("("+jsonText+")");

console.log(arryText)

</script>

 

02json数组迭代

如果去问一个不太了解JavaScript数组的开发人员，JavaScript的数组有多少种迭代方法，你可能得到的答案为，for/while/do-while...等等，这个是循环中的方法，和我们数组的迭代还是有一些区别的。虽然在数组中我们也可以用这些方法去迭代。但是，为了装逼为了飞，我们就来写一点带有脚本味道的代码吧！    

 

1、every(): 对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则结果返回true。

2、filter(): 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

3、forEach(): 对数组中的每一项运行给定函数，这个方法没有返回值。

4、map(): 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

5、some(): 对数组中的每一项运行给定函数，如果该函数任意一项返回true，则返回true。

 

以上的方法都不会修改数组中包含的值。

在这些方法中，最相似的是every()和some()。他们都用于查询数组中的项是否满足某个条件。对every来说，传入的函数必须对数组中的每一项都返回true，这个方法才返回true；否则，他就返回false。在这里我们总结为有假则假，都真才真。而some()方法则是只要传入的函数对数组中的任何一项返回true，就返回true。

<script>

var jsonArray = [100,{"name":"Maybe"},"Runoob","Taobao"];

 

for(var i=0;i<jsonArray.length;i++){

console.log(jsonArray[i])

}

for(key in jsonArray){

console.log("for in:"+jsonArray[key])

}

</script>

 

03json数组修改和删除

concat() 连接两个或者更多的数组

join()  把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

push() 向尾末添加元素

sort()  数组排序

splice() 从指定下标开始删除或者不删除数据，然后添加或者不添加新元素

<script>

//json数组 js数组的操作 我们json数组同样能够使用

var jsonArray = [100,{"name":"Maybe"},"Runoob","Taobao"]

 

//修改值

jsonArray[0] =200;

//console.log(jsonArray);

 

for(var key in jsonArray){

//console.log(jsonArray[key])

}

 

//添加元素

jsonArray[jsonArray.length]=2000;

jsonArray.push("我好帅");

// console.log(jsonArray)

 

//删除元素 推荐

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

注意：此方法改变数组的长度！

提示： 移除数组第一个元素，请使用 shift() 方法。

 

jsonArray.pop();

// console.log(jsonArray)console.log(jsonArray)

 

//第二种删除方法 不推荐 长度还是5 它只会删除内容 位置还是保留 长度不变

delete jsonArray[jsonArray.length-1];

console.log(jsonArray)

</script>

 

04json实战

window.οnlοad=function(){

//mock数据

var arry =[{"name":"T2F水泵房","value":"10/30%"},{"name":"B1F泡沫间","value":"8/20%"},{"name":"16F公共区域","value":"3/10%"}]

var fang = {"type":"按区域","name":"房号","content":arry}

 

//数据绑定 数据渲染 生成页面

var htmlText = "<p>"+fang["type"]+"/"+fang["name"]+"</p>";

var array = fang["content"];

 

for(i in array){

htmlText+= '<p style="color:red;">'+array[i]["name"]+"     "+array[i]["value"]+'</p>';

}

 

// console.log(htmlText);

var oDiv= document.getElementById('div1');

oDiv.innerHTML=htmlText;

 

}

</script>

 

 

01函数

一、函数是用来帮助我们封装、调用代码的最方便的工具！

二、函数的创建方法有三种:

三、函数的创建方式有3种，调用方式也不是单一的，调用方式有4种！
      1、作为一个函数去调用 函数名+();(函数作为全局对象调用，会使this的值成为全局对象，使用window对象作为一个变量，容易造成程序崩溃！) 
      2、函数作为方法调用：（函数作为对象的方法调用，会使this的值成为对象的本身！）
      我们举例说明：

 

3、使用构造函数调用函数：(构造函数中的this没有任何值)

 

4、作为函数方法调用函数：(这种可以设置this的值，我可以返回不同this！)
        在js中函数是对象，是对象就有属性个方法，而call（）和apply（）是预定义的函数方法！
        这两个方法都可以调用函数，两个方法的第一个参数必须是对象的本身！

 

<script>

//函数声明

// function Test(){

// var a;

// var b;

// if(arguments.length == 2){

// a = arguments[0];

// b = arguments[1];

// }

// return a+b;

// }

// alert(Test(1,2));

 

//表达式声明函数

// var x = function(){

// var a;

// var b;

// if(arguments.length == 2){

// a = arguments[0];

// b = arguments[1];

// }

// return a+b;

// }

 

// alert(x(3,4));

 

//构造函数

var f = new Function("a","b","return a+b");

alert(f(1,10));

 

</script>

 

02函数和变量提升

一变量提升

　在ES6之前，JavaScript没有块级作用域(一对花括号{}即为一个块级作用域)，只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

var global; // 变量提升，全局作用域范围内，此时只是声明，并没有赋值

console.log(global); // undefined

global = 'global'; // 此时才赋值

console.log(global); // 打印出global

 

function fn () {

var a; // 变量提升，函数作用域范围内

console.log(a);

a = 'aaa';

console.log(a);

}

fn();

二、函数提升

js中创建函数有两种方式：函数声明式和函数字面量式。只有函数声明才存在函数提升！

 

<script>

//函数的提升

 

a();

function a(){

alert(12);

}

 

//变量的提升 【注】 初始化的变量不存在变量提升

 

// var x = 6; //初始化

 

// var x = '字符串1'

var x;

x = "字符串1";

console.log(x);

</script>

 

03自执行函数

<script>

( function show() {

alert("我被执行啦！")

})();

 

//（） 确定这个要自执行的函数 （）调用

 

</script>

 

04作用域

变量作用域

在JavaScript中全局变量的作用域比较简单，它的作用域是全局的，在代码的任何地方都是有定义的。然而函数的参数和局部变量只在函数体内有定义。另外局部变量的优先级要高于同名的全局变量,也就是说当局部变量与全局变量重名时，局部变量会覆盖全局变量

注：声明局部变量时一定要使用var,否则，解释器会将该变量当做全局对象window的属性。

 

函数作用域

在JavaScript中变量的作用域，并非和C、Java等编程语言似得，在变量声明的代码段之外是不可见的，我们通常称为块级作用域，然而在JavaScript中使用的是函数作用域（变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的）

注：JavaScript的函数作用域是指在在函数内声明的所有变量在函数体内始终是可见的，也就是说在函数体内变量声明之前就已经可用了。

作为属性的变量

当声明一个全局变量的时候，实际上是定义了全局对象window的一个属性。

<script>

//全局变量

var qun=10;

 

function Maybe(){

//局部变量

var qun =20;

var qun1 = 40

this.run = function () {

var qun = 30;

return qun;

}

return qun;

}

var a = new Maybe();

// console.log(a.run());

// console.log(a.run());

 

//构造函数

function User(){

//属性

this.value="A";

this.value = 10;

this.run = function (value) {

this.value = "B"

//再次声明

var value = 100;

return value;

}

}

var b = new User();

console.log(b.run(200));

</script>

 

05变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

JavaScript 只有声明的变量会提升，初始化的不会。

<script>

//点击一次按钮 让一个计数变量记住我点击的次数

var value = 0;

function count(){

value++; //变量的私有化

alert(value+"次");

}

function B(){

value = 100;

}

</script>

 

06闭包例子

JavaScript 变量可以是局部变量或全局变量，私有变量可以用到闭包。

闭包是为了防止别的类或者对象去干涉，将函数私有化而做的系列操作。

闭包就是能够读取其他函数内部变量的函数，函数没有被释放，整条作用域链上的局部变量都将得到保留。

由于在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成‘定义在一个函数内部的函数’。

所以，在本质上，闭包就是将函数内部和函数外部连接的一座桥梁。

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

 

<script>

// //点击一次按钮 让一个计数变量记住我点击的次数

// var value = 0;

// function count(){

// value++; //变量的私有化

// alert(value+"次");

// }

// function B(){

// value = 100;

// }

 

var value =100;

var a = (function A(){

var value = 0;//全局变量

return function(){

value++;//变量私有化

alert(value+"次数")

}

})();

 

function B(){

value =100;

alert(value +"次数")

}

</script>

 

07原型

js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。

也就是说：当生产一个function对象的时候，就有一个原型prototype。

prototype的属性值是一个对象，是属性的集合，

目的：封装私有的function，通过return的形式暴露出简单的使用名称，以达到public/private的效果

 

原型链是实现继承的主要方法。其基本思想是：利用原型让一个引用类型继承另一个应用类型的属性和方法。

简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

 

<script>

//类

function User(){

this.name = "maybe";

this.run = function(){

alert(100);

}

}

 

var user = new User();

user.newf = 100;

// console.log(user);

// user2首先实例化了这个user类

var user2 = new User();

//函数已经存在的属性和方法 函数对象本身的属性和方法的优先级要高于原型的属性和方法

User.prototype.name =200;

User.prototype.age = 23;

 

console.log(user.age)

console.log(user2)

 

//原型 继承关系 能够继承对象的所有属性和方法

// prototype 属性允许您向对象添加属性和方法

 

</script>

 

08number对象

<script>

//整数（不使用小数点或指数计数法）最多为 15 位 超出就会报错

var num = 999999999999999;

// alert(num);

//浮点型的数相加不一定准确

var x = 0.2 + 0.1;

// alert(x);

//遇到特别的浮点运算的时候 可以先准换成整型

// var y=(0.2*10+0.1*10)/10;

// alert(y);

 

var a = 0xF;

//进制转化，toString的后面放参数，输出对应的进制数

alert(a.toString(16));

</script>

 

09number操作

<script>

//将数字转化成指数表示法

var num = 10000;

// alert(num.toExponential());

// console.log(typeof num);

 

//实例化创建的数字 就是一个对象

var obj = new Number(0xF);

// console.log(obj);

obj = "abc";

//console.log("修改后"+obj);

// console.log(typeof obj);//实例化创建的这个number对象 一旦赋值后 变成相应的数据类型

 

//四舍五入

var num2=0.44;

//console.log(num2.toFixed(0));

//toFixed(参数) 参数系数就是控制小数点后面保留多少位数

var num3 = 13.6714;

//console.log(num3.toPrecision(2));

 

var num4=56;

//alert(typeof num4)

var b=num4.toString();

// alert(typeof b)

 

//返回一个number对象的原始值

var obj = new Number(37.144);

alert(obj.valueOf());

</script>