js常用数组方法(二)

 

创建子数组方法

 【slice()】

　　slice()方法基于当前数组中的一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组，所以slice()不影响原数组

　　slice(start,end)方法需要两个参数start和end，返回这个数组中从start位置到(但不包含)end位置的一个子数组；如果end为undefined或不存在，则返回从start位置到数组结尾的所有项

　　如果start是负数，则start = max(length + start,0)

　　如果end是负数，则end = max(length + end,0)

　　start和end无法交换位置

　　如果没有参数，则返回原数组

var numbers = [1,2,3,4,5];
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,undefined));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(2,1));//[]

console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]

console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]

如果不提供参数，slice()方法返回当前数组的一个浅拷贝

//该方法实际只复制了数组的第一维，数组第一维存放的是第二维的引用，而第二维才是实际存放他们的内容
var numbers = [1,2];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]

var numbers = [[1,2]];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

　slice()方法涉及到Number()转型函数的隐式类型转换，当start被转换为NaN时，相当于start = 0；当end被转换为NaN时(end为undefined除外)，则输出空数组

var numbers = [1,2,3,4,5];
console.log(numbers.slice(NaN));//[1,2,3,4,5]
console.log(numbers.slice(0,NaN));//[]
console.log(numbers.slice(true,[3]));//[2,3]
console.log(numbers.slice(null,undefined));//[1,2,3,4,5]
console.log(numbers.slice({}));//[1,2,3,4,5]
console.log(numbers.slice('2',[5]));//[3,4,5]

　　可以使用slice()方法将类数组对象变成真正的数组

var arr = Array.prototype.slice.call(arrayLike);

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

数组删改方法

【splice()】

　　splice()和slice()拥有非常相似的名字，但它们的功能却有本质的区别。splice()方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，该方法会改变原数组

　　splice()返回一个由删除元素组成的数组，或者如果没有删除元素就返回一个空数组

　　splice()的第一个参数start指定了插入或删除的起始位置。如果start是负数，则start = max(length + start,0)；如果start是NaN，则相当于start = 0

　　如果只提供一个元素，相当于将原数组在指定位置拆分成两个数组

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice());// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(4));// [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-4));//-4+8=4; [1,2,3,4] [5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(-9));//max(-9+8,0)=0 [] [1,2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(NaN));//[] [1,2,3,4,5,6,7,8]

　第二个参数number指定了应该从数组中删除的元素的个数。如果省略第二个参数，从起始点开始到数组结尾的所有元素都将被删除。如果number是负数或NaN或undefined，则number=0，因此不删除元素

var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(0,2));// [3,4,5,6,7,8] [1,2]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(10,2));// [1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,100));// [1] [2,3,4,5,6,7,8]
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,-5));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,NaN));//[1,2,3,4,5,6,7,8] []
var a = [1,2,3,4,5,6,7,8];
console.log(a,a.splice(1,undefined));//[1,2,3,4,5,6,7,8] []

　如果后面还有更多的参数，则表示这些就是要被插入数组的新元素

var a = [1,2,3,4,5];
console.log(a,a.splice(2,0,'a','b'));//[1,2,'a','b',3,4,5] []
console.log(a,a.splice(2,2,[1,2],3));//[1,2,[1,2],3,3,4,5] ['a','b']

数组位置方法

　　ES5为数组实例添加了两个位置方法：indexOf()、lastIndexOf()

【indexOf()】

　　indexOf(search,start)方法接收search和start两个参数，返回search首次出现的位置，如果没有找到则返回-1

　　search参数表示要搜索的项；使用严格相等运算符（===）进行比较

var arr = [1,2,3,'1','2','3'];
console.log(arr.indexOf('2'));//4
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(0));//-1

　start参数表示该搜索的开始位置，该方法会隐式调用Number()转型函数，将start非数字值(undefined除外)转换为数字。若忽略该参数或该参数为undefined或NaN时，start = 0

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.indexOf('a',undefined));//0
console.log(arr.indexOf('a',NaN));//0
console.log(arr.indexOf('a',1));//5
console.log(arr.indexOf('a',true));//5
console.log(arr.indexOf('a',-1));//max(0,-1+7)=6; -1
console.log(arr.indexOf('a',-5));//max(0,-5+7)=2; 5
console.log(arr.indexOf('a',-50));//max(0,-50+7)=0; 0

var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];
var morePeople = [person];
alert(people.indexOf(person));//-1,因为person和people[0]虽然值相同，但是是两个引用
alert(morePeople.indexOf(person));//0，因为person和morepeople[0]是同一个引用
alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因为不是同一个引用

　indexOf()方法兼容写法

if (typeof Array.prototype.indexOf != "function") {
    Array.prototype.indexOf = function (searchElement, fromIndex) {
        var index = -1;
        fromIndex = fromIndex * 1 || 0;
        for (var k = 0, length = this.length; k < length; k++) {
            if (k >= fromIndex && this[k] === searchElement) {
                index = k;
                break;
            }
        }
        return index;
    };
}

【lastIndexOf()】

　　与indexOf()不同，lastIndexOf()从右向左查找

　　lastIndexOf(search,start)方法接收search和start两个参数，返回search第一次出现的位置，如果没有找到则返回-1

　　search参数表示要搜索的项；使用严格相等运算符（===）进行比较

var arr = [1,2,3,'1','2','3'];
console.log(arr.lastIndexOf('2'));//4
console.log(arr.lastIndexOf(3));//2
console.log(arr.lastIndexOf(0));//-1

　start表示该搜索的开始位置，该方法会隐式调用Number()转型函数，将start非数字值(undefined除外)转换为数。若忽略该参数或该参数为undefined或NaN时，start = 0

　　与字符串的lastIndexOf()方法不同，当search方法为负数时，search = max(0,length+search)

var arr = ['a','b','c','d','e','a','b'];
console.log(arr.lastIndexOf('b'));//6
console.log(arr.lastIndexOf('b',undefined));//-1
console.log(arr.lastIndexOf('a',undefined));//0
console.log(arr.lastIndexOf('b',NaN));//-1
console.log(arr.lastIndexOf('b',1));//1
console.log(arr.lastIndexOf('b',-1));//max(0,-1+7)=6; 6
console.log(arr.lastIndexOf('b',-5)    );//max(0,-5+7)=2; 1
console.log(arr.lastIndexOf('b',-50));//max(0,-50+7)=0; -1

　【tips】返回满足条件的项的所有索引值

　　可以通过循环调用indexOf()或lastIndexOf()来找到所有匹配的项

function allIndexOf(array,value){var result = [];var pos = array.indexOf(value);if(pos === -1){return -1;}while(pos > -1){result.push(pos);pos = array.indexOf(value,pos+1);}return result;}var array = [1,2,3,3,2,1];console.log(allIndexOf(array,1));//[0,5]

　lastIndexOf()方法兼容写法 

if (typeof Array.prototype.lastIndexOf != "function") {
Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
var index = -1, length = this.length;
fromIndex = fromIndex * 1 || length - 1;
for (var k = length - 1; k > -1; k-=1) {
if (k <= fromIndex && this[k] === searchElement) {
index = k;
break;
}
}
return index;
};
}

数组归并方法

　　数组归并方法包括reduce()和reduceRight()方法两种，它们使用指定的函数将数组元素进行组合，生成单个值。这在函数式编程中是常见的操作，也可以称为“注入”和“折叠”

【reduce()】

　　reduce()方法需要两个参数。第一个是执行化简操作的函数。化简函数的任务就是用某种方法把两个值组合或化简为一个值，并返回化简后的值

　　化简函数接受四个参数，分别是：

　　【1】初始变量，默认为数组的第一个元素值。函数第一次执行后的返回值作为函数第二次执行的初始变量，依次类推

　　【2】当前变量，如果指定了第二个参数，则该变量为数组的第一个元素的值，否则，为第二个元素的值

　　【3】当前变量对应的元素在数组中的索引(从0开始)

　　【4】原数组对象

　　化简函数的这四个参数之中，只有前两个是必须的，后两个则是可选的

values.reduce(function(prev, cur, index, array){
//todo
});

　reduce()方法第二个(可选)的参数是一个传递给函数的初始值

var a = [1,2,3,4,5];
var sum = a.reduce(function(x,y){return x+y},0);//数组求和
var product = a.reduce(function(x,y){return x*y},1);//数组求积
var max = a.reduce(function(x,y){return (x>y)?x:y;});//求最大值

[1, 2, 3, 4, 5].reduce(function(prev, cur){
console.log(prev, cur)
return prev+ cur;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15


[1, 2, 3, 4, 5].reduce(function(prev, cur){
console.log(prev, cur);
return prev + cur;
},0);
// 0 1
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

　[注意]reduce()方法的返回结果类型和传入的初始值相同

[1, 2, 3, 4, 5].reduce(function(prev, cur){
console.log(prev.sum, cur);
prev.sum = prev.sum + cur;
return prev;
},{sum:0});
//0 1
//1 2
//3 3
//6 4
//10 5
//Object {sum: 15}

利用reduce()方法，可以写一个数组求和的sum方法

Array.prototype.sum = function (){
return this.reduce(function (prev, cur){
return prev + cur;
})
};
[3,4,5,6,10].sum();// 28

由于reduce方法依次处理每个元素，所以实际上还可以用它来搜索某个元素。比如，找出长度最长的数组元素

function findLongest(entries) {
return entries.reduce(function (prev, cur) {
return cur.length > prev.length ? cur : prev;
}, '');
}
console.log(findLongest([1,2,3,'ab',4,'bcd',5,6785,4]));//'bcd'

可以利用reduce()方法，实现二维数组的扁平化

var matrix = [[1, 2],[3, 4],[5, 6]];// 二维数组扁平化var flatten = matrix.reduce(function (prev, cur) {return prev.concat(cur);});console.log(flatten); // [1, 2, 3, 4, 5, 6]

在空数组上，不带初始值参数调用reduce()将导致类型错误异常。如果调用它的时候只有一个值——数组只有一个元素并且没有指定初始值，或者有一个空数组并且指定一个初始值——reduce()只是简单地返回那个值而不会调用化简函数

var arr = [];

arr.reduce(function(){});//Uncaught TypeError: Reduce of empty array with no initial value



var arr = [];

arr.reduce(function(){},1);//1

reduce()方法兼容写法

if (typeof Array.prototype.reduce != "function") {
Array.prototype.reduce = function (callback, initialValue ) {
var previous = initialValue, k = 0, length = this.length;
if (typeof initialValue === "undefined") {
previous = this[0];
k = 1;
}
if (typeof callback === "function") {
for (k; k < length; k++) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}

【reduceRight()】

　　reduceRight()的工作原理和reduce()一样，不同的是它按照数组索引从高到低（从右到左）处理数组，而不是从低到高

var values = [1,2,3,4,5];var sum = values.reduceRight(function(prev, cur, index, array){console.log(prev,cur);return prev + cur;});console.log(sum);//5 4//9 3//12 2//14 1//15

　　reduceRight()方法兼容写法

if (typeof Array.prototype.reduceRight != "function") {
Array.prototype.reduceRight = function (callback, initialValue ) {
var length = this.length, k = length - 1, previous = initialValue;
if (typeof initialValue === "undefined") {
previous = this[length - 1];
k--;
}
if (typeof callback === "function") {
for (k; k > -1; k-=1) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}

数组迭代方法

 　　ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象——影响this的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响访问的返回值

【map()】

　　map()方法对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组

//f是array的每一个元素调用的函数。它的返回值成为返回数组的元素；o是f调用时的可选this值
array.map(f,o);

[1,2,3].map(function(item,index,arr){return item*item});//[1,4,9]
[1,2,3].map(function(item,index,arr){return item*index});//[0,2,6]

　　map()方法还可以接受第二个参数，表示回调函数执行时this所指向的对象
var arr = ['a','b','c'];
[1,2].map(function(item,index,arr){return this[item]},arr);//['b','c']

　在实际使用的时候，可以利用map()方法方便地获得对象数组中的特定属性值
var users = [{name:'t1',email:'t1@qq.com'},{name:'t2',email:'t2@qq.com'},{name:'t3',email:'t3@qq.com'}];
console.log(users.map(function(item,index,arr){return item.email}));//["t1@qq.com", "t2@qq.com", "t3@qq.com"]

　map()方法还可以用于类数组对象

Array.prototype.map.call('abc',function(item,index,arr){return item.toUpperCase()});//["A", "B", "C"]

　对于稀疏数组，map()方法不会在实际上不存在元素的序号上调用函数

var a = [1,,3];

console.log(a.map(function(item,index,arr){return item*2;}));//[2, 2: 6]

　　map()方法兼容写法

if (typeof Array.prototype.map != "function") {

Array.prototype.map = function (fn, context) {

var arr = [];

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

arr.push(fn.call(context, this[k], k, this));

}

}

return arr;

};

}

【forEach()】

　　forEach()方法对数组中的每一项运行给定函数，这个方法没有返回值。本质上与for循环迭代数组一样。如果需要有返回值，一般使用map方法

[1,2,3,4].forEach(function(item,index,arr){

console.log(item)

});

//1

//2

//3

//4

　　类似于如下的for循环

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

for (var k = 0, length = array.length; k < length; k++) {

console.log(array[k]);

}

　　使用forEach()方法实现简单的加法

var sum = 0;

[1, 2, 3, 4].forEach(function (item, index, array) {

sum += item;

});

console.log(sum);//10

　　forEach()方法除了接受一个必须的回调函数参数，第二个参数还可以接受一个可选的上下文参数(改变回调函数里面的this指向)

var out = [];

[1, 2, 3].forEach(function(elem){

this.push(elem * elem);

}, out);

console.log(out);// [1, 4, 9]

　　第二个参数对于多层this非常有用，因为多层this通常指向是不一致的，可以使用forEach()方法的第二个参数固定this

var obj = {

name: '张三',

times: [1, 2, 3],

print: function () {

//该this指向obj

console.log(this);

this.times.forEach(function (n) {

//该this指向window

console.log(this);

});

}

};

obj.print();

var obj = {

name: '张三',

times: [1, 2, 3],

print: function () {

//该this指向obj

console.log(this);

this.times.forEach(function (n) {

//该this同样指向obj

console.log(this);

},this);

}

};

obj.print();

　　forEach()循环可以用于类数组对象

var str = 'abc';

Array.prototype.forEach.call(str, function(item, index, array) {

console.log( item + ':' + index);

});

//a:0

//b:1

//c:2

　　与for循环不同，对于稀疏数组，forEach()方法不会在实际上不存在元素的序号上调用函数

var a = [1,2,3];

delete a[1];

for(var i = 0; i < a.length; i++){

console.log(a[i]);

}

//1

//undefined

//3

a.forEach(function(item,index,arr){console.log(item)});

//1

//3

　　forEach()方法无法在所有元素都传递给调用的函数之前终止遍历。也就是说，没有像for循环中使用的相应的break语句。如果要提前终止，必须把forEach()方法放在一个try块中，并能抛出一个异常

for(var i = 0; i < 5; i++){

if(i == 2) break;

}

console.log(i);//2

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

console.log(a.forEach(function(item,index,arr){

if(index == 2) break;//Uncaught SyntaxError: Illegal break statement

}));

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

a.forEach(function(item,index,arr){

try{

if(item == 2) throw new Error;

}catch(e){

console.log(item);

}

});

　　forEach()方法兼容写法

if(typeof Array.prototype.forEach != 'function'){

Array.prototype.forEach = function(fn,context){

for(var k = 0,length = this.length; k < length; k++){

if(typeof fn === 'function' && Object.prototype.hasOwnProperty.call(this,k)){

fn.call(context,this[k],k,this);

}

}

}

}

【filter()】

　　filter()方法对数组中的每一项运行给定函数，该函数会返回true的项组成的数组。该方法常用于查询符合条件的所有数组项

[1, 2, 3, 4, 5].filter(function (elem) {

return (elem > 3);

});// [4, 5]



[0, 1, 'a', false].filter(Boolean);// [1, "a"]



[1, 2, 3, 4, 5].filter(function (elem, index, arr) {

return index % 2 === 0;

});// [1, 3, 5]

　　filter()方法还可以接受第二个参数，指定测试函数所在的上下文对象(this对象)

var Obj = function () {

this.MAX = 3;

};

var myFilter = function (item) {

if (item > this.MAX) {

return true;

}

};

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

arr.filter(myFilter, new Obj());// [8, 4, 9]

　　filter()会跳过稀疏数组中缺少的元素，它的返回数组总是稠密的，所以可以压缩稀疏数组的空缺

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

console.log(a.length);//10

var dense = a.filter(function(){return true;})

console.log(dense,dense.length);//[1,2,3,4] 4

　　如果要压缩空缺并删除undefined和null元素，可以这样使用filter()方法

var a = [1,2,,undefined,,3,,null,,4];

console.log(a.length);//10

var dense = a.filter(function(item){return item!= undefined;})

console.log(dense,dense.length);//[1,2,3,4] 4

　　filter()方法兼容写法

if (typeof Array.prototype.filter != "function") {

Array.prototype.filter = function (fn, context) {

var arr = [];

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

fn.call(context, this[k], k, this) && arr.push(this[k]);

}

}

return arr;

};

}

【some()】

　　some()方法对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。并且当且仅当数值中的所有元素调用判定函数都返回false，它才返回false

a = [1,2,3,4,5];

a.some(function(elem, index, arr){return elem%2===0;})//true

a.some(isNaN);//false

　　在空数组上调用some()方法会返回false

[].some(function(){});//false

　　some()方法兼容写法

if (typeof Array.prototype.some != "function") {

Array.prototype.some = function (fn, context) {

var passed = false;

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

if (passed === true) break;

passed = !!fn.call(context, this[k], k, this);

}

}

return passed;

};

}

【every()】

　　every()方法对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true；只要有一项返回false，则返回false

a = [1,2,3,4,5];

a.every(function(elem, index, arr){elem < 10;})//true

a.every(function(elem, index, arr){return elem%2 ===0;});//false

　　在空数组上调用every()方法会返回true

[].every(function(){});//true

　　every()方法兼容写法

if (typeof Array.prototype.every != "function") {

Array.prototype.every = function (fn, context) {

var passed = true;

if (typeof fn === "function") {

for (var k = 0, length = this.length; k < length; k++) {

if (passed === false) break;

passed = !!fn.call(context, this[k], k, this);

}

}

return passed;

};

}

总结                                                                                                                                                                                                                                                                                                                                                                                                           javascript数组方法特意定义为通用的，因此它们不仅应用在真正的数组而且在类数组对象上都能正确工作。这22种方法中，除了toString()和toLocaleString()以外的所有方法都是通用的

　　可以改变原数组的方法总共有7种：包括unshift()、shift()、push()、pop()这4种栈和队列方法，reverse()和sort()这2种数组排列方法，数组删改方法splice()

 　　除了上面22种方法外，还有一些方法也是常用的，但是需要自己封装

　　数组去重方法封装

Array.prototype.norepeat = function(){

var result = [];

for(var i = 0; i < this.length; i++){

if(result.indexOf(this[i]) == -1){

result.push(this[i]);

}

}

return result;

}

var arr = ['a','ab','a'];

console.log(arr.norepeat());//['a','ab']

　　测试数组是否包含特定值的方法封装

Array.prototype.inArray = function(value){

for(var i = 0; i < this.length; i++){

if(this[i] === value){

return true;

}

}

return false;

}

var arr = ['a','ab','a'];

console.log(arr.inArray('b'));//false

console.log(arr.inArray('a'));//true

参考资料

【1】  ES5/array对象 https://www.w3.org/html/ig/zh/wiki/ES5/builtins#Array_.E5.AF.B9.E8.B1.A1

【2】  W3School-Javascript高级教程——Array对象 http://www.w3school.com.cn/jsref/jsref_obj_array.asp

【3】  阮一峰Javascript标准参考教程——Array对象 http://javascript.ruanyifeng.com/stdlib/array.html

【4】《javascript权威指南(第6版)》第7章 数组

【5】《javascript高级程序设计(第3版)》第5章 引用类型

【6】《javascript DOM编程艺术(第2版)》第2章 javascript语法

【7】《javascript语句精粹》第6章 数组