More than code
Welcome to the website

JavaScript数组相关方法归纳

1. concat()

定义和用法:

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法:

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

示例:

合并三个数组的值

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);

输出结果:

Cecilie,Lone,Emil,Tobias,Linus,Robin

2. copyWithin()  (ECMAScript 6)

定义和用法:

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

语法:

array.copyWithin(target, start, end)
参数 描述
target 必需。复制到指定目标索引位置。
start 必需。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)

示例:

复制数组的前面两个元素到第三和第四个位置上:

var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; 
fruits.copyWithin(2, 0, 2);

输出结果:

Banana,Orange,Banana,Orange,Kiwi,Papaya

3. 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 = [32331640];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

输出结果:

false

4. fill()  (ECMAScript 6)

定义和用法:

fill() 方法用于将一个固定值替换数组的元素。

语法:

array.fill(value, start, end)
参数 描述
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)

示例:

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
fruits.fill("Runoob", 2, 4);

输出结果:

Banana,Orange,Runoob,Runoob

 5. 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 = [32331640];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

输出结果:

32,33,40

6. find()   (ECMAScript 6)

定义和用法:

find() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素。

find() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

语法:

array.find(function(currentValue, index, arr),thisValue)
参数 描述
function(currentValue, index,arr) 必需。数组每个元素需要执行的函数。
函数参数:

参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
thisValue 可选。 传递给函数的值一般用 “this” 值。
如果这个参数为空, “undefined” 会传递给 “this” 值
返回值: 返回符合测试条件的第一个数组元素索引值,如果没有符合条件的则返回 undefined

示例:

var ages = [3, 10, 18, 20]; 
function checkAdult(age) { 
  return age >= 18;
} 
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

输出:

18

7.  findIndex()  (ECMAScript 6)

定义和用法:

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置,如果没有符合条件的则返回 -1。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

  • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组,函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

语法:

array.findIndex(function(currentValue, index, arr), thisValue)
参数 描述
function(currentValue, index,arr) 必须。数组每个元素需要执行的函数。
函数参数:

参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
thisValue 可选。 传递给函数的值一般用 “this” 值。
如果这个参数为空, “undefined” 会传递给 “this” 值

示例:

var ages = [3, 10, 18, 20]; 
function checkAdult(age) {
  return age >= 18;
} 
function myFunction() {
  document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

输出结果:

2

8. forEach()

定义和用法:

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。返回值:undefined

注意: forEach() 对于空数组是不会执行回调函数的。

语法:

array.forEach(function(currentValue, index, arr), thisValue)
参数 描述
function(currentValue, index, arr) 必需。 数组中每个元素需要调用的函数。
函数参数:

参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 “this” 值。
如果这个参数为空, “undefined” 会传递给 “this” 值

示例:

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p> 
<script>
 demoP = document.getElementById("demo");
 var numbers = [4, 9, 16, 25];
 function myFunction(item, index) { demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; } 
</script>

输出结果:

index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

9. includes()   (ECMAScript 6)

定义和用法:

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
参数 描述
searchElement 必须。需要查找的元素值。
fromIndex 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

示例:

let site = ['runoob', 'google', 'taobao']; 
site.includes('runoob'); // true  
site.includes('baidu'); // false

10.  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");//2

11. join()

定义和用法:

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。

语法:

array.join(separator)
参数 描述
separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();

输出结果:

Banana,Orange,Apple,Mango

示例:

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

12. lastIndexOf()

定义和用法:

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

其他同indexOf()。

13. map()

定义和用法:

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意: map() 不会对空数组进行检测。

注意: map() 不会改变原始数组。

语法:

array.map(function(currentValue,index,arr), thisValue)
参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数
函数参数:

参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,”this” 的值为 “undefined”

 14. pop()

定义和用法:

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

注意:此方法改变数组的长度!

语法:

array.pop()

15. push()

定义和用法:

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

注意: 新元素将添加在数组的末尾。

注意: 此方法改变数组的长度。

语法:

array.push(item1item2, ..., itemX)
参数 描述
item1item2, …, itemX 必需。要添加到数组的元素。

16. unshift()

定义和用法:

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

其他同push()

17. reduce()

定义和用法:

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

注意: 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

18. reduceRight()

定义和用法:

reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

19. reverse()

定义和用法:

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

语法:

array.reverse()

20. shift()

定义和用法:

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素(移除的元素)的值。

语法:

array.shift()

 21. slice()

定义和用法:

slice() 方法可从已有的数组中返回选定的元素。返回一个新的数组。

slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

注意: slice() 方法不会改变原始数组。

语法:

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

22. 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 = [3101820];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);//true
}

23. sort()

定义和用法:

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字,并按升序或降序。

默认排序顺序为按字母升序。

注意:当数字是按字母顺序排列时”40″将排在”5″前面。

使用数字排序,你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

这些说起来可能很难理解,你可以通过本页底部实例进一步了解它。

注意: 这种方法会改变原始数组

语法:

array.sort(sortfunction)
参数 描述
sortfunction 可选。规定排序顺序。必须是函数。

示例:

数字排序(数字和升序):

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

 24. splice()

定义和用法:

splice() 方法用于插入、删除或替换数组的元素。

注意:这种方法会改变原始数组

语法:

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

示例:

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

 25. toString()

定义和用法:

toString() 方法可把数组转换为字符串,并返回结果。

注意: 数组中的元素之间用逗号分隔。

语法:

array.toString()

示例:

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

26. valueOf()

定义和用法:

valueOf() 方法返回 Array 对象的原始值

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

注意: valueOf() 方法不会改变原数组。

语法:

array.valueOf()

示例:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();//["Banana", "Orange", "Apple", "Mango"]
赞(0) 打赏
未经允许不得转载:李帅帅空间 » JavaScript数组相关方法归纳

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏