Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript terutamanya memperkenalkan isu berkaitan tentang 7 kaedah pemprosesan berulang yang biasa digunakan dalam JavaScript. Mari kita lihat bersama-sama adalah membantu.
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
1.1 Senario aplikasi: Gunakan peraturan tertentu untuk memetakan tatasusunan baharu (merentasi setiap elemen dalam tatasusunan, memproses setiap elemen dengan sewajarnya dan mengembalikan tatasusunan baharu)
Sebagai contoh: Tukar setiap elemen dalam tatasusunan kepada 1
let arr = [10, 20, 30, 40, 50] //item数组每一项的值,index数组的下标 let newArr = arr.map((item, index) => { return item + 1 }) console.log(newArr)//[11, 21, 31, 41, 51]
1.2 Nota:
(1) Bilangan pelaksanaan fungsi panggil balik adalah sama dengan panjang tatasusunan
(2). Panjang tatasusunan baharu yang dikembalikan oleh fungsi peta adalah sama dengan panjang tatasusunan asal (3). . Jika ia tidak dikembalikan, setiap elemen tatasusunan baharu akan menjadi tidak ditakrifkan 2. menulis gelung untuk2.2 Nota:
let arr = [10, 20, 30, 40, 50] arr.forEach((item, index) => { console.log(`下标为${index}的元素是${item}`) }) //控制台打印结果 //下标为0的元素是10 //下标为1的元素是20 //下标为2的元素是30 //下标为3的元素是40 //下标为4的元素是50
3.2 Nota:
let arr = [1, 2, 3, 4, 5, 6, 7, 8] let newArr = arr.filter((item, index) => { //return一个布尔值 return item % 2 == 0 }) console.log(newArr)//[2,4,6,8]
4.2 Nota:
let arr = [10, 50, 150, 200, 60, 30] let bol = arr.some((item, index) => { return item > 100 }) console.log(bol)//true
5.2 Nota:
let arr = [10, 50, 150, 200, 60, 30] let bol = arr.every((item, index) => { return item > 100 }) console.log(bol)//false
6.2 Nota:
let arr = [ { name: '张三', age: 20 }, { name: '李四', age: 30 }, { name: '王五', age: 25 }, { name: '赵六', age: 33 }, { name: '小七', age: 10 }, ]; let i=arr.findIndex((item,index)=>{ return item.age>30 }) //打印的i为符合条件的第一个元素下标 console.log(i)//3
kaedah 7.reduce()
7.1 Senario aplikasi: penjumlahan tatasusunan /Nilai purata/nilai maksimum/nilai minimum
//数组求和 let arr = [10, 20, 30, 40] //sum:初始值,默认为数组的第一个元素 //item:数组的每一个元素,默认为数组的第二个元素 let getSum = arr.reduce((sum, item) => { //这里必须要return,相当于把本次计算得结果赋值给下一次得sum : sum = sum + item; return sum + item }) console.log(getSum)//100
//数组求和 let arr = [10, 20, 30, 40] //加了初始值0之后,此时sum开始默认为0,item则默认为数组的第一个元素 let getSum = arr.reduce((sum, item) => { //这里必须要return,相当于把本次计算得结果赋值给下一次得sum : sum = sum + item; return sum + item },0) console.log(getSum)//100 //数组求最大值 let max = arr.reduce((sum, item) => { return Math.max(sum, item) }, 0) console.log(max)//40
. arr.
kurangkan参数 | 详情 |
---|---|
sum第一个参数 | 第一次为数组的第一个数组元素的值(下标为0),依次往后是返回计算结果的值 |
value 第二个参数 | 开始为数组元素第二个的值(下标为1),依次往后循环 |
index第三个参数 | 依次为数组元素的下标 |
arr第四个参数 | 为数组的整体 |
initialValue | 为第一参数的默认值,设置的话,第一个参数的默认值为initialValue的值,则 第二个参数则将使用数组第一个元素(下标为0 ),没有设置的话,第一个参数将使用数组第一个元素,而 第二个参数 将使用数组第二个元素。 |
function sum(arr){ return arr.reduce(function(sum,value,index,arr){ console.log(sum); console.log(value); console.log(index); console.log("~~") console.log(arr) return sum+y },initialValue)}console.log(sum([1,2,3,4,5]))
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。 every() 方法使用指定函数检测数组中的所有元素: 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。 如果所有元素都满足条件,则返回 true。 注意: every() 不会对空数组进行检测。 注意: every() 不会改变原始数组。
参数 | 详情 |
---|---|
value | 数组元素 |
index | 数组下标 |
arr | 当前数组的整体 |
function sum(arr){ return arr.every(function(value,index,arr){ console.log(value); console.log(index); console.log("~~") return value>=1 })}console.log(sum([1,2,3,4,5]))
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。 some() 方法会依次执行数组的每个元素: 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。 如果没有满足条件的元素,则返回false。 注意: some() 不会对空数组进行检测。 注意: some() 不会改变原始数组。
参数 | 详情 |
---|---|
value | 数组元素 |
index | 数组下标 |
arr | 当前数组的整体 |
function sum(arr){ return arr.some(function(value,index,arr){ console.log(value); console.log(index); console.log("~~") return value>=1 })}console.log(sum([1,2,3,4,5]))
filter()方法过滤查找全部,对数组元素进行判断,满足条件的会组成一个新的数组返回 注意:如果都不符合条件,会得到一个空数组 注意:如果所有元素都符合条件,会得到一个包含所有元素的新数组它与原数组进行===或==比较会得到false
参数 | 详情 |
---|---|
value | 数组元素 |
index | 数组下标 |
arr | 当前数组的整体 |
function sum(arr){ return arr.filter(function(value,index,arr){ console.log(value); console.log(index); console.log("~~") return value>=5 })}console.log(sum([1,2,3,4,5]))
map对数组元素进行循环,有返回值,返回值会组成一个新的数组 注意:map可以处理一对一的元素映射
参数 | 详情 |
---|---|
value | 数组元素 |
index | 数组下标 |
arr | 当前数组的整体 |
const source = [1,2,3,4]const target = source.map(n=>({id:n,label:`label${n}`}))console.log(target)
function sum(arr){ return arr.map(function(value,index,arr){ console.log(value); console.log(index); console.log("~~") return value>=1 })}console.log(sum([1,2,3,4,5]))
forEach()方法对数组元素进行循环,没有返回值和for循环的功能一样,但是不能使用break和countinue 注意:map和forEach的区别:map有返回值,forEach没有返回值
参数 | 详情 |
---|---|
value | 数组元素 |
index | 数组下标 |
arr | 当前数组的整体 |
function sum(arr){ return arr.forEach(function(value,index,arr){ console.log(value); console.log(index); console.log("~~") return value>=1 })}console.log(sum([1,2,3,4,5]))
【相关推荐:javascript视频教程、web前端】
Atas ialah kandungan terperinci Ringkasan 7 kaedah pemprosesan berulang yang biasa digunakan untuk tatasusunan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!