javaScript常用数组方法总结

数组是javaScript非常重要的数据结构，任何一位前端工程都应该也是必须掌，握，今天整理了常用的方法。做得不好，仅供参考

改变自身值的方法(9个)

push、pop、reverse、shift、sort、splice、unshift，以及两个ES6新增的方法copyWithin 和 fill，均会改变自身的值。

push()

向数组的末尾添加一个或更多元素，并返回新的长度。如果是栈的话，这个过程就是栈顶压入。

语法：

arrayObject.push(newelement1,newelement2,….,newelementX)

var arr=new Array(); //使用构造函数创建数组
count=arr.push("red","blue"); //push()返回数组长度
 console.log("count="+count);   //count=2  
count=arr.push("black");//count=3
console.log(arr) // ["red", "blue", "black"]

pop()

方法用于删除并返回数组的最后一个元素。如果是栈的话，这个过程就是栈顶弹出。

var array = ["cat", "dog", "cow", "chicken", "mouse"]; 
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"] 
console.log(item); // mouse

reverse()

方法用于颠倒数组中元素的顺序，该方法返回对数组的引用。

var array = [1,2,3,4,5]; 
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true

shift()

方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5] 
console.log(item); // 1

sort()

方法用于对数组的元素进行排序。该方法返回对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array);// true
array = [10, 1, 3, 20]; 
var array3 = array.sort();
console.log(array3); // [1, 10, 20, 3]

splice()

方法向/从数组中添加/删除项目，然后返回被删除的项目。

语法：arr.splice(start,deleteCount[, item1[, item2[, …]]])

start 指定从哪一位开始修改内容。如果超过了数组长度，则从数组末尾开始添加内容；如果是负值，则其指定的索引位置等同于 length+start (length为数组的长度)，表示从数组末尾开始的第 -start 位。

deleteCount 指定要删除的元素个数，若等于0，则不删除。这种情况下，至少应该添加一位新元素，若大于start之后的元素总和，则start及之后的元素都将被删除。

itemN 指定新增的元素，如果缺省，则该方法只删除数组元素。

返回值 由原数组中被删除元素组成的数组，如果没有删除，则返回一个空数组

var array = ["apple","boy"]; 
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"] ,可见是从数组下标为1的元素开始删除,并且删除一个元素,由于itemN缺省,故此时该方法只删除元素 
array = ["apple","boy"]; 
splices = array.splice(2,1,"cat"); 
console.log(array); // ["apple", "boy", "cat"] 
console.log(splices); // [], 可见由于start超过数组长度,此时从数组末尾开始添加元素,并且原数组不会发生删除行为 
array = ["apple","boy"]; 
splices = array.splice(-2,1,"cat");
console.log(array); // ["cat", "boy"] 
console.log(splices); // ["apple"], 可见当start为负值时,是从数组末尾开始的第-start位开始删除,删除一个元素,并且从此处插入了一个元素 
array = ["apple","boy"];
splices = array.splice(-3,1,"cat"); 
console.log(array); // ["cat", "boy"]
console.log(splices); // ["apple"], 可见即使-start超出数组长度,数组默认从首位开始删除 
array = ["apple","boy"]; 
splices = array.splice(0,3,"cat"); 
console.log(array); // ["cat"] 
console.log(splices); // ["apple", "boy"], 可见当deleteCount大于数组start之后的元素总和时,start及之后的元素都将被删除

unshift()

方法可向数组的开头添加一个或更多元素，并返回新的长度。

var array = ["red", "green", "blue"];
var length = array.unshift("yellow"); 
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4
copyWithin()在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

它接受三个参数。

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

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

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

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)/
/ [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束，复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

fill()

该方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]
注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。


let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr// [[5], [5], [5]]

不会改变自身的方法(7个)

基于ES6，不会改变自身的方法一共有7个，分别为concat、join、slice、toString、toLocateString、indexOf、lastIndexOf

concat()

该方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被修改

使用concat可实现数组的浅复制（指向新的地址空间）

var array = [{a: 1}];
var array3 = array.concat();
console.log(array3); // [{a: 1}]
console.log(array3 === array); // false
console.log(array[0] === array3[0]); // true，新旧数组第一个元素依旧共用一个同一个对象的引用

join()

该方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

var array = [‘We’, ‘are’, ‘Chinese’]

console.log(array.join()); // >”We,are,Chinese”

console.log(array.join(‘+’)); // “We+are+Chinese” console.log(array.join(‘’)); // “WeareChinese”

slice()

该方法可从已有的数组中返回选定的元素；

语法：arrayObject.slice(start,end)

start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var array = [“one”, “two”, “three”,”four”, “five”];

console.log(array.slice()); // [“one”, “two”, “three”,”four”, “five”]

console.log(array.slice(2,3)); // [“three”]

该方法参数为空时，同concat方法一样，都是浅复制生成一个新数组

toString()

该方法可把数组转换为字符串，并返回结果。返回值与没有参数的 join() 方法返回的字符串相同。

var array = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]; 

var str = array.toString(); 

console.log(str); // Jan,Feb,Mar,Apr

toLocaleString()

类似toString()的变型，该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。

var array= [{name:’zz’}, 123, “abc”, new Date()];

var str = array.toLocaleString();

console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

indexOf()

该方法用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1。

var array = [‘abc’, ‘def’, ‘ghi’,’123’]; 

console.log(array.indexOf(‘def’)); // 1

 console.log(array.indexOf(‘def’,-1)); // -1 此时表示从最后一个元素往后查找,因此查找失败返回-1 

console.log(array.indexOf(‘def’,-4)); // 1 由于4大于数组长度,此时将查找整个数组,因此返回1 

console.log(array.indexOf(123)); // -1, 由于是严格匹配,因此并不会匹配到字符串’123’

lastIndexOf()

该方法用于查找元素在数组中最后一次出现时的索引，如果没有，则返回-1。

var str=”Hello world!”

console.log(str.lastIndexOf("Hello")) // 0

console.log(str.lastIndexOf("hello")) // 

-1console.log(str.lastIndexOf("world")) // 6

遍历方法(12个)

遍历方法一共有12个，分别为forEach、every、some、filter、map、reduce、reduceRight 以及ES6新增的方法entries、find、findIndex、keys、values。

forEach()

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

语法：arr.forEach(fn, thisArg)

fn 表示在数组每一项上执行的函数，接受三个参数：

value 当前正在被处理的元素的值

index 当前元素的数组索引

array 数组本身

thisArg 可选，用来当做fn函数内的this对象。

var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){
    array[index] = value * value;
    console.log(this.name); // cc被打印了三次
},obj);
console.log(array);//[1, 9, 25], 可见原数组改变了 
onsole.log(sReturn); // undefined, 可见返回值为undefined

every()

该方法对数组中的每一项运行给定的函数，如果该函数对一项都返回true，则返回true。（相当于逻辑与）

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。（相当于逻辑或）

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

filter()

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

var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){ 
   return value > 20;
}); 
console.log(array2); // [35, 80]

map()

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

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

reduce()

该方法接收一个方法作为累加器，数组中的每个值(从左至右) 开始合并，最终为一个值。

var array = [1, 2, 3, 4]; 
var s = array.reduce(function(previousValue, value, index, array){
   return previousValue * value;
},1);
console.log(s); // 24
 // ES6写法更加简洁
array.reduce((p, v) => p * v); // 24

语法：arr.reduce(fn, initialValue)

接收两个参数：一个在每一项上调用的函数和（可选）作为归并 基础的初始值。

而作为参数的函数接收四个参数：前一个值、当前值、项的索引值、数组对象，并且这个函数的任何返回值都会作为该函数的第一个参数自动传给下一项。

reduceRight()

该方法的作用和reduce()类似，只是方向相反，具体看下面例子：

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

entries()

返回一个数组迭代器对象，该对象包含数组中每个索引的键值对(es6)。

var array = ["a", "b", "c"];
var iterator = array.entries(); 
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value);// [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组末尾时, 再迭代就会返回undefined

find()

该方法用于找出第一个符合条件的数组成员,如果没有符合条件的成员，则返回undefined。

###findIndex()
find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){
    return value%2==0; // 返回偶数
}
function f2(value, index, array){ 
    return value > 20; 
} 
console.log(array.find(f)); //8
console.log(array.find(f2));//undefined
console.log(array.findIndex(f)); //4
console.log(array.findIndex(f2)); // -1

keys()

是对键名的遍历、values()是对键值的遍历，

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) { 
 console.log(elem);
}
 // 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) { 
  console.log(index, elem);
}// 0 "a"