JavaScript - Array 方法

不改变数组：

concat / join / toString / every / some / includes / filter / map / forEach / indexOf / lastIndexOf / find / findIndex / slice / entries / keys / from / isArray / valueOf / reduce / reduceRight

改变数组：

shift / unshift / pop / push / splice / sort / reverse / copyWithin / fill

出现版本

ES1

concat / join / toString / shift / unshift / pop / push / slice / splice / sort / reverse / valueOf

ES3

some

ES5

every / filter / map / forEach / indexOf / lastIndexOf / isArray / reduce / reduceRight

ES6

find / findIndex / entries / keys / from / copyWithin / fill

ES7

includes

1、concat()

[ES1] 定义和用法：

concat() 方法用于连接两个或多个数组。不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

array1.concat(array2, array3, ..., arrayX)

参数值

参数	描述
array2, array3, …, arrayX	必需。要连接的数组。

实例

var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var wagon = ["V60", "V90", "V90CC"];
var Volvo = sedan.concat(SUV, wagon);
console.log(Volvo) // ["S60", "S90", "XC40", "XC60", "XC90", "V60", "V90", "V90CC"]

2、join()

[ES1] 定义和用法：

join() 方法将数组作为字符串返回。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
如果对象是数组，则此函数返回 true，否则返回 false。
注意：该方法不改变原始数组。

array.join(separator)

参数值

参数	描述
separator	可选。要使用的分隔符。如果省略，元素用逗号分隔。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
console.log(energy ) // Banana and Orange and Apple and Mango

3、toString()

[ES1] 定义和用法：

toString() 方法返回包含所有数组值的字符串，以逗号分隔。
如果对象是数组，则此函数返回 true，否则返回 false。
注意：该方法不改变原始数组。

array.toString()

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.toString();
console.log(energy ) // Banana,Orange,Apple,Mango

4、every()

[ES5] 定义和用法：

every() 方法检查数组中的所有元素是否都通过了测试（被作为函数提供）。不对没有值的数组元素执行函数。
对数组中存在的每个元素执行一次函数：

• 如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
• 如果没有出现 false，every() 返回 true
  注意：该方法不改变原始数组

array.every(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

var ages = [32, 33, 12, 40];
var result;
function checkAdult(age) {
  return age >= 18
}
function myFunction() {
  result = ages.every(checkAdult);
  console.log(result) // false
}
myFunction() 

5、some()

[ES3] 定义和用法：

some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。
对数组中存在的每个元素执行一次函数：

• 如果找到函数返回true的数组元素，some() 返回真（并且不检查剩余值）
• 否则返回false
  注意：该方法对没有值的数组元素不执行函数。不改变原始数组

array.some(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

var ages = [32, 33, 12, 40];
var result;
function checkAdult(age) {
  return age >= 18
}
function myFunction() {
  result = ages.some(checkAdult);
  console.log(result) // true
}
myFunction() 

6、includes()

[ES7] 定义和用法：

includes() 方法确定数组是否包含指定的元素。
如果数组包含元素，则此方法返回 true，否则返回 false。
注意：该方法区分大小写，不支持Edge 13（及更早版本）

array.includes(element, start)

参数值

参数	描述
element	必需。要搜索的元素。
start	可选。默认 0。在数组中的哪个位置开始搜索。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var m= fruits.includes("Banana");
console.log(m) // true
var n = fruits.includes("Banana", 3);
console.log(n) // false

7、filter()

[ES5] 定义和用法：

filter() 方法创建数组，其中填充了所有通过测试的数组元素（作为函数提供）。不会对没有值的数组元素执行该函数。
注意：该方法不改变原始数组

array.filter(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

var ages = [32, 33, 12, 40];
var result;
function checkAdult(age) {
  return age >= 18
}
function myFunction() {
  result = ages.filter(checkAdult);
  console.log(result) // 32,33,40
}
myFunction() 

8、map()

[ES5] 定义和用法：

map() 方法使用为每个数组元素调用函数的结果创建新数组。按顺序为数组中的每个元素调用一次提供的函数。
对于没有值的数组元素，不执行forEach() 方法。
对没有值的数组元素不执行函数。
注意：该方法不改变原始数组

array.map(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction);
function myFunction(num) {
  return num * 10;
}
console.log(newArr) // [650, 440, 120, 40]

9、forEach()

[ES5] 定义和用法：

forEach() 方法按顺序为数组中的每个元素调用一次函数。
对于没有值的数组元素，不执行forEach() 方法。
注意：该方法不改变原始数组

array.forEach(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

let sum = 0;
const numbers = [65, 44, 12, 4];
numbers.forEach(myFunction);
function myFunction(item) {
  sum += item;
}
console.log(sum) // 125

10、indexOf()

[ES5] 定义和用法：

indexOf() 方法在数组中搜索指定项目，并返回其位置。
搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。
如果未找到该项目，则 indexOf() 返回 -1。
如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。

array.indexOf(item, start)

参数值

参数	描述
item	必需。要搜索的项目。
start	可选。默认 0。从哪里开始搜索。负值给定的位置将从结尾计数，然后搜索到最后。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.indexOf("Apple");
console.log(a) // 2
var b = fruits.indexOf("Apple", 4);
console.log(b) // 6

11、lastIndexOf()

[ES5] 定义和用法：

lastIndexOf() 方法在数组中搜索指定项目，并返回其位置。
搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索。
如果未找到该项目，则 lastIndexOf() 方法返回 -1。
如果要搜索的项目不止一次出现，lastIndexOf() 方法将返回最后一次出现的位置。

array.lastIndexOf(item, start)

参数值

参数	描述
item	必需。要搜索的项目。
start	可选。默认 0。从哪里开始搜索。负值的给定的位置从末尾计数，然后搜索到开头。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.lastIndexOf("Apple");
console.log(a) // 5
var b = fruits.lastIndexOf("Apple", 4);
console.log(b) // 3

12、find()

[ES6] 定义和用法：

find() 方法返回数组中第一个通过测试的元素的值（作为函数提供）。
对数组中存在的每个元素执行一次函数：

• 如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
• 否则返回 undefined
  注意：该方法不对空数组执行该函数，不改变原始数组，不支持IE

array.find(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

var ages = [15, 19, 12, 40];
var result;
function checkAdult(age) {
  return age >= 18
}
function myFunction() {
  result = ages.find(checkAdult);
  console.log(result) // 19
}
myFunction() 

13、findIndex()

[ES6] 定义和用法：

findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。
对数组中存在的每个元素执行一次函数：

• 如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）
• 否则返回 -1
  注意：该方法不会为没有值的数组元素执行函数，不改变原始数组，不支持IE

array.findIndex(function(currentValue, index, arr), thisValue)

参数值

参数	描述
function(currentValue, index, arr)	必需。为数组中的每个元素运行的函数。currentValue 必需。当前元素的值。index 可选。当前元素的数组索引。arr 可选。当前元素所属的数组对象
thisValue	可选。要传递给函数以用作其 “this” 值的值。如果此参数为空，则值 “undefined” 将作为其 “this” 值传递。

实例

var ages = [15, 19, 12, 40];
var result;
function checkAdult(age) {
  return age >= 18
}
function myFunction() {
  result = ages.findIndex(checkAdult);
  console.log(result) // 1
}
myFunction() 

14、shift()

[ES1] 定义和用法：

shift() 方法移除数组的第一项。
注意：该方法改变原始数组。

array.shift()

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
console.log(fruits) // ["Orange", "Apple", "Mango", "Kiwi"]

15、unshift()

[ES1] 定义和用法：

unshift() 方法将新项添加到数组的开头，并返回新的长度。
注意：该方法改变原始数组。

array.unshift(item1, item2, ..., itemX)

参数值

参数	描述
item1, item2, …, itemX	必需。要添加到数组开头的项。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits) // [Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]

16、pop()

[ES1] 定义和用法：

pop() 方法移除数组的最后一个元素，并返回该元素。
注意：该方法改变原始数组。

array.pop()

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
console.log(fruits) // ["Banana", "Orange", "Apple"]

17、push()

[ES1] 定义和用法：

push() 方法向数组末尾添加新项目，并返回新长度。会改变数组的长度。
注意：该方法改变原始数组。

array.push(item1, item2, ..., itemX)

参数值

参数	描述
item1, item2, …, itemX	必需。要添加到数组中的项目。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits) // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]

18、slice()

[ES1] 定义和用法：

slice() 方法以新的数组对象，返回数组中被选中的元素。方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。包含start下标，不包含end下标
注意：该方法不改变原始数组。

array.slice(start, end)

参数值

参数	描述
start	可选。整数，指定从哪里开始选择（第一个元素的索引为 0）。使用负数从数组的末尾进行选择。如果省略，则类似于 “0”。
end	可选。整数，指定结束选择的位置。如果省略，将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
console.log(fruits) // ["Orange", "Lemon"]

19、splice()

[ES1] 定义和用法：

splice() 方法向/从数组添加/删除项目，并返回删除的项目。
注意：该方法改变原始数组。

array.splice(index, howmany, item1, ....., itemX)

参数值

参数	描述
index	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, …, itemX	可选。要添加到数组中的新项目。

实例

var fruits1 = ["Banana", "Orange", "Apple", "Mango"];
fruits1.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits1) // ["Banana", "Orange", "Lemon", "Kiwi", "Mango"]

var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
fruits2.splice(2, 2);
console.log(fruits2) // ["Banana", "Orange"]

var fruits3 = ["Banana", "Orange", "Apple", "Mango"];
fruits3.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits3) // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

20、entries()

[ES6] 定义和用法：

entries() 方法返回带有键/值对的 Array Iterator 对象。
注意：该方法不改变原始数组，不支持IE

array.entries()

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var f = fruits.entries();
var result = ''
for (x of f) {
  result += x;
}
console.log(result) // 0,Banana1,Orange2,Apple3,Mango"

21、keys()

[ES6] 定义和用法：

keys() 方法返回带有数组键的 Array Iterator 对象。
注意：该方法不改变原始数组。

array.keys()

实例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
let text = "";
for (let x of keys) {
  text += x + "<br>";
}
document.body.innerHTML = text;
console.log(text) // 0<br>1<br>2<br>3<br>

22、sort()

[ES1] 定义和用法：

sort() 方法对数组的项目进行排序。排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。
默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。
这适用于字符串（"Apple" 出现在 "Banana" 之前）。但是，如果数字按字符串排序，则 "25" 大于 "100" ，因为 "2" 大于 "1"。
正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。
注意：该方法会改变原始数组。

array.sort(compareFunction)

参数值

参数	描述
compareFunction	可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数，例如：function(a, b){return a-b} sort() 方法比较两个值时，将值发送给比较函数，根据返回的（负、零、正）值对值进行排序。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits) // ["Apple", "Banana", "Mango", "Orange"]

23、reverse()

[ES1] 定义和用法：

reverse() 方法反转数组中元素的顺序。
注意：该方法改变原始数组。

array.reverse()

实例

// 升序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
console.log(points) // [1, 5, 10, 25, 40, 100]
// 降序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
console.log(points) // [100, 40, 25, 10, 5, 1]

24、from()

[ES6] 定义和用法：

from() 方法从具有 length 属性或可迭代对象的任何对象返回 Array 对象
注意：该方法不支持IE

Array.from(object, mapFunction, thisValue)

参数值

参数	描述
object	必需。需转换为数组的对象。
mapFunction	可选。对数组的每个项目调用的 map 函数。
thisValue	可选。执行 mapFunction 时用作 this 的值。

实例

var myArr = Array.from("ABCDEFG");
console.log(myArr ) // ["A", "B", "C", "D", "E", "F", "G"]

25、isArray()

[ES5] 定义和用法：

iisArray() 方法确定对象是否为数组。
如果对象是数组，则此函数返回 true，否则返回 false。

Array.isArray(obj)

参数值

参数	描述
object	必需。需测试的对象。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var isArr = Array.isArray(fruits);
console.log(isArr) // true

26、copyWithin()

27、fill()

28、reduce()

29、reduceRight()

30、valueOf()