`
China祥
  • 浏览: 5207 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

JavaScript易忘点集合

阅读更多

JavaScript引入外部js

.....
<body>
        .........

        <script src="js/app.js"></script>
        <script src="http://lib.sinaapp.com/jquery.js"></script>
        <script>
               .........//嵌入到内部的JS
        </script>
</body>
.....

 

noscript标签

<body>
<noscript>
  <p>本页面需要浏览器支持JavaScript</p>
</noscript>

</body>

 

undefined与null

alert(undefined==null);//undefined派生自null,结果为true;
alert(undefined===null);//undefined是不全等于null的,结果为false

 

Boolean()方法转换为false的值

Boolean(false);
Boolean("");//空字符串
Boolean(0);
Boolean(NaN);
Boolean(null);
Boolean(undefined);
//上述结果都为false,除此之外都为true;

 

NaN,是数值类型,但是不是一个数

alert(NaN==NaN);//false,NaN不和任何值相等,包括自身

//isNaN()方法,不是数值的返回true;

isNaN(NaN);

isNaN("a");
isNaN("12a");//字符串

isNaN(undefined);

//上述全为true,其他的都可以转换为数值

 

数值转换Number(),parseInt(),parseFloat()

//Number(),与isNaN可以对照着

Number(undefined);
Number("12a");
Number(NaN);
//上述三个返回都是NaN,空字符串,null,包括纯数字文本字符串都可以转换为对应的数字

 

//parseInt(),parseFloat(),只能用来转换字符串和纯数值

parseInt("12.2a");//12
parseFloat("12.2a");//12.2

parseInt(12.2.2);//12
parseFloat(12.2.2);//12.2


//下面的都是NaN
parseInt(null);
parseInt(true);
parseInt(undefined);
parseInt("");
//对于parseFloat();同样适用

 

String()与toString()

//String()方法,可以将任何类型转换为字符串,包括undefined,toString()不可以

//String()方法比toString()方法多了下面的几项

var name;
name.toString();//报错
null.toString();//报错
true.toString();//报错

String(name);//'undefined'
String(null);//'null'
String(true);//'true'

 

字符串的常用方法:

var str="red";

str.length;//3
str.charAt(1);//e
str.charCodeAt(1);//101
str.indexOf("e");//1
str.indexOf("e",2);//-1,返回-1表示没找到
str.lastIndexOf("e");//1
str.trim();//去除首尾的空格
str.toLowerCase();//全小写
str.toUpperCase();//全大写

var result=str.concat("-test");//red-test

var array=result.split("-");//["red","test"]

 

条件选择语句:

JS 写道
条件选择语句有if,switch;

switch的参数不仅可以使用数值还可以使用String类型

 

函数中的参数:

JS 写道
JS中函数不介意传递参数的类型和数量,也就是说,定义一个函数需要传递两个参数,你可以传递一个或两个、三个甚至可以不传。

函数定义后,会附赠一个arguments数组,用来存放参数。

 

function sayHello(name){
        return "hello,"+arguments[0];//表示调用的是第一个参数
}

function sayHello(){
        alert(arguments.length);
}

sayHello("tom","jack","rose");//3
sayHello();//0
sayHello("jack");//1

 

function add(){
        var total=0;
        for(var temp in arguments){
                total+=arguments[temp];
        }
        return total;
}


add(1,2,3);//6
add(1,1,3,4,6);//15

 

JS 写道
所有函数都拥有length属性,用来获取参数的数量;

此参数的数量是函数声明定义时定义的数量,不是传递的数量

function test(num){}

test.length;//1

 

递归函数:

//定义函数实现num的阶乘,5*4*3*2*1
var factorial=(function f(num){
        if(num<=1){
                return 1;
        }else{
                return num*f(num-1);
        }

});

var z=factorial;//引用赋给z
factorial=null;
var result=z(5);//120

 

闭包:

JS 写道
有权访问另一函数作用域中的变量的函数,即定义在一个函数内部的函数。

function outer(){

function inner(){

}

}

 

function test(){
        var num=100;
        var fn=function(){
                alert(num);
        };
        num++;
        return fn;

}

test()();//返回值为101

 

function test(){
        if(true){
                 (function(){
                           var address="jerry";
                           alert(address);//jerry
                  })();
        }
        alert(typeof address);//undefined
}

test();//jerry,undefined

 

Object类型:

var obj=new Object();
obj.name="tom";
obj.age=23;


var obj={
        name:"rose",
        age:23,
        add:function(a,b){
             return a+b;
        }
};


var obj={};
obj.name="rose";
obj.age=23;

 

Array类型:

var names=new Array();

var names=new Array(20);

var names=new Array("rose","tom");

var names=Array();

var names=Array(20);

var names=Array("tom","jack");

var names=["tom","jack"];

var names=[];

//数组元素的默认值是undefined

 

数组的toString()方法和join()方法:

names.toString();//tom,jack

names.join("-");//tom-jack

 

数组的栈方法:

var names=[];

names.push("jack","tom");//jack,tom
//jack在栈底,tom在栈顶

names.push("rose");//jack,tom,rose
//rose在栈顶

names.pop();//rose被出栈   jack,tom

names.pop();//tom被出栈    jack

 

数组的队列方法:

var names=[];

names.unshift("tom");//tom
//unshift是加入到队列,从队列的前面加入到队列

names.unshift("jack","rose");//jack,rose,tom
//unshift相当于push到栈底,不是push到栈顶了

names.shift();//rose,tom    从队列的前面出队,可以理解把栈底的pop出去
names.shift();//tom

 

数组中的排序:

//反转排序

var nums=[1,10,23,5,15];

nums.reverse();//15,5,23,10,1

//自然排序

nums.sort();//1,10,15,23,5

//根据排序函数
//排序函数规则:如果第一个大,则返回正数,相等,返回0,小,返回负数。
function compare(num1,num2){
     if(num1>num2){
           return 1;
     }else if(num1=num2){
           return 0;
     }else{
           return -1;
     }
}

nums.sort(compare);//1,5,10,15,23

//比较函数可以简写为:
function compare(num1,num2){
     return num1-num2;
}

 

数组中的其他方法:

//concat()方法,实现以当前数组创建一个副本,构造新的数组
var nums=[1,2];

var nums2=nums.concat();//1,2
var nums3=nums.concat(3,4);//1,2,3,4
var nums4=nums.concat([5,6],8);//1,2,3,4,5,6,8


//slice()方法,基于当前数组创建新数组,该方法接受两个参数,分别表示起始位置和结束位置(不包括结束位置元素),如果只给一个,就是从当前位置到最后。
var names=["tom","jack","lily"];

names.slice(1,3);//jack,lily
names.slice(1);//jack,lily
names.slice(-3,-1);//tom,jack    最后一个元素为-1

 

//splice()方法,实现数组元素的删除,插入,替换操作

var names=["tom","jack","rose"];

names.splice(0,2);//从0位置开始的两个元素,删除,rose
names.splice(0,0,"h1","h2");//从0位置开始删除0个,在0位置之前插入h1,h2  h1,h2,rose
names.splice(0,1,"h3");//从0位置删除一个,在0位置之前插入h3  h3,h2,rose 

 

数组的迭代:

var names=["tom","jack","rose"];

for(var i=0;i<names.length;i++){
      alert(names[i]);
}

for(var index in names){
      alert(names[index]);
}

names.forEach(function(item,index,array)){
      alert(item);//元素
      alert(index);//索引
      alert(array);//数组元素集
};

 

时间类型:

//获取当前时间
var now=new Date();
alert(now);


//表示2012年12月21日 12:00:34
var date1=new Date(Date.parse("2012-12-21 12:00:34"));
var date2=new Date("2012-12-21 12:00:34");

 

JS中的正则表达式:

JS 写道
var expression=/正则表达式部分/模式部分;

模式:
g:代表全局模式,应用于所有的字符串
i:表示不区分大小写
m:表示多行模式

 

JavaScript中的面向对象:

 

JavaScript中的对象:

var user={
    name:"tom",
    age:34,
    sayName:function(){
        alert(this.name);
    }
};

user.sayName();//tom

 

创建对象:工厂模式

//工厂模式,就是提供一个方法,方法的作用是用来创建对象。
function createUser(name,age){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.sayName=function(){
        alert(this.name);
    }
    return o;
}

var user=createUser("tom",23);

user.age;//23
user.sayName();//tom

 

创建对象:构造函数模式

//构造函数模式,更像java中的对象
function User(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
         alert(this.name);
    };
}

var user=new User("tom",23);

//创建两个对象就会创建两个sayName()方法,解决方法:把sayName公用;

function User(name,age){
    this.name=name;
    this.age=age;
    this.sayName=sayName;
}
function sayName(){
    alert(this.name);
}

//缺点是,当有多个对象时,会出现大量全局函数

 

 创建对象:原型模式

//原型可以解决存在大量全局函数的问题
//原型不具有构造函数,意思是说不能通过new方法给创建的对象传递属性值

function User(){
}

User.prototype.name="tom";
User.prototype.age=23;
User.prototype.address=["home1","home2"];//属性引用对象类型时会发生共享问题
User.prototype.sayName=function(){
     alert(this.name);
};

var user1=new User();
alert(user1 instanceof User);//true,相当于user1是继承自User类

var user2=new User();

user1.address.push("home3");

//发生了共享问题
user1.address;//home1,home2,home3
user2.address;//home1,home2,home3

 

创建对象:构造函数+原型=混合模式

//混合模式的好处是可以避免属性引用对象类型时发生共享问题的
function User(name,age){
     this.name=name;
     this.age=age;
     this.address=["home1"];
}
User.prototype.sayName=function(){
     alert(this.name);
};

 

创建对象:动态原型模式

//动态原型,意思就是方法的创建的动态的,不存在的话,创建
function User(name,age){
    this.name=name;
    this.age=age;
    this.address=["home1"];

    if(typeof this.sayName!="function"){
        User.prototype.sayName=function(){
             alert(this.name); 
        };
    }
}

 

创建对象实例:

//JavaScript中字符串的拼接是很消耗性能的
function StringBuffer(){
    this.tempArray=new Array();
}
StringBuffer.prototype.append=function(str){
     this.tempArray.push(str);
};
StringBuffer.prototype.toString=function(){
     return this.tempArray.join("");
};

var sb=new StringBuffer();
sb.append("tom");
sb.append(" love rose");

alert(sb);

 

继承

继承:对象冒充模式(多重继承)

function User(name){
    this.name=name;
    this.sayName=function(){
          alert(this.name);
    };
}
function Play(arg){
    this.arg=arg;
    this.play=function(){
          alert(this.arg);
    };
}

//两个类User,Play

function Student(name,age){
     this.temp=User;
     this.temp(name);
     delete this.temp;

     this.p=Play;
     this.p("篮球");
     delete this.p;

     this.age=age;
     this.sayAge=function(){
           alert(this.age);
     };
}

var s=new Student("rose",23);

s.sayName();//rose
s.play();//篮球
s.sayAge();//23

 

继承:call()方法

function show(address,time){
     alert(this.name+"于"+time+"在"+address);
}

var o=new Object();
o.name="tom";

show.call(o,"操场","12:30");

 

//对于对象冒充方式的继承采用call()方法
function Student(name,age){
     User.call(this,name);
     Play.call(this,"足球");

}

var s=new Student("rose",23);

s.sayName();
s.play();

 

继承:apply()方法

function Student(name,age){
     User.apply(this,[name]);
     User.apply(this,["足球"]);
}

var s=new Student("rose",23);
s.sayName();
s.play();

 

继承:原型链方式

function User(){}

User.prototype.name="";
User.prototype.sayName=function(){
     alert(this.name);
};

function Student(){}

//将USER中所有通过prototype设置的属性和方法放到Student中,并覆盖Student中所有的prototype的设置
Student.prototype=new User();

Student.prototype.age=0;
Student.prototype.sayAge=function(){
     alert(this.age);
};

var s=new Student();
s.name="rose";
s.age=23;

s.sayName();
s.sayAge();

alert(s instanceof Student);//true
alert(s instanceof User);//true

//缺点:不支持多重继承,构造函数不能有参数

 

继承:混合模式

function User(name){
     this.name=name;
}
User.prototype.sayName=function(){
     alert(this.name);
};

function Student(name){
     User.call(this,name);
     //User.apply(this,[name]);
}

Student.prototype=new User();

Student.prototype.age=0;
Student.prototype.sayAge=function(){
     alert(this.age);
};

 

window对象:

//调用全局方法
function test(){
     alert("hello"):
}
window.test();

//open()方法,用于弹出窗口
window.open("http://www.baidu.com");

//关闭窗口close();
win.close();

 

未完待续

 

1
4
分享到:
评论
2 楼 China祥 2013-06-09  
zidafone 写道
undefined和null,==相等,===不等

谢谢指正!
1 楼 zidafone 2013-06-09  
undefined和null,==相等,===不等

相关推荐

    JavaScript集合

    JavaScript集合是编程中的一种数据结构,它在JavaScript中主要指的是Array、Map、Set这三种类型。这些集合在处理数据时提供了不同的特性和功能,对于理解和掌握JavaScript编程至关重要。 首先,我们来谈谈数组...

    JavaScript经典案例大集合

    这个压缩包“JavaScript经典案例大集合”显然是为帮助初学者深入理解和掌握JavaScript而设计的。下面,我们将详细探讨这些经典案例可能涉及的知识点,并分享一些学习JavaScript的重要原则和技巧。 1. **变量和数据...

    HTML CSS javaScript 学习Demo集合, 适合0基础入门.zip

    HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 HTML CSS javaScript 学习Demo集合, 适合0基础入门 ...

    javascript网页特效示例集合

    03第3章 实用JavaScript函数 04第4章 日期和时间 05第5章 文字特效 5.1 文字的颜色变换 5.2 改变文字大小 5.3 文字显示效果 5.4 指定文字位置 5.5 文字动态移动 5.6 文字立体效果 5.7 文字动画效果...

    JavaScript 参考手册集合 chm版打包

    这份“JavaScript参考手册集合chm版打包”正是为初学者提供的一份全面学习资源,包含了JavaScript语言的各个重要组成部分。 JavaScript的核心概念包括变量、数据类型、运算符、流程控制(条件语句和循环)、函数、...

    完美javascript日历大集合

    在JavaScript中,创建一个日历组件通常涉及到以下几个关键知识点: 1. **DOM操作**:JavaScript通过DOM(Document Object Model)接口与HTML文档交互,用于创建、查询、修改和删除页面元素。在日历组件中,这可能...

    JavaScript特效超级大集合

    这个"JavaScript特效超级大集合"中的"js特效.txt"文件可能包含了上述部分或全部知识点的代码示例,通过学习和实践这些代码,开发者可以提升JavaScript特效制作能力,为自己的项目增添更多亮点。同时,理解并掌握这些...

    3000 个javascript 代码集合基本覆盖所有方面

    这个3000个JavaScript代码集合涵盖了JavaScript的各个方面,旨在提供一个全面的学习和参考资料库。 一、JavaScript基础 这个集合中可能包括了JavaScript的基础语法,如变量声明(var, let, const)、数据类型(字符...

    基于JavaScript的算法集合

    基于JavaScript的算法集合

    JavaScript特效代码集合

    "JavaScript特效代码集合"这个压缩包显然包含了多种JavaScript实现的特效代码示例,适合开发者学习和参考。 1. **INDEX.HTM** - 这是主索引文件,通常用于展示所有可用特效的目录或者演示页面。在这个文件中,你...

    javascript源码大集合

    code0 项目常用js特效 Code1 (其它javascript源码) Code2 万旭网站工作室 设计发布 Code3 javascript 王者归来 Code4 JavaScript 实例自学手册 Code5 Javascript 高级程序设计 code6 JavaScript源码大全 v1.0

    Javascript技巧大集合时间.htm )

    Javascript技巧大集合时间.htm ) Javascript技巧大集合时间.htm ) Javascript技巧大集合时间.htm )

    javascript校验集合

    在这个名为“javascript校验集合”的资源中,你将找到一系列针对不同类型数据的验证函数,如邮箱、身份证、数字和字母等。这些验证规则可以帮助你构建更健壮的前端应用程序。 首先,我们来看电子邮件验证。在互联网...

    JavaScript_UI片段的集合.zip

    学习和使用这些JavaScript UI片段时,需要注意以下几点: 1. **理解代码逻辑**:每个代码片段都有其特定的实现方式和逻辑,理解它们的工作原理是关键。这有助于在遇到问题时进行调试和修改。 2. **兼容性测试**:...

    javascript常用网页效果整理集合 js效果源码集合

    JavaScript实现的抽奖代码涉及随机数生成、动画效果和结果判定等关键点。开发者可以借此机会了解如何创建动态的抽奖界面,例如旋转的转盘和滚动条显示,同时掌握实现公平随机算法的方法。 此外,JavaScript效果源码...

    使用JavaScript数组模拟Java的Hashtable集合

    因为,JavaScript的数组非常特殊,而且如果你能够理解它,那么对于我们学习JSON对象语法就非常容易理解了--因为JSON就是一个数组--我们也可以把它看成一个Hashtable集合对象!本人认为,理解JavaScript的数组是学习...

    传智播客-冯威 javascript,ajax,jquery课件集合

    在这个"传智播客-冯威 javascript,ajax,jquery课件集合"中,我们可以期待学习到以下一系列关键知识点: 1. **JavaScript基础**:包括变量、数据类型、操作符、流程控制(条件语句和循环)、函数、对象和数组等...

    JavaEE、HTML、CSS、JavaScript开发文档集合.zip

    JavaEE、HTML、CSS、JavaScript开发文档集合 JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发...

    javascript 应用集合

    在这个“JavaScript应用集合”中,我们将会深入探讨JavaScript在实际应用中的多种技术与技巧,尤其是与密码安全性和使用大全相关的知识点。 1. **密码安全性**: - **哈希算法**:在JavaScript中,为了存储或验证...

    JavaScript知识点思维导图

    再者,JavaScript数组是存储多个值的集合,它提供了丰富的内置方法,如`push`、`pop`、`shift`、`unshift`用于操作数组两端,`slice`、`splice`用于截取和修改数组,以及`map`、`filter`、`reduce`等高级方法用于...

Global site tag (gtag.js) - Google Analytics