数组方法总结

184 阅读3分钟

为加深记忆,总结数组的方法如下:

【数组的创建】

1.Array构造器

var list = new Array();
var list = new Array(3);//创建包含3项的数组
var list = new Array('Blue','Red');//创建包含2项的数组

2.数组字面亮表示法

var list = [];//创建空数组
var list = ['Blue','Red'];//创建包含2项的数组

【判断变量是否是数组】

1.typeof 不能检测数组

在Javascript高级程序设计中,typeof会、返回6种结果

     //基础类型
    1. 'undefined'
    2. 'boolean'
    3. 'string'
    4. 'number'
    //复杂类型
    5. 'object'
    6. 'function'

不用多说,肯定不能用来检测数组

2.instanceof 能检测数组,但是有缺点。。。

instanceof要求开发者必须明确知道对象是哪一个特定的类型,栗子如下:

    var b = new Date();
    b instanceof Array // false
    b instanceof Date // true

instanceOf适用来检测变量是否是某一个类型,不适用检测未知类型的变量

3.constructor 能检测数组

    var arr = [1,2,3];
    console.info(arr.constructor == Array);

但是,constructor是有缺点的

fucntion C(){};
function D(){};
C.prototype = new D();//C继承D
var c = new C();
console.info(c.constructor === C);//false;
console.info(c.constructor === D);//true;

如果出现原型继承的情况,constructor的结果会出错

4.isArray

const a = [];
const b = {};
Array.isArray(a);//true
Array.isArray(b);//false

isArray存在兼容性问题,IE9+、Firefox 4+、Opera 10.5+ 和chrome。

5.通用的方法,Object.prototype.toString.call

//判断基本类型
console.info(Object.prototype.toString.call(null) === '[object Null]')
console.info(Object.prototype.toString.call(undefined) === '[object Undefined]')
console.info(Object.prototype.toString.call('123') === '[object String]')
console.info(Object.prototype.toString.call(123) === '[object Number]')
console.info(Object.prototype.toString.call(true) === '[object Boolean]')

//引用类型
function fn(){
    console.log('test');
}
console.info(Object.prototype.toString.call(fn) === '[object Function]');
var date = new Date();
console.info(Object.prototype.toString.call(date) === '[object Date]')
var arr = [1,2,3];
console.info(Object.prototype.toString.call(arr) === '[object Array]')

可以看出,Object.prototype.toString.call()能够很好的检测基本数据类型和引用数据类型

【数组的属性】

1.length

不细说啦

2.prototype

prototype属性是Object共有的,其作用就是返回对象类型原型的引用。

function array_max(){
    var max = this[0];
    for(var i = 1,len = this.length,item;i<len;i++){
    item = this[i]
        if(max<item){
            max = this[i];
        }
        return max;
    }
}
Array.prototype.max = array_max;
var x = new Array(1,2,3,4,5,6);
var y = x.max();//y=6;

【数组的方法】

方法名描述是否改变数组返回值
concat数组拼接不改变新拼接后的数组
join将数组转为字符串不改变新的字符串
sort数组排序改变排序后的数组
reverse数组反转改变反转后的数组
pop移除数组最后一项改变移除后的数组
push在数组尾部添加元素改变添加后的数组
unshift将元素添加到数组头改变添加后的数组
shift删除数组的第一项改变移除后的数组
slice从原数组开始到结束的项组成的新数组不改变新的数组
splice删除,插入元素改变删除的数组
every判断数组每一项是否满足不改变Boolean
some数组某一项是否满足不改变Boolean
map映射不改变新的数组
filter满足过滤条件的数组不改变新的数组
forEach循环遍历不改变没有返回
indexOf查找数组某一项不改变数组下标位置
lastIndexOf从后向前查找数组某一项不改变数组下标位置
reduce迭代数组每一项不改变某个值
reduceRight从后向前迭代数组每一项不改变某个值

1.concat()

concat():将参数添加到原数组中。该方法会先创建当前数组的副本,再将接受的数据添加到副本的末尾,最后返回新创建的数组。

var arr = [12,32,6,43,22];
var arrCopy = arr.concat(5,10);
console.info(arrCopy);//[12, 32, 6, 43, 22, 5, 10]
console.info(arr);//[12,32,6,43,22]

注意:不改变原始数组,新建数组

2.join()

将数组所有元素都转为字符串并拼接起来,生成字符串。不指定分隔符,默认使用逗号。

var arr = ['a','b','c'];
console.info(arr.join());//a,b,c
console.info(arr.join(' '));//a b c
console.info(arr);//['a','b','c']

注意:不改变原始数组,新建数组

3. reverse()

将数组的元素颠倒,返回逆序数组。

var arr = ['a','b','c'];
console.info(arr.reverse());//['c','b','a']
console.info(arr);//['c','b','a']

注意:改变原始数组

4. sort()

将数组中的元素排序并返回排序后的数组,当不带参数调用sort()方法时,数组元素会以字母顺序排序。

var arr = ['b','bc','ab'];
console.info(arr.sort());//['ab','b','bc']
console.info(arr);//['ab','b','bc']

如果数组中的每一项都是数值,比较数值的大小肿么办? sort()方法可以接受一个比较函数作为参数。

    function compare(value1,value2){
        return value1-value2;
    }
    var arr = [12,23,43,2,13];
    console.info(arr.sort(compare));//[2, 12, 13, 23, 43]

以上是升序排序的方法,降序排列只要改变比较函数就好了。

注意:改变原始数组

5. push()和pop()

push():可以接收任意数量的参数,逐个添加到数组的尾部,返回修改后数组的长度。 pop():移除数组的最后一项,减少数组的length值,返回移除的项。

var arr = ['b','bc','ab'];
var addArr = arr.push('de','ef');
console.info(addArr);//5
console.info(arr);//['ab','b','bc','de','ef']
var removeArr = arr.pop();
console.info(removeArr);//ef
console.info(arr);//['ab','b','bc','de']

注意:改变原始数组

6. shift()和unshift()

shift():删除原数组第一项,返回删除元素的值,数组为空则为undefined。 unshift():添加到原数组的开头,并返回数组的长度。

var arr = ['b','bc','ab'];
var addArr = arr.unshift('de','ef');
console.info(addArr);//5
console.info(arr);//['de','ef','ab','b','bc']
var removeArr = arr.shift();
console.info(removeArr);//de
console.info(arr);//['ef',ab','b','bc']

注意:会改变原始数组

7. slice()

slice():返回从原数组指定的开始下标到结束下标之间的项组成的新数组。slice()方法可以接受==一个或者两个==参数。在只有一个参数的前提下,返回从该参数指定的位置开始到当前数组末尾的所有项。两个参数,返回从开始到结束位置之间的项,但不包括结束位置的项。

var arr = [1,3,5,7,9,11];
var newArr = arr.slice(1);
var newArr2 = arr.slice(1,4);
var newArr3 = arr.slice(1,-2);
var newArr4 = arr.slice(-4,-1);
console.info(arr);//[1,3,5,7,9,11]
console.info(newArr);//[3,5,7,9,11]
console.info(newArr2);//[3,5,7]
console.info(newArr3);//[3,5,7]
console.info(newArr4);//[5,7,9]

注意:不会改变原始数组。

8. splice()

splice(index,howmany,item1,...,itemX):非常强大的数组方法,有很多的用法,包括实现删除、插入以及替换。

index:规定添加/删除项目的位置,负数可从数组结尾处规定位置。

howmany:要删除的项目数量。0,表示不会删除项目。

item1,...,itemX:向数组添加新的项目。

删除: 两个参数,splice(0,2)删除数组的前两项。

插入:至少提供三个参数。splice(2,0,4,6),从数组的位置2插入4和6。

替换:指定位置插入任意数量的项,同时删除任意数量的项。splice(2,1,4,6)会删除当前数组位置2的项,再从位置2插入4和6.

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.info(arr); //[5, 7, 9, 11]
console.info(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.info(arr); // [5, 7, 4, 6, 9, 11]
console.info(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.info(arr); // [5, 2, 4, 4, 6, 9, 11]
console.info(arrRemoved3); //[7]

注意:会改变原始数组。

9. indexOf()和lastIndexOf()

indexOf(value,index)和lastIndexOf(value,index):返回查找的项在数组中的位置,在没有找到的情况下返回-1。

value:要查找的项。

index:查找位置起点的索引,可不填。

indexOf():从数组的开头向后找。

lastIndexOf():从数组的末尾开始向前查找。

var arr = [1,3,5,7,5,3,1];
console.info(arr.indexOf(5));//2
console.info(arr.lastIndexOf(5))//4
console.info(arr.indexOf(5,2));//2
console.info(arr.lastIndexOf(5,4));//2
console.info(arr.indexOf('5'));//-1

注意:不会改变原始数组。

10. forEach()

forEach(function(value,index,arr)):对数组进行遍历循环,该方法没有返回值,参数是function类型。

value:遍历的数组的值。

index:对应的数组的下标。

arr:数组本身。

var arr = [1,3,5,7];
arr.forEach(function(value,index,arr){
    console.info(value+'|'+index+'|'+arr);
})
//1|0|1,3,5,7
//3|1|1,3,5,7
//5|2|1,3,5,7
//7|3|1,3,5,7

注意:不会改变原始数组。

11. map()

map(function(value,index,arr)):创建一个新数组,数组中的每一项都调用一个提供的函数后返回的结果,参数是function类型。

value:数组正在处理的值。

index:正在处理的数组的下标。

arr:map方法被调用的数组。

var arr = [1,3,5,7];
var newArr = arr.map(function(value){
    return value*value;
});
console.info(newArr);//[1, 9, 25, 49]

注意:不会改变原始数组。

12. filter()

filter(function(value,index,arr)):'过滤'功能,数组中的每一项都调用一个提供的函数返回满足过滤条件组成的数组,参数是function类型。

value:数组正在处理的值。

index:正在处理的数组的下标。

arr:map方法被调用的数组。

var arr = [1,3,5,7,9,11,13,15];
var newArr = arr.filter(function(value,index){
    return value>5||index%2 === 0;
});
console.info(newArr);//[1, 5, 7, 9, 11, 13, 15]

注意:不会改变原始数组。

13. every()

every(function(value)):判断数组中的每一项是否满足条件,只有所有项都满足条件,才会返回true,参数是function类型。

var arr = [1,3,5,7,9,11,13,15];
var newArr = arr.every(function(value){
    return value<20;
});
console.info(newArr);//true
var newArr2 = arr.every(function(value){
    return value<5;
});
console.info(newArr2);//false

注意:不会改变原始数组。

14. some()

every(function(value)):判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true,参数是function类型。

var arr = [1,3,5,7,9,11,13,15];
var newArr = arr.some(function(value){
    return value<3;
});
console.info(newArr);//true
var newArr2 = arr.some(function(value){
    return value<1;
});
console.info(newArr2);//false

注意:不会改变原始数组。

15. reduce()以及reduceRight()

reduce(funcition(prev,cur,index,arr),initVal)以及reduceRight(funcition(prev,cur,index,arr),initVal):两个方法都会实现迭代数组的所有项,然后构建一个最终的返回的值。reduce()从数组的第一项开始,逐个遍历到最后,reduceRight()从数组的最后一项遍历,向前遍历到第一项。

prev:前一个值,初始值,必需

cur:当前值,必需

index:数组的索引,可选

arr:数组对象,可选

initVal:传递给函数的初始值,可选

var arr = [1,3,5,7];
var sum = arr.reduceRight(function(prev,cur){
    return prev+cur;
},10);
console.info(sum);//26

注意:不会改变原始数组。