数组的方法(详解)
[1] 栈和队列方法
- 栈,一种先进后出的数据结构。简单来说,就是从列表的末端添加元素,从列表的末端移除元素;
- 队列数据结构的访问规则是先进先出。也就是说,从列表的末端添加元素,从列表的前端移除元素。
在 JS 中,栈和队列的数据访问,可以通过 push()、pop() / shift() 方法来实现。
[ push() ] 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5
如果需要合并两个数组,可以使用apply方法;如果使用call方法,则会把数组b整体看成一个参数。
// apply方法 var a = [1, 2, 3]; var b = [4, 5, 6]; console.log(a,Array.prototype.push.apply(a, b));//[1,2,3,4,5,6] 6 // call方法 var a = [1, 2, 3]; var b = [4, 5, 6]; console.log(a,Array.prototype.push.call(a, b));//[1,2,3,[4,5,6]] 4
push()方法,也可以向对象中添加元素,添加后的对象变成类数组对象
// 新加入元素的键对应数组的索引,并且对象有一个length属性 var obj = {a: 1}; console.log(obj,[].push.call(obj, 2));// {a:1, 0:2, length: 1} console.log(obj,[].push.call(obj, [3]));// {a:1, 0:2, 1:[3], length: 2}
[ pop() ] 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。所以,它会改变原数组。
var a = ['a', 'b', 'c']; console.log(a,a.pop()); // ['a', 'b'] 'c'
对空数组使用 pop() 方法,不会报错,而是返回 undefined。
var a = []; console.log(a,a.pop()); // [] undefined
[ shift() ] 移除数组中的第一个项并返回该项,同时,数组长度减 1。所以,它会改变原数组。
var a = ['a', 'b', 'c']; console.log(a,a.shift());//['b', 'c'] 'a'
对空数组使用shift()方法,不会报错,而是返回undefined。
var a = []; console.log(a,a.shift());// [] undefined
[ unshift() ] 在数组前端添加任意个项,并返回新数组长度。所以,它会改变原数组。
var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4
当使用多个参数调用unshift()时,参数是一次性插入的而非一次一个地插入。
// 这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致 var a = ['a', 'b', 'c']; console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6在IE7-浏览器中,unshift()方法返回的总是undefined。
//标准浏览器下,返回[1] 1;而IE7-浏览器下,返回[1] undefined var a = []; console.log(a,a.unshift(1));
[2] 数组排序方法
数组中存在两个可以直接用来重排序的方法:reverse() 和 sort() 。
[ reverse() ] 用于反转数组的顺序,返回经排序之后的数组;而原数组顺序也发生改变。
var array = [1,2,4,3,5]; console.log(array,array.reverse()); // [5,3,4,2,1] [5,3,4,2,1]
[ sort() ] 默认情况下,sort()方法按字符串升序排列数组项,sort方法会调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组,而原数组顺序也发生改变。 // 默认方式,意义不大
var array = [1,2,4,3,5]; console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5] var array = [1,5,10,50]; console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]
如果数组包含undefined元素,它们会被排到数组的尾部
var array = ['3',3,undefined,2,'2']; console.log(array,array.sort());//["2", 2, "3", 3, undefined] ["2", 2, "3", 3, undefined]
sort()方法,可以接受一个比较函数作为参数,以便指定哪个值在哪个值的前面。
比较函数接收两个参数:
- 如果第一个参数应该位于第二个参数之前,则返回一个负数;
- 如果两个参数相等,则返回0;
- 如果第一个参数应该位于第二个参数之后,则返回一个正数。
function compare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}
var array = ['5px',50,1,10];
//当数字与字符串比较大小时,字符串'5px'会被转换成NaN,这样结果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]
对于数值类型 或 valueOf() 方法会返回数值类型的对象类型,比较函数可以简化
function compare(value1,value2){ return value1 - value2; } var array = ['5px',50,1,10]; console.log(array.sort(compare)); // ["5px",1,10,50] var array = [5,50,1,10]; console.log(array.sort(compare)); // [1,5,10,50]
// 代码示例:使用sort()方法创建一个随机数组
function compare(){ return Math.random() - 0.5; } var array = [1,2,3,4,5]; console.log(array.sort(compare));//[2,1,5,4,3]
[3] 数组拼接方法
[ concat() ] 基于当前数组中的所有项创建一个新数组,先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。所以,它不影响原数组。
- 如果不给concat()方法传递参数时,它只是复制当前的数组;
- 如果参数是一个或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中;
- 如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。
var numbers = [1,2]; console.log(numbers,numbers.concat(3,4));//[1,2] [1,2,3,4] console.log(numbers,numbers.concat([5,4,3],[3,4,5],1,2));//[1,2] [1,2,5,4,3,3,4,5,1,2] console.log(numbers,numbers.concat(4,[5,[6,7]]));//[1,2] [1,2,4,5,[6,7]]
concat()方法,也可以用于将对象合并为数组,但是必须借助 call() 方法
var newArray = Array.prototype.concat.call({ a: 1 }, { b: 2 }) console.log(newArray); // [{ a: 1 }, { b: 2 }] console.log(newArray[0].a); // 1
[4] 创建子数组方法
[ slice() ] 基于当前数组中的一个或多个项创建一个新数组,接受一个或两个参数,即要返回项的起始和结束位置,最后返回新数组,所以,它不影响原数组。
slice(start,end)方法需要两个参数start和end,返回这个数组中 [ start , end ) d的一个子数组。
- 如果 end 为 undefined 或不存在,则返回从 start 位置到数组结尾的所有项。
- 如果 start 是负数,则 start = max(length + start,0) ;end 是负数,则 end = max(length + end,0)。
- 如果没有参数,则返回原数组。
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 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);
[5] 数组删改方法 // splice() 会改变原数组
[ splice() ] 删除原数组的一部分成员,并可以在被删除的位置添加新的数组成员,返回一个由删除元素组成的数组。
a. 第一个参数 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]
b. 第二个参数 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] []
c. 如果后面还有更多的参数,则表示这些就是要被插入数组的新元素
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']
[6] 数组位置方法
ES5 为数组实例添加了两个位置方法:indexOf()、lastIndexOf()
[ 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
// 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() 从右向左查找
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
// 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; }; }
[7] 数组归并方法
数组归并方法包括 reduce() 和 reduceRight() 方法两种,它们使用指定的函数将数组元素进行组合,生成单个值。
这在函数式编程中是常见的操作,也可以称为“注入”和“折叠”。
[ 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 //最后结果:15reduce()方法的返回结果类型和传入的初始值相同
[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()方法兼容写法
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() ] 原理同 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; }; }
[8] 数组迭代方法
ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象 — 影响this的值。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。
根据使用的方法不同,这个函数执行后的返回值可能会也可能不会影响访问的返回值。
function(item,index,array){
//todo
}
[ 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() ] 对数组中的每一项运行给定函数,这个方法没有返回值,本质上与for循环迭代数组一样。
[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() ] 对数组中的每一项运行给定函数,该函数会返回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() ] 对数组中的每一项运行给定函数,如果该函数对任一项返回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() ] 对数组中的每一项运行给定函数,如果该函数对每一项都返回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;
};
}
[9] 数组转换方法
[ join() ]
Array.join()方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来创建一个数组。
数组继承的toLocaleString()和toString()方法,在默认情况下都会以逗号分隔的字符形式返回数组项;而join()方法可以使用不同的分隔符来构建这个字符串,join()方法只接收一个参数,用作分隔符的字符串,然后返回包含所有数组项的字符串
如果不给join()方法传入任何值,则使用逗号作为分隔符
var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'
var b = new Array(10);
b.join('-');//'---------',9个连字符组成的字符串
若join()方法的参数是undefined,标准浏览器以逗号为分隔符返回字符串,而IE7-浏览器以'undefined'为分隔符返回字符串
//标准浏览器为'1,2,3';IE7-浏览器为'1undefined2undefined3' var a = [1,2,3]; console.log(a.join(undefined));
如果数组中的某一项的值是null或者undefined,则该值在join()方法返回的结果中以空字符串表示
var colors = [1,undefined,2,null,3]; console.log(colors.join());//'1,,2,,3'
该方法也可以用于类数组对象上
console.log(Array.prototype.join.call('hello', '-'));// "h-e-l-l-o"
var obj = { 0: 'a', 1: 'b', length: 2 };
console.log(Array.prototype.join.call(obj, '-'));// 'a-b'
[注意]若对象没有length属性,就不是类数组,也就不能调用数组的方法
var obj = { 0: 'a', 1: 'b' };
console.log(Array.prototype.join.call(obj, '-'));//''
使用join()方法可以创建重复某些字符N次的函数
function repeatString(str,n){
return new Array(n+1).join(str);
}
console.log(repeatString('a',3));//'aaa'
console.log(repeatString('Hi',5));//'HiHiHiHiHi'
总结
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