JavaScript数组(Array)的方法

一、数组方法

array.concat(item....)

concat会产生一个新数组，包含array数组的浅复制，并把多个参数item附加在新数组后。

var a = [1,2,3];

var b = [4,5,6];

var c = a.concat(7,8); //[1,2,3,7,8]
var d = a.concat(b); //[1,2,3,4,5,6]
var e = a.concat(b,7);//[1,2,3,4,5,6,7]

array.join(separator)

** join**方法吧一个**array**构造成一个字符串，现将array中每个元素构造成一个字符串，接着用separator分隔符把它们连接在一起，默认是 **“,”**，若想要无间隔连接，使用空字符串作用separator.

注：比+运算符快

var a = [1,2,3];
var b = ["a", "b", "c"];

var c = a.join('-'); //"1-2-3"
var d = b.join(''); // "abc";
var e = a.join(); // "1,2,3"

array.slice(start, end)

   slice方法：对array中的一段做浅复制，不改变原数组。

 首先复制array[start],一直复制到array[end]为止， **end**参数可选， 默认值是该数组的长度array.length; 

如果参数中有一个是负数，array.length会和他们相加，使其变为非负数。

如果start大于等于array.length,得到的是一个空数组。

var a = ["a", "b", "c"];
var b = a.slice(0,1); //b是['a']
var c = a.slice(1); //c是['b','c']
var d = a.slice(4); //d是新数组[]
var e = a.slice(-1); //e是['c']

array.splice(start, deleteCount, item...)

    splice:从array中移除一个或者多个元素，并用新的item替换它们。返回一个包含被移除元素的数组。

主要用处：从一个数组中删除元素。

• start从array中移除元素的起始位置，

• deleteCount是要移除的元素个数；

• 额外的参数会被当做item插入被移除元素的位置上。

  var a = ["a", "b", "c"]; var b = a.splice(1,1, 'ache', 'bug'); //a是['a', 'ache', 'bug','c'] //b是['b']

array.reverse();

reverse:反转array例的元素顺序，并返回array本身

var a = ["a", "b", "c"];
var b = a.reverse();
//a,b都是是['c','b','a']

array.sort(comparefn)

sort:对数组内容进行排序

comparefn：比较函数，应该接受两个参数，如果这两个参数比较的结果：

• 0：两个参数相等
• 负数： 第一个参数排在前面 升序排列
• 正数：第二个参数排在前面 降序排列

comparefn不传值得时候，不能正确的给一组数字排序

var a = [4, 8, 25,2,16,43];
a.sort(); 
// a是[16, 2, 25, 4, 43, 8]

JavaScript的默认比较函数把要被排序的元素都视为字符串，不能智能检测数组中的元素类型。当比较数字时，会将其转化为字符串，导致上面的效果。

var a = [4, 8, 25,2,16,43];
a.sort(function(a,b){
    return a-b
});
//a是[2, 4, 8, 16, 25, 43]

array.pop()

pop:把数组类似于堆栈工作，pop方法移除**array**中最后一个元素并返回该元素。如果array是empty，则返回undefined。

var a = ["a", "b", "c"];
var b = a.pop(); // a为：['a','b'], b为：'c' 

实现：

Array.method('pop', function(){
    return this.splice(this.length-1, 1)[0];
});

array.push(item...)

push：把一个或多个参数item追加到array数组的尾部，与concat不同的是，会改变原数组。若item是一个数组，则将item数组中的每一项追加到array数组尾部。并返回array数组新长度。

var a = ["a", "b", "c"];
var c = ['4', '5'];

var b = a.push(...c, 'd', 'e', 'f'); // a为：["a", "b", "c",''4', '5',d', 'e', 'f'], b为：8

实现:

Array.method('push', function(){
    this.splice.apply(this,[this.length, 0].concat(...arguments));
    return this.length;});

array.shift()

shift:移除数组第一个元素并返回该元素。若数组为空，则返回undefined，shift比pop慢。

var a = ["a", "b", "c"];
var b = a.shift(); //a为：["b", "c"], b为：'a'

实现：

Array.method('shift', function(){
    return this.splice(0,1)[0];
})

array.unshift(item...)

unshift：把一个或多个参数item添加到array数组开始部分。返回array数组的新length;

var a = ["a", "b", "c"];
var b = ['d', 'e'];
var c = a.unshift(...b, 'g'); //a为：["a", "b", "c",'d', 'e','g'], b为：6

实现：

Array.method('unshift', function(){
    this.splice.apply(this, [0, 0].concat(...arguments));
    return this.length;
})

二、数组遍历

array.forEach(function)

遍历数组：为每个数组元素调用一次函数（回调函数）

该函数接受 3 个参数：

• 项目值

• 项目索引

• 数组本身

  var text = ""; var a = ["a", "b", "c"];a.forEach((item, index, a)=>{ text += item +"-" }); //test 为 "a-b-c-"

array.map(function)：不会更改原始数组

map() 方法用处：

• 通过对每个数组元素执行函数来创建新数组。

• 不会对没有值的数组元素执行函数。

• 不会更改原始数组， 返回新数组。

参数为执行函数，执行函数的三个参数与forEach一样：项目值，索引，数组本身

var arr = [1, 2, 3];
var newArr = arr.map((item, index, arr)=>{ 
    return item *2;
});
//newArr为：[2,4,6], arr为：[1, 2, 3]

array.filter(function)：数组过滤

filter() 方法创建一个包含通过测试的数组元素的新数组。

参数为一个过滤函数， 该函数参数：项目值，索引，数组本身

var arr = [1, 2, 3, -1, 0];
var newArr = arr.filter((item, index, arr)=>{ 
    return item > 0;
});
//newArr为： [1, 2, 3], arr为：[1, 2, 3, -1, 0]

array.reduce(function(){}, initialValue)

reduce() 方法的作用：

• 在每个数组元素上运行函数，以生成（减少它）单个值。
• 在数组中从左到右工作。另请参见 reduceRight（）。
• 不会减少原始数组。

参数：

• 第一个参数：执行函数（function）

      该函数有四个参数：

• 总数（累加器，当前值，当前索引，原数组）

• 项目值（当前值）

• 项目索引（当前所有）

• 数组本身（元数组）

• 第二个参数：第二个参数是回调函数的第一个参数累加器的初始值 （initialValue） 可省略。

注意：当初始值省略，那个初始值就是原数组的第一个元素，计算从第二个元素开始，给力初始值就是从第一个元素开始。

例：计算数组元素总和：

var numbers1 = [45, 4, 9, 16, 25];
//给定初始值，所以数组从第一个元素开始计算，所以毁掉函数总共允许的5次。
var sum = numbers1.reduce((total, value, index, array)=>{
    return total + value;
}, 100);
//sum为：199 

//因为没给定初始值，所以累加器total的初始值为数组的第一个元素，所以reduce回调函数执行了4次var sum1 = numbers1.reduce((total, value, index, array)=>{
    return total + value;
});
//sum1:99

array.reduceRight()

与reduce()功能类似， 只不过reduceRight()计算是从数组右往左计算。

例：计算数组元素总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction,1);

function myFunction(total, value) {
  return total + value;
}
//sum为：100

array.every(function)

every()方法检查所有数组值是否通过测试。返回值是一个bool值

参数为一个检查函数（回调函数）， 此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

例：判断数组中是否每项元素都大于18

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}
//allOver18为：false

array.some()

some() 方法检查某些数组值是否通过了测试。返回值是bool值

与every()接参数一样.

例：这个例子检查某些数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
//allOver18 为true

array.indexOf(item, start))

indexOf() 方法在数组中搜索元素值并返回其位置。

参数：

item

必需。要检索的项目。

start

可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

注：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a为0 

var b = fruits.indexOf("Apple", 1);
//b为2

array.lastIndexOf()

lastIndexOf() 查找元素最后一次出现的位置，并返回其位置。

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a为2

array.find(function)

find() 方法返回通过测试函数的第一个数组元素的值。

请注意此测试函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

例：查找数组中大于18的第一个元素的值

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
//first为25

array.findIndex(function)

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

请注意此测试函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子查找大于 18 的第一个元素的索引：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}
//first 为3

常见数组方法按照是否会修改原数组进行分类

1. 修改器方法

下面的这些方法会改变调用它们的对象自身的值，返回数组本身：

• Array.prototype.copyWithin()

在数组内部，将一段元素序列拷贝到另一段元素序列上，覆盖原有的值。

• Array.prototype.fill()

将数组中指定区间的所有元素的值，都替换成某个固定的值。

• Array.prototype.pop()

删除数组的最后一个元素，并返回这个元素。

• Array.prototype.push()

在数组的末尾增加一个或多个元素，并返回数组的新长度。

• Array.prototype.reverse()

颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。

• Array.prototype.shift()

删除数组的第一个元素，并返回这个元素。

• Array.prototype.sort()

对数组元素进行排序，并返回当前数组。

• Array.prototype.splice()

在任意的位置给数组添加或删除任意个元素。

• Array.prototype.unshift()

在数组的开头增加一个或多个元素，并返回数组的新长度。

2. 访问方法

下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

• Array.prototype.concat()

返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。

• Array.prototype.includes()

判断当前数组是否包含某指定的值，如果是返回 true，否则返回 false。

• Array.prototype.join()

连接所有数组元素组成一个字符串。

• Array.prototype.slice()

抽取当前数组中的一段元素组合成一个新数组。

• Array.prototype.toSource()

返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 Object.prototype.toSource() 方法。

• Array.prototype.toString()

返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 Object.prototype.toString() 方法。

• Array.prototype.toLocaleString()

返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 Object.prototype.toLocaleString() 方法。

• Array.prototype.indexOf()

返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

• Array.prototype.lastIndexOf()

返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

迭代方法

在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。

Array.prototype.forEach()

为数组中的每个元素执行一次回调函数。

Array.prototype.entries()

返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。

Array.prototype.every()

如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false。

Array.prototype.some()

如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。

Array.prototype.filter()

将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

Array.prototype.find()

找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 undefined。

Array.prototype.findIndex()

找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 -1。

Array.prototype.keys()

返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。

Array.prototype.map()

返回一个由回调函数的返回值组成的新数组。

Array.prototype.reduce()

从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

Array.prototype.reduceRight()

从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

Array.prototype.values()

返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。

Array.prototype[@@iterator]()

和上面的 values() 方法是同一个函数。