快捷導(dǎo)航

常用的JavaScript數(shù)組方法

更新時(shí)間：2021年09月23日 08:56:57 作者：擁抱每一天

一說到JavaScript的數(shù)組，大家基本都能馬上想起pop()、push()、shift()、unshift()、indexof()等等，今天小編就給大家分享幾個(gè)開發(fā)中常用的js數(shù)組方法即他們的用法。需要的朋友可以參考下面文章的具體內(nèi)容

1、filter()

語法：

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

參數(shù)說明：
currentValue：當(dāng)前元素對(duì)象（必選）
index：當(dāng)前元素的索引值（可選）
arr：當(dāng)前元素屬于的數(shù)組對(duì)象（可選）
thisValue：對(duì)象作為該執(zhí)行回調(diào)時(shí)使用，傳遞給函數(shù)，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值為 "undefined"（可選）

//過濾年齡大于10的元素 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
var res = ages.filter(function (currentValue) { 
  return currentValue > 10; 
}) 
console.log(res.toString()); 
//輸出結(jié)果：32,33,12,40 
 
//箭頭函數(shù)寫法 
var res1 = ages.filter(item => item > 10) 
console.log(res.toString());

輸出結(jié)果：

32,33,12,40

2、forEach()

語法：

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

參數(shù)用法同上

//循環(huán)輸出每個(gè)參數(shù) 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.forEach(function (currentValue, index) { 
  console.log("參數(shù):" + currentValue + "索引:" + index); 
}) 
 
 
//箭頭函數(shù)寫法 
ages.forEach((item, index) => { 
  console.log("參數(shù):" + item + "索引:" + index); 
})

再看下面一段代碼：

//把10修改成20 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.forEach(function (currentValue, index) { 
  if (currentValue === 10) { 
    ages[index] = 20 
    return 
  } 
  console.log(index); 
}) 
 
console.log(ages);

我們?cè)诖a中將10的值改成20后，加了一個(gè)return，但是運(yùn)行結(jié)果顯示還是打印了7次index的值，這就是forEach的一個(gè)缺點(diǎn)，只有循環(huán)結(jié)束才能停止。那如何解決呢?

3、some()

語法：

array.some(function(currentValue,index,arr),thisValue)
參數(shù)用法同上

//把10修改成20 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.some(function (currentValue, index) { 
  if (currentValue === 10) { 
    ages[index] = 20 
    return true 
  } 
  console.log(index); 
}) 
 
console.log(ages); 
 
//把10修改成20 箭頭函數(shù) 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
ages.some((item, index) => { 
  if (item === 10) { 
    ages[index] = 20 
    return true 
  } 
  console.log(index); 
}) 
 
console.log(ages);

上面的代碼中運(yùn)行結(jié)果只會(huì)打印三次index的值，通過some就可以完美解決forEach()的不足，開發(fā)過程中就看大家的需要就行選擇。

4、every()

語法：

array.every(function(currentValue,index,arr), thisValue)
參數(shù)用法同上

//判斷每個(gè)元素的值是否都大于4 
var ages = [5, 32, 7, 10, 33, 12, 40]; 
 
 
var res = ages.some(function (currentValue) { 
  return currentValue > 4 
}) 
console.log(res); 
//輸出：true 
 
//箭頭函數(shù) 
var res = ages.some(item => item > 4) 
console.log(res);

5、reduce()

語法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

參數(shù)說明：

total：必需。初始值, 或者計(jì)算結(jié)束后的返回值。
currentValue：必需。當(dāng)前元素
currentIndex：可選。當(dāng)前元素的索引
arr：可選。當(dāng)前元素所屬的數(shù)組對(duì)象。
initialValue：可選。傳遞給函數(shù)的初始值

//計(jì)算所有元素的和 
var numbers = [15.5, 2.3, 1.1, 4.7]; 
var res = numbers.reduce(function (total, currentValue) { 
  return total += currentValue 
}, 0) 
 
console.log(res); 
//23.6 
 
//計(jì)算大于4的元素的和 
var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) 
console.log(result); 
//20.2

6、合并數(shù)組

用法：var arr = [...數(shù)組1,...數(shù)組2]
結(jié)果：將數(shù)組2的元素值拼接到數(shù)組1元素值后面

var arr = [1, 2, 3] 
var arr2 = [4, 5, 6] 
 
var res = [...arr, ...arr2] 
console.log(res); 
//輸出結(jié)果:[1, 2, 3, 4, 5, 6] 
 
var res = [...arr2, ...arr] 
console.log(res); 
//輸出結(jié)果： [4, 5, 6, 1, 2, 3]

到此這篇關(guān)于常用的JavaScript數(shù)組方法的文章就介紹到這了,更多相關(guān) 數(shù)組 JavaScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

使用javascript解析二維碼的三種方式
這篇文章主要給大家分享使用javascript解析二維碼的三種方式，二維碼就是將我們能看懂的文字語言,以機(jī)器語言的形式存儲(chǔ)了起來。其中黑色小方塊代表的是1,白色小方塊代表的是0，黑白相間的圖案其實(shí)就是一串編碼,掃碼的過程就是翻譯這些編碼的過程,需要的朋友可以參考一下
2021-11-11
這篇文章主要介紹了微信小程序實(shí)戰(zhàn)小程序?qū)嵗南嚓P(guān)資料,需要的朋友可以參考下
2016-10-10

JavaScript數(shù)組幾個(gè)常用方法總結(jié)

這篇文章主要介紹了JavaScript數(shù)組幾個(gè)常用方法，主要概述的方法有filter()、map()、sort()、reduce()、forEach()，這些方法都是JavaScript常用到的方法，下面文章內(nèi)容詳細(xì)介紹了他們的語法、參數(shù)、返回值等資料,需要的朋友可以參考一下

2021-11-11