Javascript高级内容

103 阅读9分钟

这是我参与「第四届青训营 」笔记创作活动的第3天 主要内容为Javascript高级内容

1.函数

函数是定义一次但却可以调用或执行任意多次的一段JS代码。函数有时会有参数,即函数被调用时指定了值的 局部变量。函数常常使用这些参数来计算一个返回值,这个值也成为函数调用表达式的值。

1.1 函数声明

函数声明的概念 函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候 调用执行。ECMAScript中的函数使用function关键字来声明,后跟一组参数以及函数体。 实例:

function box() { //没有参数的函数
alert('只有函数被调用,我才会被之执行');
}  
box(); //直接调用函数
function box(name, age) { //带参数的函数
alert('你的姓名:'+name+',年龄:'+age);
}  
box('Mr.Koo',26); //调用函数,并传参

1.2 return返回值

return返回值 带参和不带参的函数,都没有定义返回值,而是调用后直接执行的。实际上,任何函数都可以通过return语句 跟后面的要返回的值来实现返回值。把函数的返回值赋给一个变量,然后通过变量进行操作。return语句还有一个 功能就是退出当前函数,不再执行之后的语句。 实例:

function box(num1, num2) {    
return num1 * num2;
alert(num1); //return之后这句不再执行
}  
var num = box(10, 5);         //函数得到的返回值赋给变量  
alert(num);

1.3 arguments对象

什么是arguments对象

ECMAScript函数不介意传递进来多少参数,也不会因为参数不统一而错误。函数体内可以通过arguments对 象来接收传递进来的参数。 arguments对象的length属性可以得到参数的数量。

我们可以利用length这个属性,来智能的判断有多少参数,然后把参数进行合理的应用。比如,要实现一个加 法运算,将所有传进来的数字累加,而数字的个数又不确定。 实例:

function box() {    
  var sum = 0;    
  if (arguments.length == 0) return sum;    //如果没有参数,退出    
  for(var i = 0;i < arguments.length; i++) {  //如果有,就累加      
  sum = sum + arguments[i];    
  }    
  return sum;  //返回累加结果 
}
alert(box(3,5,7));

2.对象和数组

对象

对象,其实就是一种类型,即引用类型。而对象的值就是引用类型的实例。在ECMAScript中引用类型是一种 数据结构,用于将数据和功能组织在一起。它也常被称做为类,但ECMAScript中却没有这种东西。虽然 ECMAScript是一门面向对象的语言,却不具备传统面向对象语言所支持的类和接口等基本结构。

2.1 object类型

Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的。创建 Object类型有两种:一种是使用new运算符,一种是字面量表示法。

1.使用new运算符创建Object

var box = new Object();           //new方式  
box.name = 'Mr.Boo';            //创建属性字段  
box.age = 22;

2.使用字面量创建Object

var box = {};                //字面量方式声明空的对象  
box.name = 'Mr.Koo';            //点符号给属性复制  
box.age = 26;

object两种属性输出方式

var box = {};                //字面量方式声明空的对象  
box.name = 'Mr.Koo';            //点符号给属性复制  
box.age = 26;
alert(box.name);              //点表示法输出  
alert(box['age']); 

给对象创建方法

var box = {    
run : function () {            //对象中的方法      
return '爱你lyx!';    
}  
}

2.2 Array类型

除了Object类型之外,Array类型是ECMAScript最常用的类型。而且ECMAScript中的Array类型和其他语言中 的数组有着很大的区别。虽然数组都是有序排列,但ECMAScript中的数组每个元素可以保存任何类型。 ECMAScript中数组的大小也是可以调整的。创建Array类型有两种方式:第一种是new运算符,第二种是字面 量。

1.使用new运算符创建数组

var box = new Array();            //创建了一个数组  
var box = new Array(10);          //创建一个包含10个元素的数组  
var box = new Array('Mr.Koo',26,'teacher','广州');  //创建一个数组并分配好了元素
//以上三种方法,都可以省略new关键字。

2.使用字面量方式创建数组

var box = [];               //创建一个空的数组  
var box = ['Mr.Koo',26,'teacher','广州']; //创建包含元素的数组  
var box = [1,2,];          //禁止这么做,IE会识别3个元素  
var box = [,,,,,];

3.使用索引下标来读取数组的值

var box = ['Mr.Koo',26,'teacher','广州'];   //创建包含元素的数组  
alert(box[2]);                //获取第三个元素  
box[2] = 'student';              //修改第三个元素  
box[4] = '计算机编程';             //增加第五个元素
alert(box);

4.使用length属性获取数组元素量

var box = ['Mr.Koo',26,'teacher','广州'];  //创建包含元素的数组
alert(box.length)           //获取元素个数  
box.length = 10;           //强制元素个数  
box[box.length] = 'JS技术';    //通过length给数组增加一个元素
alert(box);

2.3 对象中的方法

对象中常用的方法:push、concat、 pop、splice、reverse、join。

push方法

该方法会把一个元素或一组元素(数组)添加到当前数组的末尾。

var arr1 = [1, 2, 3];
arr1.push([4, 5]);
//arr1的结果是[1, 2, 3, 4, 5]

concat方法

该方法会把两个数组或元素组合在一起,但是不会改变调用者的结构。

var arr1 = [1, 2, 3];
var arr2 = [4, 5];
var arr3 = arr1.concat(arr2);
//arr1的值:[1, 2, 3];
//arr3的值:[1, 2, 3, 4, 5]

pop方法

该方法作用是删除数组中最后一个元素,并返回删除的元素。

var arr1 = [1, 2, 3];
var val = arr1.pop();
//val的值:3
//arr1的值:[1, 2]

splice方法

该方法能删除指定的元素,或者插入指定的元素,函数原型 splice(index,howmany,element1,.....,elementX),index表示要删除的开始下标, howmany表示要删除的元素个 数,element(可选)从index开始,要插入的元素,该方法的返回值是被删除掉的那部分数组。

var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.splice(0, 2);
alert(arr1);
alert(arr2);
//arr1的值:[3, 4, 5]
//arr2的值:[1, 2]

reverse方法

该方法颠倒数组中元素的顺序。

var arr1 = [1, 2, 3, 4, 5];
arr1.reverse();
//arr1的值:[5,4,3,2,1]

join方法

返回一个字符串,字符串的内容是数组的所有元素,元素之间通过指定的分隔符进行分隔。

var arr1 = [1, 2, 3];
var str = arr1.join("--");
alert(str);
//str的值:1--2--3

3 时间和日期

Javascript如何处理时间和日期? ECMAScript提供了Date类型来处理时间和日期。Date类型内置一系列获取和设置日期时间信息的方法。

3.1 Date类型

JS中的Date类型使用UTC(Coordinated Universal Time,国际协调时间)自1970年1月1日0时开始经过的毫秒数来保存时间。

使用new操作符创建一个日期对象;在调用Date构造函数而不传递参数的情况下,新创建的对象自动获得当前 的日期和时间。

创建特定的日期和时间
var date = new Date(年,月(0~11),日(1-31),时(0~23),分,秒); //年、月为必需,其它可选,默认为0。

3.2 日期、时间方法

getTime(),返回毫秒数,//setTime(),以毫秒设置日期,会改变整个日期。
getFullYear(),返回年份,以4位数表示。//setFullYear(),设置日期的年月,必须以4位数表示。
getMonth(),返回月份,0~11getDate(),返回天数,1~31getDay(),返回星期几,0~6getHours(),返回小时数,0~23getMinutes(),返回分钟数,0~59getSeconds(),返回秒数,0~59getMilliseconds(),返回毫秒数。

4. 正则表达式

4.1 正则表达式介绍

正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式,而 String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数.

正则表达式的作用

正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后,表单就会被发送到服务器,在服 务器端通常会用JAVA、PHP、ASP.NET等服务器脚本对其进行进一步处理。因为客户端验证,可以节约大量的服务 器端的系统资源,并且提供更好的用户体验。

4.2 创建正则表达式

建正则表达式和创建字符串类似,创建正则表达式提供了两种方法,一种是采用new运算符,另一个是采用字 面量方式。

new运算符创建正则表达式

它接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串。

采用字面量方式创建正则表达式

与new运算符方式类似,它也可以看作是接收两个参数:一个是要匹配的字符串模式,另一个是可选的标志字 符串。

4.3 正则表达式方法

常用的正则表达式方法

  1. exec()方法

  2. test()方法

  3. search()方法

  4. match()方法

  5. replace()方法

  6. exec()方法

4.4 常用的正则表达式

1、用户名正则

2、密码强度正则

3、Email正则

4、手机号码正则

5、身份证号正则

6、车牌号正则

5. Function类型

在ECMAScript中,Function(函数)类型实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针。

5.1 函数的声明方式

1.普通的函数声明

2.使用变量初始化函数

5.2 作为值的函数

ECMAScript中的函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样 把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。

5.3 函数内部属性

在函数内部,有两个特殊的对象:arguments和this。arguments是一个类数组对象,包含着传入函数中的所 有参数,主要用途是保存函数参数。但这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。使用arguments.callee来执行自身对于阶乘函数一般要用到递归算法,所以函数内部一定会调用自身;如果函数名不改变是没有问题的,但一旦改变函数名,内部的自身调用需要逐一修改。为了解决这个问题,我们可以使用arguments.callee来代替。

this指的是什么

函数内部另一个特殊对象是this,其行为与Java和C#中的this大致相似。换句话说,this引用的是函数据以执行操作的对象,或者说函数调用语句所处的那个作用域。

注意:当在全局作用域中调用函数时,this对象引用的就是window。