js之总结

旧城等待， 2022-08-27 12:49 165阅读 0赞

![SouthEast][]

1.数组是对象的一个扩展  
  
  
2.在js中对象是一堆名值对的集合  
例如:var obj = \{"name":"lily","height":170\};  
alert(obj.name);//输出lily  
特例:可以像操作数组一样操作对象  
var obj = \{\};  
obj\[1\] = "lily";  
alert(obj\[1\]); //输出lily  
  
  
3.数组和对象定义的两种方式  
数组的定义方式:  
var ary = new Array();//第一种定义数组的方式  
var ary = \[\];//第二种定义数组的方式  
ary\[1\] = "lily"  
或  
ary.push(lily); //在数组的末尾添加  
对象的定义方式  
var obj = new Object();//第一种定义对象的方式  
var obj = \{\};//第二种定义对象的方式  
    var obj = \{"name":"lily","height":170\};  
  
  
 4.数组的for循环(使用下标来进行循环)  
 var array = \[1,2,3,4\];  
 for(var i=0;i<array.length;i++) \{  
 alert(array\[i\]);  
 \}  
  
  
 对象的for循环(for in循环 或叫 foreach循环)  
 var obj = \{"name":"lily","height":170\};  
 for(var i in obj) \{  
 alert(i); //输出第i个元素的属性名  
 alert(obj\[i\]);//输出第i个元素的属性值  
 alert(i+":"+obj\[i\]); //拼接出第i个元素的名值对.例如:"name":"lily"  
 \}  
  
  
 5.数据结构的东西:数组里存对象  
 例如:存个班学生的信息  
 var myClass = \[\];  
 myClass\[0\]=\{  
 "name":"张三",  
 "Chinese":90,  
 "English":85,  
 "Math":86  
 \}  
 myClass\[1\]=\{  
 "name":"李四",  
 "Chinese":91,  
 "English":82,  
 "Math":85  
 \}  
 for(var i=0;i<myClass.length;i++) \{  
 var obj = myClass\[i\];  
 alert(obj.name);  
 \}  
  
  
 6.js中的String对象  
 String对象也有length属性,这和java中对象的size()方法是有区别的  
 var s = "String";  
 alert(s\[0\]);//输出S,ie不支持  因为:js中数组是对象的一个扩展  
 alert(s\[s.length-1\]); // 输出s对象的最后一个元素  
 //上面两种方式都不好,用String的方法兼容性比较好  
 alert(s.charAt(0)); //这种方式较好,获取s对象的第一个元素  
 alert(s.charAt(s.length-1)); //获取s对象的最后一个元素  
  
  
 注意:在js中String是不可以改变的对象  
 例如:var str = "abcd-efg";  
 str=str.replace("-","\#");  
 alert(str); //chrome支持这种写法  
 为了更好的支持  
 var str = "abcd-efg";  
 var str1 = str.replace("-","\#");  
 alert(str1);  
  
  
 7.简单的回调  
 function func() \{  
 alert("关不上的窗");  
 \}  
 setInterval(func,1000);//每隔一秒调用一下func函数  
  
  
8.简单的滚动标题  
var s = "滚动的字符串...".split("");//把该字符串用,分隔  
  
  
function func() \{  
s.push(s\[0\]);//把第一个元素放到数组的末尾  
s.shift();//把第一个元素干掉  
document.title=s;  
\}  
  
  
setInterval(func,1000);//1秒钟回调一下func()函数  
  
  
9.在html页面中引入一个js的首要步骤  
先在被引入页面(demo.js)加入一个alert('javascript');  
在text.html页面中  
<script type="text/javascript" src="demo.js"/>  
用浏览器打开text.html页面,看是否弹出javascript?  
  
  
10.根据id找到一个html对象,然后注册一个onclick事件执行=后面的函数  
<input type="button" value="button" id="btn"/>  
  
  
<script type="text/javascript">  
var a = document.getElementById("btn");  
a.onclick = b; //注意:注册事件的时候只能是函数名,比如这里的b,不能跟其他内容 如果:a.onclick = b();//则直接执行b()函数,而不执行onclick  
function b() \{  
alert('----');  
\}  
</script>  
  
  
11.js中改变一个对象的属性值  
 对象.属性=属性值  
  
  
12.用js动态改变html的样式  
<html>  
<head>  
<script type="text/javascript">  
window.onload = function () \{ //确保整个dom元素都被加载完  
var obj = document.getElementById('btn');  
obj.onmouseover = over; //注册一个鼠标放上去的事件,执行over函数  
  
  
function over() \{  
this.className = "baseYellow"; //把class属性值改为baseYellow,相当于class="baseYellow"  
\}  
\}  
</script>  
<style type="text/css">  
.baseYellow \{  
color:red;  
\}  
</style>  
</head>  
<body>  
<input type="button" value="button" id="btn"/>  
<script type="text/javascript">  
alert(document.getElementById('btn'));  
</script>  
</body>  
</html>  
  
  
13.dom元素的选择方法返回的东西  
//返回一个对象  
var obj = document.getElementById("btn");//将id为btn的元素选择出来,返回一个html的对象  
obj.onmouseover = function() \{ //注册一个鼠标放上去的事件,并执行一个函数  
alert("测试");  
\}  
//返回的是一个数组  
var arr = document.getElementsByTagName("h");  
arr\[0\].innerHtml("测试); //将第一个h标签的内容改为测试,相当于<h>测试</h>  
  
  
14.在地址栏进行调试,在地址栏输入:javascript:alert('abc');  
  
  
15.变量的声明  
var a = 123;//声明一个局部变量a  
b="gloable";//系统自动创建一个全局变量b  
  
  
16.js中的null表示一个占位符(存在栈中),表示一个空引用,在堆中并不存在,也可以理解为:声明了一个东西,但是找不到对应的内容  
  
  
17.一个变量申明但不赋值,它的类型就是undefined  
例如:var a; alert(a);//弹出undefined  
  
  
18.函数也是一个类型,复杂类型  
例如:function fun() \{  
  
  
\}  
alert(typeof fun);//输出function  
  
  
19.js中null和undefined是相等的,但是不严格相等  
例如:alert(null==undefined); //返回true  
alert(null===undefined);//返回false  
  
  
20.最大值和最小值  
alert(Number.MAX\_VALUE);//输出最大值  
alert(Number.MIN\_VALUE);//输出最小值  
  
  
21.不同系统中的换行符  
\\n 换行,Unix换行,在浏览器中也使用这种格式  
\\r 回车符,Mac OS  
\\n\\r Window中的换行符  
  
  
13.进制转换  
var num = 10;  
alert(num.toString());//转换为10进制  
alert(num.toString(2));//转换为2进制 1010  
alert(num.toString(8));//转换为8进制 12  
alert(num.toString(16));//转换为16进制  
  
  
14.字符串的类型转换  
alert(parseInt("12.23")); //12  
alert(parseFloat("12.45)); //12.45  
alert(parseFloat("12.23.34"));//12.23  
alert(parseFloat("abc"));//NaN就是not a number  
alert(parseInt(true));//NaN  
字符串指定要转换的进制  
alert(parseInt("AB",16));//171,把AB转换为16进制  
特殊,以0开头的会被当做8进制的数来解析  
alert(parseInt("0128")); //在crome中是128,在低版本的浏览器中就是8进制数  
  
  
15.删除对象的属性值  
var a = \[12,322\];  
delete a\[0\] //删除下标为0的元素,即删除12  
或  
a\[0\]=undefined;  
  
  
16.()括号的作用:将括号中的表达式求值返回给上下文  
于是:(函数表达式)();//创建一个函数并立即执行他,只执行一次  
( function()\{alert('测试')\} )();  
于是:更简洁的写法  
(function(p) \{  
alert(p);  
\})(123);  //把123作为参数传递给function()  
  
  
17.创建函数的几种方式  
1.function() \{\}  
2.function fn() \{\} //这种有名字的函数式要等他加载以后才能调用,例如:function fn()\{\};fn() //这种写法才是正确的  
3.var a = funciton()\{\}; //赋值一个函数表达式给a  
注意:赋值一个函数表达式的时候,函数只能是匿名函数,不允许有名称  
例如:var a = function fn()\{\}; 这种写法是错误的,这种写法就要求函数是匿名函数  
  
  
18.函数式编程  
1.arguments对象:该对象会把传入函数的所有参数保存起来,类似于数组  
function fn() \{ //利用arguments这个对象,就不用在参数列表中写接收的参数  
for(var i=0;i<arguments.length;i++) \{  
alert(arguments\[i\]);  
\}  
\}  
fn(1,2,3,4,5,6);  
  
  
2.函数的重载  
1.注:在js中同名函数只允许有一个,故函数的重载要用到arguments对象获取参数的个数来进行判断  
例如:  
function fnTest() \{  
var args = arguments;  
switch(args.length) \{  
case 0:  
return "没有输入!"  
case 1:  
return "一个参数:"+args\[0\];  
case 2:  
return "两个参数:"+args\[0\]+"和"+args\[1\];  
\}  
\}  
alert(fnTest()); //你没有输入  
alert(fnTest(1));  
alert(fnTest(1,2));  
2.arguments的callee();//返回arguments所在的函数  
例如:函数的递归  
计算一个数的阶乘  
function fnPlus(n) \{ //这里参数类表写了n是避免用从arguments对象中迭代取出参数值  
return n?n\*arguments.callee(n-1):1;  
\}  
alert(fnPlus(3));  
  
  
以上写法并不好,假如以后我们把fnPlus()更名了,内层函数已要跟着一起改,于是可以用arguments.callee()获得它所在的函数  
function fnPlus(n) \{  
return n?n\*arguments.callee(n-1):1;  
\}  
alert(fnPlus(3));  
3.函数可以作为变量进行传递,回调函数  
function fnAdd() \{  
alert('弹出我');  
\}  
var a = fnAdd; //函数作为参数赋值的时候,不要带括号,否则会报一个undefined错误  
a();  
  
  
function fnAdd(n,b) \{  
alert('弹出我');  
\}  
fnAdd(1,2);  
alert(fnAdd.length); //输出fnAdd(n,b)函数的参数的个数  
  
  
//函数的caller属性,获得调用函数的上一层函数  
function fnAdd() \{  
alert(fnAdd.caller);  
\}  
function callOther() \{  
fnAdd();  
\}  
callOther();  
   
闭包:内部函数可以引用到函数外部定义的变量的最终值,内部实现可能是用一个对象保存了外部变量的引用  
var a = "我是全局变量";  
function say() \{  
alert(a);  
\}  
say();//弹出我是全局变量  
  
  
function each() \{  
var i=0;  
for(i=0;i<10;i++) \{  
  
  
\}  
function inner() \{  
alert(i); //弹出10,原因是:局部变量每创建一次就销毁一次,i访问的是循环后的最终值  
\}  
inner(); //有名字的函数,要等它创建以后才能调用到  
\}  
each();  
  
  
function each() \{  
var i=0,inner;  
for(;i<10;i++) \{  
inner = function() \{ //把该函数表达式返回给上下文  
alert(i); //弹出10,原因也是局部变量每创建一次就销毁一次  
\}  
\}  
return inner;  
\}  
// alert(each());//返回function() \{alert(i)\}  
var fn = each(); //each()执行过后返回一个函数  
fn();//返回10,把each()执行返回的函数在执行以下  
  
  
采用闭包:用一个内部函数把每次的局部变量的值保存起来,从而可以访问到不同的值  
function each() \{  
var i=0,a=\[\];  
for(;i<10;i++) \{  
cache(i); //cache()函数就是用来保存每次创建的局部变量的值的  
\}  
function cache(i) \{ //cache()函数执行了10次,保存了变量i的10个不同的值  
a.push(function() \{  
alert(i);  
\});  
\}  
return a; //把function() \{alert(i);\}返回给上下文  
\}  
var b = each();   
for(var i in b) \{  
b\[i\](); //0,1,2,3,4,5,6,7,8,9,10  
\}  
  
  
函数的嵌套:在ECMAScript中,函数是可以无限嵌套的  
function A() \{  
var a = "我是A中的局部变量";  
B(); //函数嵌套,要想执行里层的函数必须在外层函数中调用  
function B () \{  
alert(a);//弹出我是A中的局部变量  
\}  
\}  
A();  
  
  
函数的局部变量:函数的局部变量(函数执行多少次,它就会被创建多少次)  
采用闭包以后,同样,函数执行多少次,就被创建了多少次变量,只是采用闭包以后,内部实现机制会保存对外部变量的引用,不会被垃圾回收机制立即回收,而要等到没有任何引用的时候才会被垃圾回收机制回收  
例如:采用闭包,会创建多个,并且保存起来,缺点是:会造成内存的浪费  
function each() \{  
var i=0;inner,a=\[\];  
for(;i<10;i++) \{  
cache(i);  
\}  
\}  
  
  
function cache(i) \{//该函数被执行了10次,保存了10个不同的i值,这里的i是cache函数的局部变量  
a.push(function() \{  
alert(a);  
\});   
\}  
  
  
例如:没有采用闭包  
function fnTest() \{  
var i=0;a=\[\];  
for(;i<10;i++) \{  
a.push(function() \{  
alert(i);//i只被创建了一次(因为函数只执行了一次)  
\});  
\}  
return a;  
\}  
fnTest();  
  
  
更复杂的闭包:  
function fnTest(num1,num2) \{  
var num3 = num1+num2;  
return function() \{//一个闭包  
alert("num1+num2的值为:"+num3);  
\}  
\}  
var result = fnTest(23,56);//执行完该函数返回的是一个函数  
result();//把返回的函数执行一下  
  
  
函数的get,set  
function fnTest() \{  
var a = 123;  
return \{//返回一个对象  
set:function(param) \{a=param\},  
get:function()\{return a\}  
\};  
\}  
var obj = fnTest();  
alert(obj.get());//123  
obj.set(4);  
alert(obj.get());//4  
  
  
19.函数的面向对象  
使用new关键字返回的是一个对象  
function Demo() \{  
alert('Demo');  
\}  
var d = new Demo();//其实也是执行了Demo()函数,只是返回的是一个对象  
alert(d);  
  
  
如果这样,  
function Demo() \{  
alert('Demo');  
\}  
var d = Demo();  
alert(d);//返回的是undefined  
  
  
注意:在构造函数中如果返回的不是基本的类型,则会覆盖new出来的对象  
function Demo() \{  
alert('Demo');  
return \[123,456\];  
\}  
var d = new Demo();  
alert(d);//返回的就是123,456(即返回了一个新对象)  
结论:在构造函数中不要使用return  
  
  
构造函数:构造函数中的this指向new它的那个对象  
function Demo() \{  
this.name = "HXL";//this指向调用它的那个对象,也就是new Demo();  
\}  
var d = new Demo();  
alert(d.name);//返回HXL  
  
  
可传递参数的构造函数  
function Demo(name,age) \{  
this.name = name; //this指向调用它的那个对象,也就是new Demo()  
this.age = age;  
\}  
var d = new Demo("HXL",20);  
alert(d.name);  
alert(d.age);  
  
  
补充:1.所有的全局变量都是window对象的属性  
2.一个函数是哪个对象的属性,this就指向哪个对象  
function Demo(name,age) \{  
this.name = name;  
this.age = age;  
alert(this);  
\}  
window.Demo("HXL",20);//输出\[object Window\],说明没用new的时候this就指向window对象  
  
  
所有对象都有一个方法,isPrototypeOf(),用它来判断它是不是另一个对象的原型  
function Person()\{\}  
var p1 = new Person();  
alert(Person.prototype.isPrototypeOf(p1));//true  
  
  
构造函数的prototype属性是一个对象  
这个对象具有的所有属性,它的实例也具有  
例如:  
Demo() \{  
this.name=name;  
\}  
Demo.prototype=\{  
name:"HXL",  
getName:function() \{  
return this.name;  
\}  
\};  
var d = new Demo(); //this指向它  
alert(d.getName()); //执行getName()函数  
  
  
给一个实例的prototype属性添加一个属性,所有它的实例都具有该属性  
funcion Demo() \{\}  
var d = new Demo();  
Demo.prototype.name="HXL";  
alert(d.name);  
  
  
  
  
函数的继承:函数的继承使用prototype对象  
原理:var o = \{\};  
o=\{name:"HXL"\}; //把o指向了另外一个新对象  
o.name="HXL";//给o对象赋值了一个那么属性  
   例如:function Demo() \{  
   this.toString = 123;  
   \}  
   Demo.prototype = \{ //给Demo的prototype对象赋值一个新的对象  
   name:"HXL",  
   getName:function() \{  
   return this.name;  
   \}  
   \};  
   var d = new Demo();  
   alert(d.getName());  
   //以上方式相当于:var o = \{\};o=\{name:"HXL"\}  
   又如:  
   function Demo() \{  
   this.toString = 123;  
   \}  
   var d = new Demo();  
   Demo.prototype.name="HXL"; //给Demo()的prototype对象赋值了一个新的值  
   alert(d.name);//输出456  
   //以上方式相当于:var o = \{\}; o.name="HXL"  
  
  
   函数继承的语法  
   function DemoA() \{  
   this.name="HXL";  
   \}  
   function DemoB() \{  
   //要让DemoB()继承DemoA(),就是要从DemoA()上借用一些属性和  
   \}  
   DemoB.prototype=new DemoA();//new DemoA()返回的就是\{name:"HXL"\},注意:提供构造参数的继只能够被执行一次,例如new DemoA("HXL"),只会被执行一次  
   var d = new DemoB();  
   alert(d.name);  
  
  
   含构造参数的函数继承  
   例如:function DemoA(name,age) \{  
   this.name = name;  
   this.age = age;  
   \}  
   funtion DemoB(name,age) \{  
   DemoA.call(this,name,age);//使用call()调用父类函数,this指向了DemoB(),即当前对象  
   \}  
   DemoB.prototype = new DemoA();//函数的继承只执行一次     
   var d = new DemoB("HXL",22);  
   alert(d.name);//输出HXL  
  
  
   改变函数的指针(这里的指针是引用的意思,并不是c语言中的指针),使用call(),他是函数的一个方法  
   例如:call()用在函数的继承中  
    function fn(a,b) \{  
    this.ver = 123;  
    alert(a+"|"+b); //输出12|b  
    \}  
    var o = \{\};  
    fn.call(o,12,"b"); //o指向了上面的对象o  
    //call(this指向的对象,...函数的参数),即this指向了o对象  
    alert(o.ver); //输出123  
  
  
       又如: apply()用在函数的继承中  
    function fn(a,b) \{  
    this.ver = 123;  
    alert(a+"|"+b);//输出12|b  
    \}  
    var o = \{\};  
    fn.apply(o,\[12,"b"\]);  
    //apply(this指向的对象,\[参数数组\])  
    alert(o.ver);//输出123  
  
  
       私有属性:在js中没有私有属性的概念,但是可以通过闭包进行模拟  
        例如:  
         functioin Demo(name,age) \{  
         this.getName=function() \{//这就是一个闭包,内部可以访问外部变量  
         return name;  
         \}  
         this.getAge=function() \{  
         return age;  
         \}  
         this.setName=function(n) \{//注意这里的n不能写为name,不然就变成了一个局部变量,创建一次销毁一次  
         name=n;  
         \}  
         this.setAge=function(a) \{  
         age=a;  
         \}  
         \}  
         var d = new Demo("HXL",22);  
         alert(d.getName());//输出HXL

[SouthEast]: /images/20220824/2a44a003ce67450ea3ed9e42352f2145.png