常用的数组方法归类及其详解

       最近的项目中，对数组的相关操作增多，每次都得查，索性自己参考官方文档总结一下常用的方法，方便自己查，也希望能帮到搜索到此文章的你。

       为了方便记忆，可以对数组的操作可以分为以下几类：增加、删除、子数组、数组排序、数组转换、位置方法、迭代方法以及缩小方法。下面将对相应的功能进行详细的介绍并举例子说明。

一、增加

1、push

       定义和用法：

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 注意： 新元素将添加在数组的末尾。 注意： 此方法改变数组的长度。

       语法：

array.push(item1, item2, ..., itemX) item1，item2…想要添加的数组元素。

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi","Lemon","Pineapple") 得到的新数组： var fruits = ["Banana", "Orange", "Apple", "Mango","Kiwi","Lemon","Pineapple"];

2、unshift

       定义和用法：

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 注意： 该方法将改变数组的数目。

       语法：

array.unshift(item1,item2, ..., itemX) item1，item2…向数组其实位置添加的内容。

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon","Pineapple"); 得到的新数组： var fruits = ["Lemon","Pineapple","Banana", "Orange", "Apple", "Mango"];

3、concat

       定义和用法：

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

       语法：

array1.concat(array2,array3,...,arrayX) array2，array3…表示想要连接的数组

       实例：

var hege = ["Cecilie", "Lone"]; var stale = ["Emil", "Tobias", "Linus"]; var children = hege.concat(stale,kai); 得到的新数组： children=["Cecilie", "Lone","Emil", "Tobias", "Linus"]

 

二、删除

1、pop

       定义和用法：

pop() 方法用于删除数组的最后一个元素并返回删除的元素。 注意：此方法改变数组的长度！

       语法：

array.pop()

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); 返回的新数组： fruits = ["Banana", "Orange", "Apple"];

2、shift

       定义和用法：

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 注意： 此方法改变数组的长度！

       语法：

array.shift()

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.shift() 返回的新数组： fruits = ["Orange", "Apple", "Mango"];

 

三、子数组

1、splice

       定义和用法：

splice() 方法用于插入、删除或替换数组的元素。 注意：这种方法会改变原始数组！。

       语法：

array.splice(index,howmany,item1,.....,itemX) index（必需）：该参数是开始插入和（或）删除的数组元素的索引，必须是数字。，规定从何处添加/删除。 howmany（必需）：规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 item1, ..., itemX（可选）：想要添加到数组的新元素。

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2,0,"Lemon","Kiwi"); 返回的新数组： fruits = ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"];

2、slice

       定义和用法：

slice() 方法可从已有的数组中返回选定的元素。 slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 注意： slice() 方法不会改变原始数组。

       语法：

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

       实例：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1,3); 返回一个新数组： Citrus =  ["Orange", "Lemon"];

 

四、数组排序

1、reverse

       定义和用法：

reverse() 方法用于颠倒数组中元素的顺序。

       语法：

array.reverse()

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.reverse(); 返回的新数组： fruits = ["Mango ", " Apple ", " Orange ", " Banana "];

 

2、sort

定义和用法：

sort() 方法用于对数组的元素进行排序。 排序顺序可以是字母或数字，并按升序或降序。 默认排序顺序为按字母升序。 注意：当数字是按字母顺序排列时"40"将排在"5"前面。 使用数字排序，你必须通过一个函数作为参数来调用。 函数指定数字是按照升序还是降序排列。 注意： 这种方法会改变原始数组！。

       语法：

array.sort(sortfunction) sortfunction（可选）：规定排序的顺序，必须是函数

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); 返回的新数组： fruits = ["Apple ", " Banana ", " Mango ", " Orange "];

 

五、数组转换

1、tostring

定义和用法：

toString() 方法可把数组转换为字符串，并返回结果。 注意： 数组中的元素之间用逗号分隔。

       语法：

array.toString()

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.toString(); 返回的字符串： Banana,Orange,Apple,Mango

 

2、toLocaleString

定义和用法：

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

       语法：

Date.toLocaleString()

       实例：

var d=new Date(); var n=d.toLocaleString(); 返回的字符串： 2018/7/27 上午12:27:56

 

3、join

定义和用法：

join() 方法用于把数组中的所有元素转换一个字符串。 元素是通过指定的分隔符进行分隔的。

       语法：

array.join(separator) separator（可选）：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var energy = fruits.join(“=”); 返回的字符串： Banana=Orange=Apple=Mango

 

六、位置方法

1、indexOf

       定义和用法：

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。 如果在数组中没找到字符串则返回 -1。

       语法：

array.indexOf(item,start) item（必需）：要查找的元素。 start（可选）：规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.indexOf("Apple"); a返回的结果： 2

 

2、lastIndexOf

定义和用法：

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。 如果要检索的字符串值没有出现，则该方法返回 -1。 该方法将从尾到头地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一个字符在 stringObject 中的位置。stringObject 中的字符位置是从 0 开始的。

       语法：

array.lastIndexOf(item,start) item（必需）：规定需检索的字符串值。 start（可选）：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

       实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = fruits.lastIndexOf("Apple"); 返回的a的值： 2

 

七、迭代方法

1、every

定义和用法：

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。 every() 方法使用指定函数检测数组中的所有元素： *如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。 *如果所有元素都满足条件，则返回 true。 注意： every() 不会对空数组进行检测。 注意： every() 不会改变原始数组。

       语法：

array.every(function(currentValue,index,arr), thisValue) function(currentValue, index,arr)（必需）：函数，数组中的每个元素都会执行这个函数。 currentValue（必需）：当前元素的值。 index（可选）：当前元素的索引值。 arr（可选）：当前元素属于的数组对象。 thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"。

       实例：

var ages = [32, 33, 16, 40]; function checkAdult(age) {     return age >= 18; } function myFunction() {     document.getElementById("demo").innerHTML = ages.every(checkAdult); } 输出的结果为： false

 

2、filter

定义和用法：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意： filter() 不会对空数组进行检测。 注意： filter() 不会改变原始数组。

       语法：

array.filter(function(currentValue,index,arr), thisValue) function(currentValue, index,arr)（必需）：函数，数组中的每个元素都会执行这个函数。 currentValue（必需）：当前元素的值。 index（可选）：当前元素的索引值。 arr（可选）：当前元素属于的数组对象。 thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"。

       实例：

var ages = [32, 33, 16, 40]; function checkAdult(age) {     return age >= 18; } function myFunction() {     document.getElementById("demo").innerHTML = ages.filter(checkAdult); } 返回的新数组： [32,33,40]

3、forEach

定义和用法：

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。 注意: forEach() 对于空数组是不会执行回调函数的。

       语法：

array.forEach(function(currentValue, index, arr), thisValue) function(currentValue, index,arr)（必需）：函数，数组中的每个元素都会执行这个函数。 currentValue（必需）：当前元素的值。 index（可选）：当前元素的索引值。 arr（可选）：当前元素属于的数组对象。 thisValue（可选）：传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值。

       实例：

<button οnclick="numbers.forEach(myFunction)">点我</button>  <p>数组元素总和：<span id="demo"></span></p>  <script> var sum = 0; var numbers = [65, 44, 12, 4];  function myFunction(item) {     sum += item;     demo.innerHTML = sum; } </script> 返回的结果为： 125

4、map

定义和用法：

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意： map() 不会对空数组进行检测。 注意： map() 不会改变原始数组。

       语法：

array.map(function(currentValue,index,arr), thisValue) function(currentValue, index,arr)（必需）：函数，数组中的每个元素都会执行这个函数。 currentValue（必需）：当前元素的值。 index（可选）：当前元素的索引值。 arr（可选）：当前元素属于的数组对象。 thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"。

       实例：

var numbers = [4, 9, 16, 25]; function myFunction() {     x = document.getElementById("demo")     console.log(numbers.map(Math.sqrt)); } 返回的新数组： [2,3,4,5]

 

5、some

定义和用法：

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。 some() 方法会依次执行数组的每个元素： *如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。 *如果没有满足条件的元素，则返回false。 注意： some() 不会对空数组进行检测。 注意： some() 不会改变原始数组。

       语法：

array.some(function(currentValue,index,arr),thisValue) function(currentValue, index,arr)（必需）：函数，数组中的每个元素都会执行这个函数。 currentValue（必需）：当前元素的值。 index（可选）：当前元素的索引值。 arr（可选）：当前元素属于的数组对象。 thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"。

       实例：

var ages = [3, 10, 18, 20]; function checkAdult(age) {     return age >= 18; } function myFunction() {     document.getElementById("demo").innerHTML = ages.some(checkAdult); } 返回的值为： true

 

八、缩小方法

1、reduce

定义和用法：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 可以作为一个高阶函数，用于函数的 compose。 注意: reduce() 对于空数组是不会执行回调函数的。

       语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue) function(total,currentValue, index,arr)（必需）：用于执行每个数组元素的函数。 函数参数。 total（必需）：初始值, 或者计算结束后的返回值。 currentValue（必需）：当前元素。 currentIndex（可选）：当前元素的索引。 arr（可选）：当前元素所属的数组对象。 initialValue（可选）：传递给函数的初始值。

       实例：

var numbers = [65, 44, 12, 4]; function getSum(total, num) {     return total + num; } function myFunction(item) {     document.getElementById("demo").innerHTML = numbers.reduce(getSum); } 返回的结果为： 125

 

2、reduceRight

定义和用法：

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。 注意: reduce() 对于空数组是不会执行回调函数的。

       语法：

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) function(total,currentValue, index,arr)（必需）：用于执行每个数组元素的函数。 函数参数。 total（必需）：初始值, 或者计算结束后的返回值。 currentValue（必需）：当前元素。 currentIndex（可选）：当前元素的索引。 arr（可选）：当前元素所属的数组对象。 initialValue（可选）：传递给函数的初始值。

       实例：

var numbers = [65, 44, 12, 4]; function getSum(total, num) {     return total + num; } function myFunction(item) {     document.getElementById("demo").innerHTML = numbers.reduceRight(getSum); } 返回的结果为： 125

 

*注：迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。