# Javascript中Array方法的总结

## 新建数组

``````/*方法一*/
var a = new Array(1,2,3);
/*方法二*/
var b = [1,2,3];
/*方法三（ES6新增）*/
var c = Array.of(1,2,3);``````

`Array.of()`是ES6中新增的将一组值转换为数组的方法，该方法的出现时为了弥补构造函数`Array()`因为参数不同导致的不同行为。

``````Array()         //[]
Array(3)        //[ , , ]
Array(1,2,3)    //[1,2,3]``````

## 数组的检测

``````function checkArray(arr) {
if(typeof Array.isArray){
return Array.isArray(arr);
}else{
return Object.prototype.toString.call(arr)==='[object Array]';
}
}``````

## 数组中的方法：

### 更改原数组

push()

unshift()

pop()

shift()

#### 排序

reverse()

``````var values = [1,2,3,4,5];
values.reverse();
console.log(values); // =>5,4,3,2,1``````

sort()

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

``````/*升序

function compare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else {
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values);``````

``````function compare(value1,value2){
return value2 - value1;
}``````

#### copyWithin()

• target(必需)：从该位置开始替换数据

• start (可选)：从该位置开始读取数据，默认为0。如果为负值，表示倒数

• end (可选)：到该位置前停止读取数据，默认等于数组长度。如果为负值表示倒数

``````var a = [1,2,3];
var b = a.copyWithin(0);    // =>[1,2,3]
var c = a.copyWithin(0,1);  // =>[2,3,3]
var d = a.copyWithin(0,1,2);// =>[2,2,3]``````

### 不更改原素组，生成新数组

#### 截取

slice()

splice()

``````var colors =['red','green','blue'];
var removed =colors.splice(0,1);    //删除第一项
console.log(colors);                //green,blue
console.log(removed);               //redm,返回的数组中只包含一项

removed = colors.splice(1,0,'yellow','orange'); //从位置1开始插入两项
console.log(colors);                //green,yellow,orange,blue
console.log(removed);               //返回的是一个空数组

removed = color.splice(1,1,'red','purple');  //插入两项，删除一项
console.log(colors);                //green,yellow,purple,orange,blue
console.log(removed);               //返回yellow``````

#### 连接

concat()

``````var a = [1,2,3];
var b = a.concat('a','b',['c','d','e']);
console.log(a); // =>1,2,3
console.log(b);``````

#### 寻找

##### indexOf()、lastIndexOf()与includes()

`indexOf()``lastIndexOf()`用于查找数组中是否有该方法，如果有则返回该元素的位置，否则返回`-1`

1. 不够语义化

2. 它内部使用严格等于运算符`===`，导致了对`NaN`的误判。所以ES7新增`includes()`去克服这些缺点。

ES7新增
ES7中新增`includes()`方法，用于查找数组总是否包含某个元素，返回布尔值，接受两个参数 要查找的元素查找的起始位置

##### find()和findIndex()

find()

findIndex()

``````var a = [1,4,-5,10];
a.find((n)=> n<0);  // -5

var b = [1,5,10,15];
b.findIndex(function(value,index,arr){
return value > 9;
});//=>2``````

#### 迭代方法

ES5为数组定义了五个迭代方法

• every():对数组中的每一项运行给定的函数，如果该函数对每一项都返回`true`,则返回`true`

• some():对数组中每一项运行给定的函数，如果该函数对任一项返回`true`，则返回`true`

• filter():对数组中每一项运行给定的函数，返回该函数会返回`true`的项组成的数组

• forEach():对数组中的每一项运行给定的函数。没有返回值

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

#### 归并方法

##### reduce()

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

``````/*

*/
function union(o,p){
return extend(extend({},o),p);
}
var objects = [{x:1},{y:2},{z:3}];
var merged = objects.reduce(union); // =>{x:1,y:2,z:3}``````

``````var arr = 'abcdabcdadbc';
var info = arr.split('').reduce((p,k) => (p[k]++ || (p[k] = 1), p), {});
console.log(info); //=> Object {a: 3, b: 3, c: 3, d: 3}``````

#### join()

`Array.join()`方法将数组中的所有元素都转化为字符串并连接起来，返回最后生成的字符串。可以指定一个可选的字符串在生成的字符串中分隔数组的各个元素，如不指定，默认用逗号隔开。

#### fill()

`fill()`方法用于使用给定的值填充数组。

``new Array(3).fill(7); //=>[7,7,7]``

## 转换为数组的方法(ES6新增)

#### Array.from();

``````var a = {
0:'li',
1:'li',
2:'li',
length:3
};
console.log(Array.from(a)); // => ['li','li','li'];``````
``Array.from([1,2,3],(x)=>x*x); // =>1,4,9``

#### 扩展运算符（...）

``````//arguments对象
function foo(){
var args = [...arguments];
}
//nodelist
[...document.querySelectorAll('div')];``````

2.4k 声望
194 粉丝
0 条评论