Ringkasan 7 kaedah pemprosesan berulang yang biasa digunakan untuk tatasusunan dalam JavaScript

WBOY
Lepaskan: 2022-08-04 11:28:20
ke hadapan
1697 orang telah melayarinya

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.

Ringkasan 7 kaedah pemprosesan berulang yang biasa digunakan untuk tatasusunan dalam JavaScript

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

1.map( ) kaedah

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]
Salin selepas log masuk

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 untuk

2.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
Salin selepas log masuk
(1) Bilangan pelaksanaan fungsi panggil balik adalah sama dengan panjang tatasusunan

(2). Fungsi forEach tidak mempunyai nilai pulangan

(3) Fungsi panggil balik tidak perlu dikembalikan, walaupun ia dikembalikan secara manual, ia tidak akan menamatkan gelung

3.filter() kaedah

3.1 Senario aplikasi: digunakan untuk menapis elemen yang memenuhi syarat dalam tatasusunan dan mengembalikan tatasusunan baharu yang ditapis

Contohnya: Cari nombor genap dalam tatasusunan

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]
Salin selepas log masuk
(1) Bilangan pelaksanaan fungsi panggil balik adalah sama dengan panjang tatasusunan

(2). oleh fungsi penapis tidak sama dengan panjang tatasusunan asal

(3). tatasusunan. Jika nilai pulangan adalah palsu, ia tidak akan ditambahkan pada tatasusunan baharu

kaedah 4.some()

4.1 Senario aplikasi: Digunakan untuk menentukan sama ada terdapat elemen yang memenuhi keadaan dalam tatasusunan

Contohnya: Tentukan sama ada terdapat nombor yang lebih besar daripada 100 dalam tatasusunan (jika wujud, nilai pulangan adalah benar, jika ia tidak wujud, nilai pulangan adalah palsu)

4.2 Nota:

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.some((item, index) => {
      return item > 100
    })
    console.log(bol)//true
Salin selepas log masuk
(1) Bilangan pelaksanaan fungsi panggil balik tidak sama dengan panjang tatasusunan

(2). nilai bagi sesetengah fungsi ialah nilai Boolean

(3 Fungsi panggil balik mengembalikan nilai jenis Boolean untuk Tamatkan traversal Jika nilai pulangan adalah benar, traversal tamat dan nilai pulangan bagi sesetengah fungsi adalah palsu. Jika nilai pulangan adalah palsu, traversal diteruskan, dan nilai pulangan bagi sesetengah fungsi adalah palsu

5 setiap() kaedah

5.1 Senario aplikasi: digunakan untuk menilai sama ada. semua elemen dalam tatasusunan memenuhi syarat (tukar idea), mempunyai fungsi yang serupa dengan kaedah some(), dan boleh dibandingkan dan difahami

Contohnya: pertimbangan Sama ada semua elemen dalam tatasusunan lebih besar daripada 100 ( semua lebih besar daripada 100, nilai pulangan adalah benar, selagi satu elemen kurang daripada 100, nilai pulangan adalah palsu)

5.2 Nota:

let arr = [10, 50, 150, 200, 60, 30]
let bol = arr.every((item, index) => {
      return item > 100
    })
    console.log(bol)//false
Salin selepas log masuk
(1). Bilangan pelaksanaan fungsi panggil balik tidak sama dengan panjang tatasusunan

(2 Nilai pulangan bagi setiap fungsi ialah nilai Boolean

(3). Nilai jenis Boolean untuk Tamatkan traversal Jika nilai pulangan adalah benar, traversal diteruskan, dan nilai pulangan setiap fungsi adalah benar adalah palsu

6. kaedah findIndex()

6.1 Senario aplikasi: Sesuai untuk elemen dalam tatasusunan sebagai jenis objek, lebih cekap daripada gelung tradisional

6.2 Fungsi: Dapatkan kedudukan elemen pertama yang memenuhi syarat (di bawah Standard)

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
Salin selepas log masuk
(1) Jika nilai pulangan adalah benar, traversal tamat dan nilai pulangan kaedah findIndex ialah nilai indeks semasa; jika nilai pulangan Jika salah, traversal diteruskan Jika benar tidak dikembalikan selepas semua traversal tatasusunan, nilai pulangan kaedah findIndex ialah -1

kaedah 7.reduce()

7.1 Senario aplikasi: penjumlahan tatasusunan /Nilai purata/nilai maksimum/nilai minimum

7.2 Fungsi: Melintasi elemen tatasusunan dan laksanakan fungsi panggil balik untuk setiap elemen

7.2 Nota:

( 1) Adalah lebih baik untuk memberikan nilai awal untuk mengelakkan ralat untuk tatasusunan kosong
//数组求和
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
Salin selepas log masuk

Apa yang khususnya. penting untuk diperhatikan di sini ialah nilai jumlah setiap pusingan ialah nilai pulangan pusingan sebelumnya

8 Ringkasan
//数组求和
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
Salin selepas log masuk

Contoh lanjutan:

. Ringkasan 7 kaedah pemprosesan berulang yang biasa digunakan untuk tatasusunan dalam JavaScriptarr.

kurangkan

(fungsi(jumlah,nilai,indeks,arr){}) kaedah

kurangkan() menerima fungsi sebagai penumpuk, dan setiap nilai dalam tatasusunan (dari kiri ke kanan) mula dikurangkan dan akhirnya dikira kepada nilai.

reduce() boleh digunakan sebagai fungsi tertib tinggi untuk gubahan fungsi.

Nota: reduce() tidak akan melaksanakan fungsi panggil balik untuk tatasusunan kosong.

参数 详情
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]))
Salin selepas log masuk

arr.every(function(value,index,arr){})

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
Salin selepas log masuk
参数 详情
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]))
Salin selepas log masuk

arr.some(function(value,index,arr){})

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
Salin selepas log masuk
参数 详情
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]))
Salin selepas log masuk

arr.filter(function(value,index,arr){})

filter()方法过滤查找全部,对数组元素进行判断,满足条件的会组成一个新的数组返回
注意:如果都不符合条件,会得到一个空数组
注意:如果所有元素都符合条件,会得到一个包含所有元素的新数组它与原数组进行===或==比较会得到false
Salin selepas log masuk
参数 详情
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]))
Salin selepas log masuk

arr.map(function(value,index,arr){})

map对数组元素进行循环,有返回值,返回值会组成一个新的数组
注意:map可以处理一对一的元素映射
Salin selepas log masuk
参数 详情
value 数组元素
index 数组下标
arr 当前数组的整体
const source = [1,2,3,4]const target = source.map(n=>({id:n,label:`label${n}`}))console.log(target)
Salin selepas log masuk
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]))
Salin selepas log masuk

arr.forEach(function(value,index,arr){})

forEach()方法对数组元素进行循环,没有返回值和for循环的功能一样,但是不能使用break和countinue
注意:map和forEach的区别:map有返回值,forEach没有返回值
Salin selepas log masuk
参数 详情
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]))
Salin selepas log masuk

【相关推荐: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!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!