js中的函数

4.5 函数

函数就是用来执行任务的代码块，函数需要通过调用的方式来完成代码的执行，函数的最大好处：包含在函数内容的代码块，可以重复执行。

 

JS中的函数，大家把它想象成JAVA中方法即可理解，函数的作用：将完成任务的代码块"封装”起来，供其他调用方无限制的使用。

 

4.5.1 函数的分类

如果按照参数的个数来分：无参函数、有参函数
如果按照返回值来分：有返回值函数、无返回值函数
如果按照编写函数的对象来分：预定义函数（系统函数）和自定义函数

 

4.5.2 函数的优点

1、代码灵活度高，通过传递不同的参数，可以取得不同的效果。

2、代码的复用性强，函数一旦定义，任何地方都可以调用，而不需要再次编写。

3、JS中的函数可以响应网页的事件，JS中的事件驱动模型就是通过网页事件结合JS函数来做到的。

 

4.5.3 定义函数

JS中定义函数，需要使用到关键字function，形参不用写类型，在JS中定义函数常见的方式有2种：

1、匿名函数(不指定函数名)

在函数定义的时候不指定函数名的函数，它的定义非常的简单，只需要使用关键字function，和可选参数，再加上函数体即可

 

语法：

function([可选参数1],[可选参数2], ... ...){

//函数体代码

}

 

匿名函数使用场景:

    口把函数赋值给变量

如：

var sayHello = function(){

document.write(“say hello”);

}

调用:

sayHello();

 

    口网页事件直接调用函数

如：

windows.onload = function(){

document.write(“say hello”);

}

 

当然，未来我们程序员使用这种匿名函数的方式，相对较少。因为它有一个最明显的缺陷：不能复用

 

    口动态给“构造器创建的对象的抽象”添加属性和方法时使用，你把它理解为java里面的类。

比如：我们自己创建了一个对象的抽象Student，我们现在可以动态的为它添加属性和方法

//创建Student，相当与Java中的类
function Student(){
    this.name = "张三";
}
//动态添加属性
Student.prototype.age = 15;
//动态添加方法
Student.prototype.introduce = function () {
    alert(this.name+" "+this.age);
}
//创建Student对象
var stu = new Student();
stu.introduce();//调用动态添加的introduce()方法

 

 

2、具有函数名的函数

有函数名的函数，是我们在JS中使用最为广泛的一种

语法;

function 函数名称([可选参数1],[可选参数2], ... ...){

//函数体代码

 

[return 返回值];

}

[ ]里面的内容可省略

 

说明：

1）function是关键字，主要的作用定义函数
2）函数名在同一篇JS文件中，必须是唯一的，要通俗易懂，见名知意

3）参数选项为可选选项，函数定义好之后，我们可以采用无参方式，也能正常调用有参函数

4）如果函数没有使用return返回内容，但是你依旧想得到函数的返回值，那么你得到的值，只能是undefined

 

4.5.4 函数的调用

4.5.4.1直接调用

直接调用的方式，一般比较适合没有返回值的函数

直接调用的语法：
函数名称([参数1,参数2......]);

 

如：

function writeNumber(a,b){
    document.write(a+b);
}

调用：

writeNumber(4,5);

 

4.5.4.2在表达式中调用

表达式中调用，一股比较适合具有返回值的函数，因为函数的返回值可以继续参与表达式的计算，还可以结合alert , document等语句进行输出。

如：

if(2000==year(2000)){
    document.write("现在是2000年");
}

year(years)函数是自定义的一个函数，直接将years的值进行返回

 

4.5.4.3在事件中调用

JS是一个基于事件驱动架构模式下的脚本语言，页面在加载，用户的点击、双击，鼠标的移动都会产生事件，当事件产生时，如果需要完成某项特殊的任务时，我们就可以调用对应的函数来响应该事件。

 

例如：

<script type="text/javascript">
    function sayHello(){
        document.write("hello");
    }
</script>

事件调用：

<input type="button" οnclick="sayHello()">

 

4.5.4.4其他函数调用

函数中调用其它函数

 

4.5.5 预定义函数

JS中除了自定义函数之外，系统还内置了非常多的常用函数。这些函数在JS中直接可以调用

 

4.5.5.1 eval(String)

该系统函数，参数是String字符串类型的数据，主要作用：计算某一个字符串

注意：参数必须是String类型，否则该方法将不会有任何返回

 

4.5.5.2 paseInt(String,[进制参数])

该系统函数的参数1类型，依旧是String字符串类型的数据；第二个参数，是指2-36间的进制描述，主要描述第一个参数是什么进制下的数据。

 

作用：将字符串转换为数值

 

例如：

parseInt("11",16);

指定字符串里面的内容为16进制，返回得到十进制的17

 

4.5.5.3 isfinite(参数)

该系统函数可以判断某一个函数的返回是否是无穷大，如果参数的值是一个有限的number数值，那么结果返回为true，否则为false (Nan，正无穷大的数,负无穷大的数)

 

例如：

a=5;
b=5;
alert(isFinite(a+b));

返回值等于true，说明不是无穷大

 

4.5.5.4 isNaN(参数)

该函数参数没限制，主要作用用来检查参数是否是一个数值，不是数值返回true，是数值返回false。

 

例如：

function myFunction(a,b){
    if(!isNaN(a) && !isNaN(b)){
        alert(a+b);
    }else{
        alert("参数输入错误，不是数值");
    }
}

 

4.5.5.5 Number(参数)

该函数参数依旧没有限制，主要功能将参数转换为数字。如果参数是Date对象，那么该函数返回将是1970-1-1 00:00:00到现在时间的毫秒值。如果参数的值，不能转换为数值，那么该函数将返回NaN。

 

4.5.5.6 paseFloat(String)

这个函数将字符串转换为数值，如果字符串在开始的时候不是数值，那么返回NaN；如果数值后面跟一些字符串字符，那么后面的字符串字符部分将被直接截断丢弃。

 

如：

parseFloat("3.141592652adsadsdaad");

得到结果：3.141592652

 

parseFloat("as3.141592652adsadsdaad");

得到结果：NaN

 

4.5.5.7 encodeURI(String)和decodeURI(String)

encodeURI(参数)，该函数的参数为String类型的数据，主要作用：将字符串作为URI进行编码

浏览器中默认针对URI是采用unicode编码方式进行编码，我们借助它的这个特点，可以将我们自己的某些中文，或者其他文字也按照unicode编码方式进行编码，从而保证中文或者东方文字不乱码。

 

例如：

function myFunction(){
    //加码
    strings = encodeURI("你好啊");
    document.write(strings);
    //解码
    strings2 = decodeURI(strings);
    document.write(strings2);
}

显示效果：

%E4%BD%A0%E5%A5%BD%E5%95%8A你好啊

前面是转码后的一串字符，后面是解码后显示的中文

 

加码和解码的过程，非常类似于密码的加密和解密，只不过它的目的在于保障东放文字不乱码。

 

4.5.5.8 encodeURIComponent(String)和decodeURIComponent(String)

这两个和上述的两个函数，作用几乎一样。区别在于encodeURI)和decodeURI()采用 unicode编码方式进行编码与解码；而encodeURIComponent ()和 decodeURIComponent()采用的UTF-8的编码方式进行编码和解码.

 

例如：

function myFunction(){
    //加码
    strings = encodeURIComponent("你好啊");
    document.write(strings);
    //解码
    strings2 = decodeURIComponent(strings);
    document.write(strings2);
}

 

4.5.5.9字符串相关

function myFunction(){
    str = "你好啊ps WEASsssss";
    alert(str.toLowerCase());//大写转小写

   

alert(str.toUpperCase());//小写转大写

    alert(str.substr(0,1));//返回下标包含的字符串内容，包前不包后

    alert(str.length);//返回字符串的长度

    alert(str.split(" "));//以给定的字符串进行分割，返回一组数组，数组里面包含了分割后的字符串，通过数组的下标去获取

    alert(str.indexOf("好"));//获得字符串中某个字符的下标

    str = str.replace("你好啊","世界杯");//字符串替换，返回替换后的字符串
    alert(str);

}

 

 

4.5.5.10 数组相关

方法	描述	实例
concat()	连接两个或更多的数组，并返回结果。	var a = [1,2,3]; document.write(a.concat(4,5));
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。	var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join())
pop()	删除并返回数组的最后一个元素	var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.pop())
push()	向数组的末尾添加一个或更多元素，并返回新的长度。	var arr = new Array() arr.push("James")
reverse()	颠倒数组中元素的顺序。	var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.reverse())
shift()	删除并返回数组的第一个元素	var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.shift())
slice()	从某个已有的数组返回选定的元素	var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.slice(1,2))
sort()	对数组的元素进行排序	var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr.sort()
splice()	删除元素，并向数组添加新元素。	参见w3cshool
toSource()	返回该对象的源代码。	参见w3cshool
toString()	把数组转换为字符串，并返回结果。	参见w3cshool
toLocaleString()	把数组转换为本地数组，并返回结果。	参见w3cshool
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	参见w3cshool
valueOf()	返回数组对象的原始值	参见w3cshool