js之总结

来源：互联网发布：怎么样修改淘宝会员名编辑：程序博客网时间：2024/05/22 12:06

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

0 0