Array数组类型

1、Array类型是我们日常开发中非常常用的数据类型。创建一个数组的方式非常简单:

var arr = [1,'name',true,null,undefined,{},[]];

这是以字面量,也是最常用的创建数组的形式,其中可以包含任何类型的数据。访问其中的某项,可通过索引:

arr[0] //1

索引值从0开始计算,即0代表数组中的第一项,1代表第二项,以此类推。

2、length属性

数组包含一个不可遍历的length属性,反映数组的长度。

var arr = [1,2,3,4];
arr.length //4 数组中有4个项

3、数组的检测方法

3.1 instanceof操作符用来检测左侧的对象是否为右侧的构造函数的实例。若构造函数的原型出现在实例对象的原型链中,结果返回true,否则返回false。

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

arr instanceof Array //true

3.2 isArray方法

instanceof操作符在某种情况下会出现问题,就是在一个网页中包含多个框架的情况下,如果将框架1中的数组传入到框架2中,在跨越环境的情况下使用instanceof符进行检测就会返回false,因为虽然被检测的对象确实是数组类型,但这个数组是框架1中的Array构造函数的实例,而不属于框架2中的Array构造函数,为了解决这个问题,es5新增了isArray方法,该方法用于检测一个值是否为数组,而不受环境的影响。

Array.isArray(arr);

4、转换方法

数组的toLocaleString、toString、valueOf方法继承自Object原型对象,这个三个方法都会返回由数组中的每个项拼接成的以逗号分隔的字符串。

var arr = [1,2,3,4];
arr.toString() //'1,2,3,4'
arr.toLocaleString() //'1,2,3,4'
arr.valueOf() //'1,2,3,4'

5、join方法

数组的join方法的功能类似于toLocaleString、toString、valueOf方法,可以将数组转换为字符串的形式,不同的是,join能够接受一个参数,用来指定分隔每个项的字符,其余三个方法均以逗号分隔。

var arr = [1,2,3,4];
arr.join('-');  //'1-2-3-4'

若传入空字符串,可实现合并字符的功能:

var arr = [1,2,3,4];
arr.join('');  //'1234'

6、栈方法

6.1 push方法 用于向数组末尾添加项目,并返回数组新的长度

var arr = [1,2,3,4];
arr.push(5); //[1,2,3,4,5]

6.2 pop方法 用于移除数组的最后一项,并返回该项

var arr = [1,2,3,4];
arr.prop(); //[1,2,3,4]

6.3 shift方法 用于移除数组中的头一项,并返回该项

var arr = [1,2,3,4];
arr.shift(); //[2,3,4]

6.4 unshift方法 用于向数组首部添加项目,并返回数组新的长度

var arr = [1,2,3,4];
arr.unshift(0); //[0,1,2,3,4]

7、排序方法

7.1 reverse方法 用于将数组项原有的顺序进行反转,并返回转换后的数组

var arr = [1,2,3,4];
arr.reverse() //[4,3,2,1]

7.2 sort方法 可用于实现数组的升序或降序排列方式,默认情况下,sort采用从小到大的升序排列方式:

var arr = [2,1,4,3];
arr.sort(); // [1, 2, 3, 4]

srot方法会对每个项调用toString方法,比较字符串形式化的值,以此来确定如何排序,任何类型的值都是如此,在对字符串之间进行比较的时候,只会比较两者中的首字符。

var arr = [2,11];
arr.sort(); //[11,2]

之所以会有这样的结果,是因为sort方法比较的不是2与11,而是2与11中的首字符1,1小于2,于是11被排到2的前面。不过sort方法还接受一个比较函数,可以解决此问题。sort方法会依次向比较函数传入两个相邻的数组项,而不会调用toString方法,如果比较函数的返回值为负数,表示第一个参数将排在第二个参数之前,若是整数,则表示第一个参数将排在第二个参数之后。

var arr = [2,11,9,4];
arr.sort((value1,value2) => {
    return value1 < value2 ? -1 : 1;
});
console.log(arr) //[2, 4, 9, 11]

若想实现降序排序,可直接将数组进行反转。

8、合并数组

concat方法可接受一个或多个数组,该方法会创建目标数组的副本,并将接受到的数组中的每个项添加到副本的尾部并返回副本,不影响源数组。

var arr = [1,2,3,4]
arr.concat([1,2,3,4]) //[1, 2, 3, 4, 1, 2, 3, 4]

9、在数组中进行截取

slice方法接受两个参数,参数1表示截取的起点,参数2表示截取的终点,该方法返回一个拥有截取内容的新数组,不影响源数组。如果省略第二个参数,会默认截取至末尾。

var arr = [1,2,3,4,5,6]
arr.slice(1) //[2, 3, 4, 5, 6]
arr.slice(1,5) //[2, 3, 4, 5]

需要用索引来表示终点与起点,slice方法将截取至终点索引值的前一个位置。

10、splice方法

splice方法会返回一个拥有所删除的项目的数组,并且该方法的所有操作都会影响源数组。

10.1 删除
splice方法接受两个参数,第一个表示删除的起点,第二个表示要删除的项目的数量,

var arr = [1,2,3,4,5,6]    	
arr.splice(1,2) //[2, 3]
arr //[1, 4, 5, 6]

10.2 插入
splice的第三个参数表示要插入的值:

var arr = [1,2,3,4,5,6]
arr.splice(1,0,1) //[1, 1, 2, 3, 4, 5, 6]

以上表示从索引为1的位置开始,删除0个项目,并插入新值1,若需插入更多的值,可在第三个参数后面传入第四个参数,可插入多个值。

10.3 替换
与插入同理,利用第二个参数删除指定项,在通过后面的参数指定插入的新项

var arr = [1,2,3,4,5,6]
arr.splice(1,1,1) //[1, 1, 3, 4, 5, 6]

以上表示从索引值为1的位置开始,删除一个项,并在这个位置上插入新值1。

11、查询

indexOf和lastIndexOf可用于从数组中查询某个值是否存在,它们都接受两个参数,第一个表示要搜索的值,第二个可选参数表示搜索的起始位置,indexOf方法是从头开始查找,而lastIndexOf方法是从末尾开始查找,如果找到匹配的项,则返回该项的索引,否则返回-1,需要注意的是,两个值之间必须是全等才算匹配。

var arr = [1,2,3,4,5,6]
arr.indexOf(2) //1

数组的遍历

es5为数组新增了5个迭代方法:

every方法:对数组的每项运行一个给定的函数,如果给定函数对每一项都返回true,则every方法最终返回true。

filter方法:对数组的每项运行一个给定的函数,filter方法最终返回一个包含所有调用给定函数结果为true的数组项。

forEach方法:对数组的每项运行一个给定的函数,没有返回值。

map方法:对数组的每项运行一个给定的函数,最终返回一个由给定函数的返回值组成的数组。

some方法:对数组的每项运行一个给定的函数,只要给定的函数的运行有一次返回true,则some方法返回true。

这些方法都接受两个参数,第一个参数是将对每项调用的函数,第二个可选参数可以指定给定函数所运行的作用域。
给定的函数又可接受三个参数,第一个参数为数组项的值,第二个为数组项的索引,第三个参数为调用迭代方法的对象。

例1:

var arr = [1,2,3,4,5,6]
    	
var result = arr.every(function (val,index,arr) {
	return val < 10 ? true : false;
})

console.log(result) //true

上例中,使用every方法检查数组中的每项值是否小于10,结果返回true,如果你会数组添加一个大于10的值,该方法将返回false。

例2:

var arr = [11,21,31,41,51,6]
    	
var result = arr.some(function (val,index,arr) {
	return val < 10 ? true : false;
})

console.log(result) //true

上例中,使用some方法,检查数组中是否存在小于10的值,只要函数有一次返回true,那么some方法就会返回true,而every方法则需要函数每次都返回true时,every方法才最终返回true。

例3:

var arr = [1,2,3,4,5,6,11,20,100]
    	
var result = arr.filter(function (val,index,arr) {
	return val < 10 ? true : false;
})

console.log(result) //[1, 2, 3, 4, 5, 6]

上例中,使用filter方法检查数组中的每项是否小于10,并将小于10的数组项装进数组进行返回。

例4:

var arr = [1,2,3,4,5,6,11,20,100]
    	
var result = arr.forEach(function (val,index,arr) {
	console.log(val)
})

例5:

var arr = [1,2,3,4,5,6]
    	
var result = arr.map(function (val,index,arr) {
	return ++val;
})

console.log(result) //[2, 3, 4, 5, 6, 7]

上例中,使用map方法对数组中的每个项进行++操作,函数的返回值会被包装成一个数组进行返回。

reduce和reduceRight方法

这两个方法都可接受四个参数,第一个参数为对每个数组项调用的函数,第二个可选的值为缩小基础的初始值。
方法中的函数可接受四个参数:
第一个参数代表前一个值,在第一轮迭代中,这个参数代表数组中的索引为0的数组项,在第二轮及往后的迭代中,这个参数代表的是上一轮迭代中函数的返回值。
第二个参数代表下一个数组项,即从索引为1的数组项开始,每次迭代,都会往前挪一位。
第三个参数为数组项的索引
第四个参数为调用迭代方法的对象
这两个方法最终会返回最后一次计算的结果。

var arr = [1,2,3,4,5,6]
var result = arr.reduce(function (prev,next) {
	return prev+next;
})
console.log(result) //21

上例中,第一次迭代从索引为1的数组项开始,这时候prev为前一个数组项1,next为索引为1的数组项2,在第二轮迭代中,prev为上次迭代中函数的返回值,也就是3,next为下一个数组项,即索引为2的数组项3,reduce方法最终返回最后一次计算的结果,即15+6=21;

reduceRight方法与reduce方法一致,只不过reduce是从左往右进行迭代,而reduceRight方法则是从右往左进行迭代。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值