Array的方法整理

发表于 | 分类于 |

之前就想整理一下关于数组的方法，因为数组的方法有很多，使用也很频繁。特别是手动截取字符串，页面重新排序的时候。

关于Array

在js的数组中，每一项可以保存成任意数据类型。也就是说可以第一项是字符串，第二项是数值，第三项是一个对象。

创建一个数组

  • 使用构造函数的方法：
    1
    var colors = new Array();

也可以用这个方法直接指定数组的长度：

1
var colors = new Array(20);

还可以直接给数组内部加入数据：

1
var colors = new Array('red','blue','pink')

  • 使用数组字面量的方法：
    1
    var colors = [];

直接在数组内添加数据：

1
var number = [1,2,3];

访问数组

  • 访问数组内部的值

通过 []里面加上数字索引去访问，从0开始

1
2
var colors = ['red','blue','pink'];
console.log( colors[2] ); //'pink'

  • 数组的长度
1
2
var colors = ['red','blue','pink'];
console.log( colors.length ); //3

数组长度是从1开始数的，所以最大长度比最大的索引会大1，这样也方便了直接在最后一位添加数据：

1
2
3
var colors = ['red','blue','pink'];
colors[ colors.length ] = 'black';
console.log( colors ); //['red','blue','pink','black'];

检测数组

检查一个变量是不是数组，方法有两种

ES3中使用instanceof方法去判断，返回一个boolear

1
2
var list = [1,2,3];
console.log( list instanceof Array ); //true

ES5后使用Array.isArray()方法去判断，返回一个boolear

1
2
var list = [1,2,3];
console.log( Array.isArray(list) ); //true

ES3中的方法会导致在不同执行环境下，创建的数组会有各自不同的够构造函数，在ES5中解决了

转换方法

将数组转成字符串：

1
2
3
var colors = ['red','blue','pink'];
console.log( colors.toString() );//red,blue,pink
console.log( colors.toLocaleString() );//red,blue,pink

join()

toString()和toLocaleString()方法都会将数组转成字符串，用逗号隔开，如果要选用自己喜欢的符号去隔开，那么要采用join()方法。方法会返回从组后的字符串

1
2
var colors = ['red','blue','pink'];
console.log( colors.join('我') ); //red我blue我pink

可以是任意的字符串去隔开

栈方法

提供了push()和pop()方法，以便实现栈的行为。

push()

push()方法可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度。

1
2
3
var colors = new Array();
var count = colors.push('red','blue');
console.log( count );// 2

pop()

pop()方法从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

1
2
3
4
var colors = ['red','blue','pink'];
var item = colors.pop();
console.log( item );// 'pink'
console.log( colors )// ['red','blue']

队列方法

队列在列表的末端添加项，从列表的前端移除项。

shift()

移除数组第一项，并返回第一项的值

1
2
3
4
var colors = ['red','blue','pink'];
var item = colors.shift();
console.log( item );// 'red'
console.log( colors );//['blue','pink']

unshift()

它能在数组前端添加任意项，并返回长度

1
2
3
4
var colors = ['red','blue','pink'];
var count = colors.unshift('black','white');
console.log( count );// 5
console.log( colors );//['black','white','red','blue','pink']

在IE7下面unshift()会总是返回undefined，IE8在非兼容模式下回返回正确长度

重排序方法

数组中已经存在两个可以直接用的重排序的方法：reverse()和sort()

reverse()

会将数组现在的顺序颠倒，然后返回重新排序后的数组

1
2
3
var colors = ['red','blue','pink'];
colors.reverse();
console.log( colors );//['pink','blue','red']

sort()

默认将数组数组转成字符串，然后从小到大进行排序，然后返回一个重新排序后的数组

1
2
3
var values = [0,1,5,10,15];
values.sort();
console.log( values );//[0,1,10,15,5]

这样显然和想象中的不一样，因为上面是直接进行的字符串的比较，而不是数值类型的比较。可以给sort()传入一个方法，返回数值类型

1
2
3
4
5
6
function compare(a,b){
    return a - b;
}
var values = [0,1,10,8,15,5];
values.sort(compare);
console.log( values );//[0,1,5,8,10,15]

从小到大是return a - b，从大到小是return b - a

其实我比较推荐ES6的箭头函数，更简洁

1
2
var values = [0,1,10,8,15,5];
values.sort( (a,b)=>a - b );

操作方法

js中对数组的操作还有很多方法

concat()

concat方法可以基于当前数组中的所有项创建一个新数组。此方法会创建一个副本，然后返回重组的新数组，并不会对原数组进行操作

1
2
3
4
var colors = ['red','blue','pink'];
var colors2 = colors.concat('black',['white','yellow']);
console.log(colors);//['red','blue','pink']
console.log(colors2);//['red','blue','pink','black','white','yellow']

slice()

slice()方法接收两个参数，第一个为必填：返回项的起始位置，第二个可选：结束位置。如果没有第二个参数，则默认从起始位置到结束。截取位置计算方法是>=起始位置,<结束位置。方法最后返回截取的这段数组

1
2
3
4
5
var colors = ['red','blue','pink'];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,2);
console.log( colors2 );//['blue','pink']
console.log( colors3 );//['blue']

如果传值为负数，那么就用数组的length加上它，作为参数来计算。如果结束位置小于起始位置，则返回空数组。

splice()

  • 有3种用法
    1. 删除：
      • 指定两个参数，第一个参数：删除的起始位置，第二个参数：要删除的项数。如splice(0,2)会删除前面2项。
    2. 插入：
      • 可以指定位置插入任意数量的项，指定三个参数，第一个参数：起始位置，第二个参数：0（删除0项），第三个参数：插入的内容。可以插入多项，比如splice(1,0,'hello','world')从索引为1的地方开始插入’hello’和’world’。
    3. 替换：
      • 结合前面两条可以得到此项，比如从起始位置删除2条，再加入2条，就成了替换了splice(1,2,'hello','world')

splice()会返回删除的数组

1
2
3
4
5
6
7
var colors = ['red','blue','pink','black','white'];
var removed1 = colors.splice(1,2);//['blue','pink']
console.log( colors );//['red','black','white']
var removed2 = colors.splice(0,0,'hello');//[]
console.log( colors );//['hello','red','black','white']
var removed3 = colors.splice(1,1,'world');//['red']
console.log( colors );//['hello','world','black','white']

位置方法

ES5为数组实例添加了两个位置方法：indexOf()和lastIndexOf()。这两个方法接收两个参数：要查找的项和（可选的）表示查找位置起点的索引。

在没有找到的情况下会返回-1，在比较参数的时候会使用全等，也就是用===进行比较

indexOf()

重数组开头查找，然后返回查找到的第一个字符在数组中的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var numbers = [1,2,3,4,5,4,3,2,1];
console.log( numbers.indexOf(4) );// 3
console.log( numbers.lastIndexOf(4) )//5
console.log( numbers.indexOf(4,4) )//5
console.log( numbers.lastIndexOf(4,4) )//3
var person = { name: 'liu' };
var people = [{ name: 'liu' }];
var morePeople = [person];
console.log( people.indexOf(person) );//-1
console.log( morePeople.indexOf(person) )//0

迭代方法

  • ES5数组定义了5个迭代方法：

    • every()
    • filter()
    • forEach()
    • map()
    • some()

  • 这些方法会接收3个参数：

    1. 数组的值
    2. 该项在数组中的位置
    3. 数组对象本身

every()

对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every( function(item, index, array){
    return (item > 2);
})
console.log( everyResult );//false

some()

对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some( function(item, index, array){
    return (itme > 2);
})
console.log(someResult);//

some()和every()比较像，一个是有一项返回true则返回true，一个必须所有都为true，则返回true

filter()

对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter( function( item, index, array) {
    return ( item > 2);
})
console.log( filterResult);//[3,4,5,4,3]

这个方法对查询符合某些条件的所有数组项非常有用

map()

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

1
2
3
4
5
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter( function( item, index, array) {
    return  item * 2;
})
console.log( filterResult);//[2,4,6,8,10,8,6,4,2]

这个方法适合创建包含的项与另一个数组一一对应的数组

forEach()

对数组中的每一项运行给定函数，这个方法没有返回值

1
2
3
4
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach( function( item, index, array){
    //执行操作
})

支队数组中的每项运行传入的函数，和for类似

归并方法

ES5新增的两个归并方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。

reduce()是从第一项开始操作，而reduceRight()是从最后一项开始操作。

  • 他们的函数会接收4个参数：
    1. 前一个值
    2. 当前值
    3. 项的索引
    4. 数组对象

这个函数返回的任何值都会作为第一个参数自动传给下一项

第一次运算会从第二项开始，第一项的值会作为前一个值来运算

1
2
3
4
5
6
7
8
var values = [1,2,3,4,5];
var number = 0;
var sum = values.reduce( function( prev, cur, index, array){
    number++;
    return prev + cur
})
console.log(sum);//15
console.log(number);//4

number最后值为4，比数组的length少1

我，曼妥思，打钱