js005-引用类型

js005-引用类型

数据类型分为基本类型和引用类型:基本类型值如下:Undefined、Null、Bollean、Number、String

本章内容:

1、使用对象

2、创建并操作数组

3、理解基本的javaScript类型

4、使用基本类型和基本操作类型

引用类型的值(对象)是引用类型的一个实例。引用类型是一种数据结构,和类看起来很相似。

引用类型如下:

5.1 Object类型

创建Object实例有两种方式:

1、 new

2、对象字面量

var obj1 = new Object();

obj1.name = "meimei";

var person{

name : "meimei";

age : 18;

}

var person = {}

person.name = "meimei";

person.age = 18;

5.2 Array 类型

这是除了Object之外最常用的类型。

创建数组的方式有两种:

1、使用Array构造函数

var colors = new Array();

var colors = new Array(20);//数组长度为20

var colors = new Array(“gread”);

//省略new操作符

var colors = new Array(3);

var name = Array("gread");

2、使用数组字面量表示方法

var colors = ["red", "blue", "yellow"];   //创建一个包换3个字符串的数组

var names = [];               //创建一个空数组

var values = [1,2,];           //别这样做,这样会创建一个2或者3项的数组。

var options = [,,,,];         //别这样,这样会创建一个5或者6项的数组

var colors = ["red", "blue", "yellow"];

alert(colors[0]);           //显示第一项

colors[2] = "black";        //修改第三项

colors[3] = "green";        //新增第四项

5.2.1 检测数组

Instanceof

5.2.2 转换方法

var colors = ["red", "blue", "yellow"]; //创建一个包含三个字符串的数组

alert(colors.toString());       //red,blue,green

alert(colors.valueOf());        //red,blue,green

alert(colors);                //red,blue,green

5.2.3 栈方法

LIFO的数据结构

var colors = new Array();

var account = colors.push("red", "black");

alert(account);   //2

account = colors.push("yellow", "pink");

alert(account);   //4

var item = colors.pop();

alert(item);   //pink

5.2.4        队列方法

FIFO数据结构

var colors = new Array();

var account = colors.push("red", "black");

alert(account);   //2

account = colors.push("yellow", "pink");

alert(account);   //4

var item = colors.shift();

alert(item);   //red

alert(colors.length);

5.2.5        重排序方法

var values = [1,2,3,4,5];

values.reverse();

alert(values);

反转数组项的顺序

var values = [1,20,10,36,5];

values.sort();

alert(values);   //1,10,20,36,5

sort()方法是进行升序排序。是进行字符串比较。会先调用toString()方法。一般不是最佳的方法。一般sort()方法接收一个比较函数作为参数比较好。

5.2.6        操作方法

var colors = ["red", "green", "blue"];

var colors2 = colors.concat("yellow" , ["red", "green", "blue"]);

alert(colors);  //red,green,blue

alert(colors2);  //red,green,blue,yellow red,green,blue

concat()方法

var colors = ["red", "green", "blue"];

var colors2 = colors.slice(1);

var colors3 = colors.slice(1,2);

alert(colors2);  //green,blue

alert(colors3);  //green

slice()

传入1,表示从数组下标为1的开始;

传入1,2表示从1开始到2结束

删除

可以删除任意数量的项,指定两个参数:要删除的第一项的位置和要删除的项数。如:splice(0, 2);  表示删除前两项

插入

可以向指定位置插入任意数量的项,提供三个属性:起始位置,0(要删除的项),要插入的项。如:splice(2, 0, “green” , “red”);

替换

可以向指定位置插入任意数量的项,同时删除任意数量的项。提供三个属性:起始位置,要删除的项,要插入的项。如:splice(2,2, “green” , “red”);在第二个位置(包括该项),删除两项后,插入green和red。

5.2.7        位置方法

两种位置方法

indexOf()

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

alert(numbers.indexOf(4));    //3

alert(numbers.lastIndexOf(4));    //5

alert(numbers.indexOf(4, 4));    //5

alert(numbers.lastIndexOf(4, 4));    //3

var person = {name :"meimei"};

var people = [{name :"meimei"}];

var morePeople = [person];

alert(people.indexOf(person));    //-1

alert(morePeople.indexOf(person))    //0

lastIndexOf()

5.2.8        迭代方法

以下是五个迭代方法

every()

对数组中的每一项运行给定函数,如果该函数每一项都返回true则返回true

filter()

对数组中的每一项运行给定函数,返回函数会返回true的项组成的数组

forEach()

对数组中的每一项运行给定函数,没有返回值

map()

对数组中的每一项运行给定函数,返回函数每次调用的结果组成的数组

some()

对数组中的每一项运行给定函数,如果该函数对任意一项返true,则返回true

5.2.9         归并方法

reduce()    reduceRight() 两种方法。相同点:

都会迭代数组的所有项,然后构建一个最终返回的值。都接收两个参数:一个在每一项上调用过得函数和(可选)作为归并基础的初始值。传给这两个函数接收的4个参数:前一个值、当前值、项的索引和数组对象。函数返回的任何值都会被作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项;

不同点:

reduce()

从第一项开始,逐个遍历到最后

reduceRight()

从最后一项开始,逐个遍历到最前面

5.3 Date类型

创建一个日期对象,使用new操作符和Date构造函数

如下:

var now = new Date();   UTC时间1970年1月1日午夜0点

Date.parse()

使用+操作符取得Date对象的时间戳

var start = +new Date();

//调用函数

dosomething();

//取得停止时间

var stop = +new Date();

result = stop - start;

5.3.1 继承方法

5.3.2 日期格式化方法

toDateString()

以特定于实现的格式显示星期几、月、日、年

toTimeString()

以特定于实现的格式显示时、分、秒、时区

toLocaleDateString()

以特定于地区的格式显示星期几、月、日、年

toTimeeDateString()

以特定于实现的格式显示时、分、秒

toUTCString()

以特定于实现的格式完整的UTC日期

5.3.3 日期/时间组件方法

未完成

方法

说明

5.4 RegExp类型

ECMAScript通过RegExp类型来支持正则表达式

var expression = / pattern /flags;

其中pattern部分可以是任何简单或者复杂的正则表达式,可以包含字符类、限定类、分组向前查找以及方向引用。每个正则表达式可以带一个或者多个标志,用于

g

表示全局(global)模式,即模式将被英语与所有字符串,而非在发现第一个匹配项时立即停止;

i

表示不区分大小写(case-insensitive)

m

表示多行(multiline)模式

表明正则表达式的行为。正则表达式的匹配模式支持下列3个标志:

5.4.1 RegExp实例属性

RegExp的每个实例都具有下列属性:

global

布尔值,表示是否设置了g标志

ignoreCase

布尔值,表示是否i标志

lastIndex

整数,表示开始搜索下一个匹配项的字符位置,从0算起

multiline

布尔值,表示是否设置了m标志

source

正则表达式的字符串表示,按照字面量的形式而非传入构造函数的字符串欧式返回。

5.4.2 RegExp实例方法

RegExp对象的主要方法是exec(),该方法专门为捕获组而设计,接受一个参数

var text = "mom and dad and baby";

var patttern = /mom(and dad(and baby)?)?/gi;

var matches = patttern.exce(text);

alert(matches.index);  //0

alert(matches.input);  //"mom and dad and baby"

alert(matches[0]);     //"mom and dad and baby"

alert(matches[1]);     //"and dad and baby"

alert(matches[2]);     //"and baby"

5.4.3 RegExp构造函数属性

RegExp构造函数包含一些属性,这些属性适用于作用域中的所有正则表达式,并且基于所执行的最近一次正则表达式操作而变化。

下表为RegExp构造函数的属性

长属性名

短属性名

说明

input

$_

最近一次要匹配的字符串。Opera为实现此属性

lastMatch

$&

醉经一次的匹配项,Opera未实现此属性

lastParen

$+

最近一次匹配的捕获组。Opera未实现此属性

leftContext

$’

input字符串中的lastMatch之前的文本

multiline

$*

布尔值,表示是否所有表达式都是使用多行模式。IE和Opera未实现此属性

rightContext

$’

Input字符串中的lastMatch之后的文本

5.4.4 模式的局限性

ECMAScript正则表达式不支持的特性

匹配字符串开始和结尾的\A  和\Z 锚

向后查找(lookbehind)

并集和交集类

原子组

Unicode支持(单个字符除外)

命名的捕获组

s (single 单行)和x(free-spacing 无间隔)匹配模式

条件匹配

正则表达式注释

5.5 Function类型

函数实际上是对象。

函数通常是使用函数声明语法定义的,如下:

function add(num1 , num2){

var sum = num1 + num2;

return sum;

}

5.5.1 没有重载 (深入理解)

function addSomeNunber(num){

return num + 100;

}

function addSomeNunber(num){

return num + 200;

}

var result = addSomeNunber(100);  //300

var addSomeNunber = function(num){

return num + 100;

}

var addSomeNunber = function(num){

return num + 200;

}

var result = addSomeNunber(100);  //300

这两个例子声明了两个同名函数,结果是后面的函数覆盖了前面的函数。

5.5.2 函数声明和函数表达式

alert(sum(10,10));

function sum(num1,num2){

return num1 + num2;

}

alert(sum(10,10));

var sum = function(num1,num2){

return num1 + num2;

};

5.5.3 作为值的函数

函数名本身就是变量,所以函数也可以作为值来使用。就是可以把函数名像参数一样传给另一个参数

5.5.4函数内部属性

在函数内部有两个特殊对象:arguments和this。

arguments主要用途是保存函数参数,但是这个对象有个属性是callee,该属性是一个指针,指向拥有这个arguments对象的函数

function factorial(num){

if (num <= 1) {

return 1;

}else {

return num * factorial(num - 1);

}

}

如果函数名不变的话,这个方法是正确的。但是问题是这个函数的执行与函数名factorial紧密耦合在一起,未消除这种现象可以使用一下arguments.callee。

function factorial(num){

if (num <= 1) {

return 1;

}else {

       return num * arguments.callee(num - 1);

}

}

在重写的函数体内没有引用函数名factorial,这样无论函数名使用什么样的名字,都可以保证正常完成递归调用

5.5.4 函数属性和方法

每个函数都包含两个属性:length和prototype。其中length蛇形表示函数希望接收的命名参数的个数,如下例子

function sayName(name){

alert(name);

}

function sum(num1 , num2){

return num1 + num2;

}

function sayHi(){

alert("hi");

}

alert(sayName.length); //1

alert(sum.length);     //2

alert(sayHi.length);   //0

在传点自定义引用类型中,prototype属性是不可枚举的,因此for-in无法发现。

每个函数都包含两个非继承而来的方法:apply()和call(),这两个方法的用都是在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。

call()

apply()

用法和apply()相同。区别在于接收参数的方式不同:第一个参数:this,其余参数都是直接传递给函数。在使用call()方法时,传递给函数的参数必须逐个例举出来。

首先apply()方法接收两个参数,一:在其中运行函数的作用域,二:参数数组。其中第二个参数可以是Array的实例

function sum(num1 , num2){

return = num1 + num2;

}

function callsum1(num1 , num2){

return sum.call(this, num1 , num2);

}

alert(callsum(10, 10));  //20

function sum(num1 , num2){

return = num1 + num2;

}

function callsum1(num1 , num2){

return sum.appply(this, arguments);

//传入arguments对象

}

function callsum2(num1 , num2){

return sum.appply(this, [num1 , num2]);

//传入数组

}

alert(callsum1(10, 10));  //20

alert(callsum2(10, 10));   //20

apply()和call()方法最大的用处是:扩充函数赖以运行的作用域

window.color = "red";

var o = {color: "blue";}

function sayColor(){

alert(this.color);

}

sayColor();  //red

sayColor.call(this);  //red

sayColor.call(window);  //red

sayColor.call(o);  //blue

对this.color求值会转换为对windows.color求值

call()和apply()来扩中作用域最大的好处是:对象不需要与任何方法有任何耦合关系

bind()方法。该方法会创建一个函数的实例,其this值会绑定到传给bind()函数的值。

window.color = "red";

var o = {color: "blue";}

function sayColor(){

alert(this.color);

}

var objectSaycolor = sayColor.bind(o);

objectSaycolor();  //blue

objectSaycolor的this值是o;所以就算是全局作用域调用这个函数,也会返回blue。

5.6 基本包装类型

为了便于操作基本类型值,ECMAScript提供了3个特殊引用类型:Boolean、Number、String。这些类型与本章其他引用类型相似,同时具有与各自的基本类型相应的特殊行为。每读取一个基本类型值的时候,后台会创建一个队形的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。

var s1 = "some text";

var s2 = s1.substring(2);

当第二行代码访问s1时,后台会进行如下操作:

1、创建String类型的一个实例;

2、在实力上调用指定的方法;

3、销毁这个实例

其过程如下代码:

var s1 = new String("some text");

var s2 = s1.substring(2);

s1 = null;

以上三个步骤也适用于Boolean和Number类型对应的布尔值和数字值。

引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。这意味着我们不能在运行时为基本类型添加属性和方法。

var s1 = "some text";

s1.color = "red";

alert(s1.color);   //undefined

不能在运行时为基本类型添加属性和方法

alert时color属性不见了,因为它在第二行执行完后就被瞬间销毁了。

5.6.1 Boolean类型

Boolean类型是与布尔值对应的引用类型。要创建Boolean对象,可以调用Boolean构造函数并传入true或者false值。

var BooleanObject = new Boolean(true);

Boolean类型的实例唱戏饿了valueOf()方法,返回基本类型值true或者false,重写了toString()方法返回字符串”true”或”false”

布尔表达式中的所有对象都会转换为true

var falseObject = new boolean(false);

var result = falseObject && true;

alert(result);  //true

var falseValue = false;

result = falseValue && true;

alert(result);  //false

布尔表达式中的所有对此昂都会被转为true,所以falseObject对象在布尔表达式值代表的是true。true && true为true

基本类型的布尔值

理解基本类型的布尔值与Boolean对象之间的区别非常重要,建议是永远不要用Boolean对象。

5.6.2 Number类型

Number是数字值对应的引用类型。要创建Number对象,可以调用Number构造函数是向其中传递相应的数值

var numberObject = new Number(10);

Number类型也重写了valueOf() 、tolocaleString()和toString()方法,重写valueOf()方法返回队形表示的基本类型的数值,另外两个方法则返回字符串形式的数值。

var num = 10;

alert(num.toString());  //10

alert(num.toString(2)); //10110

alert(num.toString(8));  //12

alert(num.toString(10));  //10

alert(num.toString(16));  //a

可以为toString()方法传递一个表示基数的参数,告诉它返回基金之数值的字符串形式

var num = 10;

alert(num.toFixed(2));   //"10.00"

toFixed() 方法会根据指定的小树为返回数值的字符串表示

可以表示带0~20位小数位的数值

5.6.3 String类型

String类型是字符串的对象包装类型,可用String构造函数来创建。

var stringObject = new String("hello word");

String类型的每一个实例都有一个length属性,表示字符串包含多个字符

String类型提供了很多方法,用于辅助完成对ECMAScript中字符串的解析和操作。

字符方法

用于访问字符串中特定字符的方法:charAt()和charCodeAt()。这两个方法都接收一个参数,即基于0的字符位置

var stringValue = “hello word”;

alert(stringVale.charAt(1));  //”e”

alert(stringValue.cahrCodeAt(1)); //"101"

字符串操作方法

var stringObject = new String("hello");

var stringValue = “hello word”;

var result = stringValue.concat("word");

alert(result);  //"hello word"

alert(stringValue);  //"hello"

字符串位置方法

var stringValue = "hello word";

alert(stringValue.indexOf("o"));  //4

alert(stringValue.lastIndexOf("o"));  //7

trim()方法

该方法会创建一个字符串的副本,珊瑚前置及后缀的所有空格,然后返回结果

字符串大小写转换方法

四个方法:

toLowerCase()

toLocaleLowerCase()

toUpperCase()

toLocaleUpperCase()

字符串模式匹配方法

localeCompare()方法

比较两个字符串,并返回下列值中的一个:

1、如果字符串在字母中应该排在字符串参数之前,返回一个负数(一般为-1)

2、如果字符串等于字符串参数 ,返回0

3、如果字符串在字母表中应该排在字符串参数之后,返回一个整数(一般为1)

fromCharCode()方法

String构造函数本身的一个静态方法,任务是接收一个或者多个的字符编码,然后将他们转换为一个字符串,这个方法与charCodeAt()执行的是相反的操作。

HTML方法

添加了一些拓展标准,但是基本不要用

5.7 单体内置对象

ECMAScript对单体内置对象的定义:由ECMAScript实现提供的、不依赖与宿主环境的对象,在ECMAScript程序执行之前就已经存在了。它们是已经实例化过了的。

5.7.1 Global对象

Global对象(全局对象)是ECMAScript中最特别的一个对象,因为你从哪个角度看,这个对象都是不存在的。Global对象还包含一些其他方法:

URI编码方法

Global对象的encodeURI()和encodeURICompare()方法可以对URI进行编码,以便发给浏览器。encodeURI()主要用于整个URI, encodeURICompare()主要用于URI中的某一段

eval()方法

eval()方法像是一个完整的ECMAScript解析器,它只接受一个参数。

Global对象的属性

P133(未完成)等待拍照上传

window对象

5.7.2  Math对象

Math对象的属性  (未完成)等待拍照上传P134

属性

说明

min()和 max()方法

确定一组数值中的最小值和最大值,可以接收任意个参数

random()方法

Math.random()返回一个0~1之间的随机数

返回1~10之间随机数

var num = Math.floor(Math.random() * 10 + 1);

返回2~10之间随机数

var num = Math.floor(Math.random() * 9 + 2);

其他方法

版权声明:此文原创作者:http://www.cnblogs.com/lal-fighting/  未经作者同意,不得私自转载。

上一篇:JWT-Token验证,以及SpringSecurity


下一篇:工作随笔:解析Authorization内容