1.length属性
要知道,数组的length属性并不是只读的,它是可读写的。手动设置length可实现数组的添加,删除项。
var arr = [1, 2, 3];
arr.length = 4;
console.log(arr[3]); //undefined
添加的项默认值为undefined
,如果想在数组最后添加项,可用如下方法:
arr[arr.length] = 4;
如果减去:
var arr = [1, 2, 3];
arr.length--;
console.log(arr[3]);//undefined
被减去的项如果再访问自然就是返回undefined
。
上面的栗子,原数组的长度为3,那么如果将length设置为100,会如何呢?
var arr = [1, 2, 3];
arr[99] = 100;
console.log(arr);//[1, 2, 3, empty × 96]
console.log(arr[98]);//undefined
console.log(arr[99])//100
索引号4-98并没有定义,所以自然是undefined
。
2.Array.isArray()
检测一个值是否是数组Array。
var arr = [1, 2, 3];
var obj = {
name: 'zed'
}
console.log(Array.isArray(arr));//true
console.log(Array.isArray(1));//false
console.log(Array.isArray([1]));//true
console.log(Array.isArray(obj));//false
console.log(Array.isArray(true));//false
3.join()
将数组转化为字符串格式并返回。可以接收一个参数作为数组中每一项的分隔符,传入undefined
或者不传值,则默认以,
隔开。
var arr = [1, 2, 3, 4, 5];
console.log(arr.join(undefined));//1,2,3,4,5
在join()方法中,数组项若是null
或者undefined
时,返回的是空字符串
var obj = {
name: 'zed'
}
var arr = [1, 'a', null, undefined, obj, obj.name, false];
console.log(arr.join('|'));//1|a|||[object Object]|zed|false
有趣的是,IE7及更早版本会将传入的undefined
错误地使用为分隔符(:D)
4.concat()
用来数组拼接,该方法会返回一个新的数组,即使没有参数也会返回一个原数组的副本。
如果参数是数组,那么会拼接到原数组的后面并返回;如果参数是几个数值,那么会将这几个数简单的拼接到原数组后面并返回。
var arr = [1, 2, 3, 4, 5]
var arr1 = ['a', 'b']
console.log(arr.concat(arr1));//[1,2,3,4,5,"a","b"]
console.log(arr.concat(6,'7',8));//[1,2,3,4,5,6,"7",8]
5. slice()
该方法会截取数组中的某一部分并作为新数组返回。可接收1-2个参数,不填写参数则返回原数组的副本。
第一个参数为开始截取的索引号(包括此索引号);第二个参数为结束截取的索引号(不包括此索引号),不填写则默认截取至数组结尾。
var arr = [1, 2, 3, 4, 5]
console.log(arr.slice());//[1,2,3,4,5]
console.log(arr.slice(2));//[1,2,3,4,5]
console.log(arr.slice(2, 3));//[3]
6.splice()
这差不多是最强大的数组方法了,利用该方法可实现删除,插入,替换等功能。
值得注意的是,该方法和前面几种方法不太相同,该方法会直接影响原数组,返回值为删除的项组成的数组,即使不删除也会返回一个空数组。
- 删除
- 需要传入两个参数,要删除的第一项的索引号,以及删除的项数。
- 仅传入一个参数的话,则会从该索引号一直删除到数组结尾。
- 返回值为删除项组成的数组。
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = [1, 2, 3, 4, 5, 6];
console.log(arr.splice(1));//[2,3,4,5,6]
console.log(arr);//[1]
console.log(arr1.splice(1,4));//[2,3,4,5]
console.log(arr1);//[1,6]
- 插入
- 需提供3个参数,插入的起始位置,删除项数(0),插入的项。
- 如果起始位置超出数组长度,则会在数组最后一项后插入。
- 如果插入项,仅需再写第四个,第五个…参数即可。
- 返回值为空数组。
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = [1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 0, 'a'));//[]
console.log(arr);//[1,"a",2,3,4,5,6]
console.log(arr1.splice(10, 0, 'a', 'b', 'c'));//[]
console.log(arr1);//[1, 2, 3, 4, 5, 6, "a", "b", "c"]
- 替换
- 原理为在指定位置删除任意数目的项,再添加任意数目的项,二者数目不必相等。
- 返回值为删除的项组成的数组。
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = [1, 2, 3, 4, 5, 6];
console.log(arr.splice(1, 1, 'a'));//[2]
console.log(arr);//[1, "a", 3, 4, 5, 6]
console.log(arr1.splice(2, 3, 'a', 'b', 'c','d'));//[3,4,5]
console.log(arr1);//[1, 2, "a", "b", "c", "d", 6]
7.indexOf() & lastIndexOf()
两个方法均为按值查找项,如果数组中有指定的值,则返回其索引号;没有则返回-1。前者从数组开头向后查,后者从数组结尾向前查找。
两个方法都接收2个参数,查找的值 和 开始查找的索引号(可选)。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(7, 4));//6
console.log(arr.indexOf(11));//-1
console.log(arr.indexOf(1));//0
console.log(arr.lastIndexOf(3));//2
console.log(arr.lastIndexOf(7, 5));//-1
console.log(arr.lastIndexOf(11));//-1
console.log(arr.lastIndexOf(1));//0
indexOf()方法可以判断一个字符串中是否含有特定字符串,返回-1则没有,返回0则是以它为开头,返回其他值则是含有但不是开头。可以利用该方法轻易的实现验证(代码略)。
8.push() & pop()
栈方法,前者为在数组的结尾添加一项,接收任意数量的参数,并会逐个添加,返回值为新数组的长度;
后者为删除数组的最后一项,返回值为删除的项。
var arr = [1, 2, 3, 4, 5];
console.log(arr.push('a', 'b', 'c'));//8
console.log(arr);//[1, 2, 3, 4, 5, "a", "b", "c"]
console.log(arr.pop());//c
console.log(arr);//[1, 2, 3, 4, 5, "a", "b"]
9.shift() & unshift()
队列方法,前者为删除数组的第一项元素,返回值为删除项;
后者在数组的最前面添加项,接收任意数量的参数,并会逐个添加到数组的最前面,返回值为新数组的长度。
var arr = [1, 2, 3, 4, 5];
console.log(arr.shift());//1
console.log(arr);//[2, 3, 4, 5]
console.log(arr.unshift('a', 'b', 'c'));//7
console.log(arr);//["a", "b", "c", 2, 3, 4, 5]
10. reverse()
反转数组,返回一个倒序数组,原数组也会改变。
var arr = [1, 2, 3, 4, 5];
console.log(arr.reverse());//[5, 4, 3, 2, 1]
console.log(arr);//[5, 4, 3, 2, 1]
11.sort()
排序函数,即使每一项都是数值,该方法也是比较字符串。那么很多情况下无法正常排序,所以要接收一个比较函数作为参数。
比较函数接收两个参数,若想让第一个参数位于第二个参数之前,则返回一个负数;若第二个参数应位于第一个参数之前,则返回一个正数;两个参数相等则返回0。
var arr = [1111, 221, 37, 4, 56, 59];
console.log(arr.sort(compare));//[4, 37, 56, 59, 221, 1111]
function compare(value1, value2) {
if (value1 > value2) {
return 1;
} else if (value1 < value2) {
return -1;
} else {
return 0;
}
}
这个比较函数适合大多数数据类型。如果想产生降序的效果,只需要修改为
if (value1 > value2) {
return -1;
} else if (value1 < value2) {
return 1;
}else {
return 0;
}
即可。
如果确定数组中的值均为数值时,比较函数可以更简单地写成:
function compare(value1, value2) {
return value2 - value1;
}
总结
以上就是js中常见的数组方法,有所收获的话就点个赞吧~