首页 > 编程语言 > 详细

JavaScript引用类型

时间:2017-03-03 01:23:23      阅读:235      评论:0      收藏:0      [点我收藏+]

  引用类型的值(对象)是引用类型的一个实例。在ECMAScript中引用类型是一种数据结构,用于组织数据和功能。与Java、C++等面向对象语言区别:JavaScript没有面向对象的类和接口的基本结构。JavaScript通过引用类型弥补类的缺陷。引用类型通过new来创建实例对象。

一、Object类型

  Object是所有引用类型的基类,都直接或者间接继承Object内置的行为。

创建Object实例有两种方式:

1、通过构造函数创建对象
var
obj=new Object();//通过new 构造函数创建对象
var obj = Object; //可以不使用new创建
2、通过字面量创建对象
var obj={
  name:"hello",
  say:function(){do...}
}

  通过字面量创建对象,代码量少,封装数据,通常可以使用字面量创建。

访问对象属性有两种方式:

1、通过.号访问
console.log(obj.name);//访问
2、通过[]号访问
console.log(obj[name]);

  通过[]号访问对象属性,优点在于[name]的name可以是变量,动态获取属性。

二、Array类型

  ECMAScript的数组与其他语言的数组都是有序的列表,但是ECMASript的数组可以存储任何数据类型(弱类型)。同一数组可以存储不同类型的数据类型,数据的长度是动态增长,以容纳新的数据项。同时数组也是对象,因此可以为其添加属性。

  创建Array对象有两种方式:  

1、通过构造函数创建
var arr = new Array();
var arr1 =new Array(20);//创建长度为20的数组,请数据项为undefined
var arr2 = new Array("test");//长度为1,第一项的值为test

技术分享

2、通过字面量创建
var arr = [];//创建空数组
var arr1 = [1,2];//创建长度为2的数组
var arr2 = ["test1","test2"];//创建长度为2的数组
var arr3 = [1,2,];//不建议使用,不通浏览器解析的长度不一致

数组长度和访问数组元素:数组索引是基于0起始的正整数

var  arr = ["test1","test2"];
console.log(arr.length);//长度为2
//数组通过基于0的索引访问
console.log(arr[0]);
arr[3]="test4";
console.log(arr[3]);//输出test4
arr.length=1;//将长度设置为1,此时arr的值为["test1"],通过控制长度可以删除数据项

 技术分享

数组不会越界,负数的下标也不会出错,都返回undefined。 因为数组也是引用类型,可以为它的实例化对象添加属性。当使用arr[key]=value,如果key为正整数,则为数组的索引,如果key为其他则为数组的属性。

技术分享

技术分享 

var arr=new Array();
arr[-1]="test1";
console.log(arr[-1]);//输出test1

技术分享

通过arr[key]key为正整数,为arr添加属性,arr["test"]="test"等价于arr.test="test" 。

var arr = new Array();
arr["test"]="test";
console.log(arr["test"]);//输出test

技术分享

数组Array.prototype属性:

技术分享

判读数组:

1、instanceof  在只有一个全局环境下能正确判断Array。

var arr =new Array();
if(arr instanceof Array){

}

2、ECMAScrit5定义了isArray()方法解决instanceof不足。

var arr = new Array();
if(Array.isArray(arr)){
}
Array.isArray(arr);//true

 数组转换:

1、toString方法,此方法返回字符串形式,并且每个数据项以,隔开

var arr = ["test1","test2"];
arr.toString();//输出"test1,test2"

2、valueOf方法,此方法返回数组

var arr = ["test1","test2",10];
arr.valueOf();//输出["test1","test2",10]

3、join方法,默认输出以,为分隔符的字符串

var arr= ["test1,test2,10"];
arr.join();//输出以,号隔开的字符串"test1,test2,10"
arr.join(undefined);//
输出以,号隔开的字符串"test1,test2,10"
arr.join("|");//输出以|分割的字符串"test1|test2|10"

 4、数组的栈模式,后入先出。推入push和弹出pop 

var arr= ["test1,test2,10"];
arr.push("test3");//数组末尾追加元素,长度加1
var tmp  = arr.pop();//数组末尾删除元素,并且返回最后一个元素
console.log(tmp);//输出 test3
arr.push("test3",20,30);//追加多个元素

 5、数组的队列模式,先进先出。unshift头部插入和shift头部删除

var arr= ["test1,test2,10"];
arr.unshift("test",20);//数组头部插入两个元素
console.log(arr.toString());//输出"test,20,test1,test2,10"
var tmp = arr.shift();//删除数组头部一个元素,并且返回第一个元素
console.log(tmp);//test

 6、数组排序sort、reverse,默认字符串排序

var arr= [1,2,3,4];
arr.reverse();//[4, 3, 2, 1]输出反序数组
arr.push(11,20);
arr.sort();//[1, 11, 2, 20, 3, 4]并不符合数字输出
//用于排序的回调函数,策略模式
function compara(val1,val2){
    if(val1>val2){
        return -1;  
    }else if(val1<val2){
        return 1;  
    }else{
        return 0;
    }
}
arr.sort(compara);
console.log(arr);//输出[20, 11, 4, 3, 2, 1]反序
console.log(arr.reverse());[1, 2, 3, 4, 11, 20]

7、数组操作:concat与slice,这两个方法均不会对原数组进行改变

  concat方法会基于当前的数组创建一个新的数组。执行步骤为:首先创建一个数组的副本,然后根据传入的参数,在数组末尾追加,最后返回数组副本。参数可以传递普通的字符串和数组。

var arr=[1,2,3,4];
arr.concat();//未传入参数,只是拷贝副本
[1, 2, 3, 4]
arr.concat(5,6);//追加两个元素
[1, 2, 3, 4, 5, 6]
arr.concat(7,[8,9]);//追加一个元素和数组
[1, 2, 3, 4, 7, 8, 9]
arr;//原数组的不变
[1, 2, 3, 4]

技术分享

  slice基于当前数组的一或多项元素创建新的数组。slice可以接受1或2个元素,如果只有一个参数的情况返回以参数为起始位置至数组末尾的新数组,如果2个参数,则返回以第一个参数为起始索引第二个参数为结束(end>arr.length?arr.length:end)的新数组。如果参数为负数,通过arr.length+(-val)来确定位置,此方法可以作为拷贝数组使用,slice()与slice(0)效果一样,拷贝当前数组。

var arr=[1,2,3,4];
arr.slice();
[1, 2, 3, 4]
var arr1 = arr.slice();
[1, 2, 3, 4]
arr1
[1, 2, 3, 4]
arr.slice(0);
[1, 2, 3, 4]
arr.slice(1);
[2, 3, 4]
arr.slice(1,3);
[2, 3]
arr.slice(1,5);//当结束位置超出索引范围,只返回实际的长度
[2, 3, 4]
arr.slice(-2,-1);//起始位置为4-2=2,结束位置为4-1=3
[3]
arr.slice(-2,-3);//如果结束位置大于起始位置则返回[]

 8、splice,数组中最为强大的方法,可以实现数组替换、删除、插入,并返回被截取的数组。

  删除数组元素,通过传入两个参数即可删除数组指定位置和个数的元素,第一个参数为索引位置,第二个参数为长度(0大于)。 

var arr=[1,2,3,4];
arr
[1, 2, 3, 4]
var sub=arr.splice(0,2);//从第0个位置开始截取2个元素,并返回新的数组
sub
[1, 2]
arr
[3, 4]//原数组被截取两个元素

var arr=[1,2,3,4];

  var sub = arr.splice(-3,2);//如果第一个参数为负数,则length-3

  sub
  [2, 3]
  arr
  [1, 4]

   指定位置插入元素,通过传入三个以上参数即可在指定位置插入元素,第一个参数为索引位置,第二个参数为长度(0或undefined),第三及以上为新元素。

var arr=[1,2,3,4];
var insert= arr.splice(2,0,5,6);//在索引为2的位置插入新元素
insert;//返回[]
arr [1, 2, 5, 6, 3, 4]

  指定位置替换元素,通过传入三个以上参数即可在指定位置插入元素,第一个参数为索引位置,第二个参数为长度(>0),第三及以上为新元素。

var arr=[1,2,3,4];
var change = arr.splice(2,2,7,8);//替换两个元素并且返回截取的数组
change;
[3, 4]
arr
[1, 2, 7, 8]

 9、查找元素位置:indexOf()和lastIndexOf()。两个方法接收两个参数,第一个为查找的项,第二个为起始位置。indexOf从头到尾查找,lastIndexOf相反。返回值返为匹配到位置,如果是-1表示未能查询到。

var arr= ["test1","test2",10];
arr;
["test1", "test2", 10]
arr.indexOf("test2");
1
arr.indexOf("10",1);
-1
arr.indexOf(10,1);
2
arr.lastIndexOf(10);
2
arr.lastIndexOf("test1");
0
arr.lastIndexOf("test1",1);
0
arr.lastIndexOf(10,1);
-1

10、数组迭代

  ECMAScript新增5个迭代方法:每个方法接收两个参数,第一个参数为当前项要运行的function,第二个参数为运行function的作用域影响this的值。function传入参数:数据项、数据项的索引位置、数组对象本身。function(item,index,arr){do...}

  every():给定数组每一项运行function,如果该函数对每一项都返回true,则返回值为true,否则相反。

  filter():给定数组每一项运行function,如果该函数会返回true,则返回为true项组成的数组。

  forEach():给定数组每一项运行function,没有返回值。与for迭代数组用法一致。

  map():给定数组每一项运行function,返回每次函数调用的结果组成的数组。

  some():给定运行数组每一项运行function,如果该函数对任一项返回true,则返回值为true,否则相反。与every相反。

every:

var arr=[1,2,3,4];
var result = arr.every(function(item,index,arr){return item>3});
result;//并非每一项都大于3,所以返回值为false
false
arr;//原数组未发生变化
[1, 2, 3, 4]
filter:

var arr=[1,2,3,4];
var filter = arr.filter(function(item,index,arr){return item>2});
filter;//返回符合大于2的数组
[3, 4]
arr;//原数组未发生变化
[1, 2, 3, 4]
map:

var arr=[1,2,3,4];
var map = arr.map(function(item,index,arr){return item+3;});
map;//每项执行结果组成的数组
[4, 5, 6, 7]
arr;//原数组未发生变化
[1, 2, 3, 4]
some:

var
arr=[1,2,3,4]; var some = arr.some(function(item,index,arr){return item>2}); some;//执行结果只有任一项为true,则返回true true arr;//原数组未发生变化 [1, 2, 3, 4]

 11、缩小方法:reduce和reduceRight。两个行数都接收两个参数,第一个为每项执行的行数,第二个参数为缩小的初始值。function接收4个参数:前一个值、当前值、项的索引和数组。前一个值即前一次执行function结果。reduce从头往后执行,reduceRight相反。  

var arr=[1,2,3,4];
var reduce=arr.reduce(function(per,cur,item,arr){return per+cur});
reduce;//将前次计算结果和本次相加返回最终的结果
10
arr;//原数组未发生变化
[1, 2, 3, 4]
var reduce=arr.reduce(function(per,cur,item,arr){return per+cur},20);//20为基础值,结果为30=20+10

12、数组填充:fill方法可以作为初始化数组使用,方法接收3个参数,第一个为填充的属性,第二个为起始位置,第三个为结束位置。也可以作为数据替换使用。

var arr = Array(20);
arr;
[undefined × 20]
arr.fill(10,0,5);//填充10到0-5索引的元素
[10, 10, 10, 10, 10, undefined × 15]
arr;
[10, 10, 10, 10, 10, undefined × 15]
arr.fill(20,5,20);//填充5-20
[10, 10, 10, 10, 10, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
arr;
[10, 10, 10, 10, 10, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20]

13、数组包含元素:include判断数组是否包含某项,返回true或者false.

arr;
[10, 10, 10, 10, 10, 30, 30, 30, 30, 30, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20]
arr.push("test");
21
arr.includes("test");
true
arr.includes("111");//数组元素不存在"111"
false

  数组总结:

  1、Array为列表数据结构,同时也是引用类型,可以通过arr[key]="value"和arr.key=value添加属性,key为符号变量的命名,且不为正整数。

      2、jion、toString、toLocalString输出字符串。

  3、执行方法会改变原数组:push、pop、shift、unshift、splice、fill、sort、reverse

  4、通过改变数组长度,可以改变数组内容

 

三、Date类型

四、RegExp类型

五、Function类型

六、基本包装类型

七、单体内置对象

JavaScript引用类型

原文:http://www.cnblogs.com/migrantworkers/p/6473395.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!