Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah 4 kaedah yang biasa digunakan untuk menambah tatasusunan baharu dalam es6?
Empat kaedah baharu yang biasa digunakan untuk tatasusunan dalam es6 ialah: 1. forEach(), yang digunakan untuk melintasi tatasusunan tanpa nilai pulangan 2. filter(), yang menapis nilai dalam tatasusunan yang tidak memenuhi syarat; 3 , map(), melintasi tatasusunan dan mengembalikan tatasusunan baharu 4. reduce(), melakukan beberapa pengiraan pada dua item tatasusunan yang pertama dan terakhir, dan kemudian mengembalikan nilainya.
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
ES6 telah menambah 4 kaedah tatasusunan yang sangat praktikal: untukSetiap, tapis, petakan dan kurangkan.
1.forEach
Melintasi tatasusunan, tiada nilai pulangan, jangan tukar tatasusunan asal, hanya melintasi - bersamaan dengan untuk lintasan gelung
let arr=[23,44,56,22,11,99] let res=arr.forEach(item=>{ console.log(item); //23,44,56,22,11,99 }) let res2=arr.forEach((item,index)=>{ console.log(item,index); //23 0 //44 1 //.... })
2.penapis:
Fungsi penapis() menapis keadaan yang tidak memuaskan dalam tatasusunan Nilai, jika fungsi panggil balik kembali benar, ia akan ditinggalkan dan tatasusunan baharu akan dikembalikan tanpa mengubah tatasusunan asal! ! ! Boleh digunakan untuk menyahduplikasi tatasusunan
let arr = [1,5,2,16,4,6] //1.找出数组中的偶数 let newArr=arr.filter((v,i)=> v%2==0) console.log(newArr,'newArr');//2,16,4,6 //2.过滤器 保留为TRUE的结果 let arrTue=[13,14,9,33] let newArr2=arrTue.filter(item=>(item%3===0)?true:false) console.log(newArr2,'newArr2');//9,33 //3.利用filter去重‘ // 第一种 let arr3=[2,3,5,1,2,3,4,5,6,8],newArr3 function unique(arr){ const res = new Map() return arr.filter((item)=> !res.has(item) && res.set(item,1) ) } console.log(newArr3=unique(arr3),'newArr3');//2,3,5,1,4,6,8 //第二种 let testArray = [ {key:"01",name:'张三'}, {key:"02",name:'小李'}, {key:"03",name:'小罗'}, {key:"04",name:'张三'}, {key:"03",name:'小李'}, ]; let deduplicationAfter = testArray.filter((value,index,array)=>{ //findIndex符合条件的数组第一个元素位置。 return array.findIndex(item=>item.key === value.key && item.name === value.name) === index }) console.log(deduplicationAfter)
3.peta:
peta merentasi tatasusunan , mengembalikan tatasusunan baharu, tidak menukar tatasusunan asal, memetakan satu kepada satu, memetakan kepada tatasusunan baharu
let arr = [6,10,12,5,8] let result = arr.map(function (item) { return item*2 }) let result2 = arr.map(item=>item*2) // es6的箭头函数简写,若想了解,后面的文章有介绍 console.log(result) console.log(result2) let score = [18, 86, 88, 24] let result3 = score.map(item => item >= 60 ? '及格' : '不及格') console.log(result3)
4.mengurangkan :
reduce() meringkaskan sekumpulan daripadanya menjadi satu (contohnya, mengira jumlah, mengira purata), mengurangkan menjadikan dua item sebelum dan selepas tatasusunan melakukan beberapa pengiraan, dan kemudian mengembalikan nilainya, Dan teruskan pengiraan tanpa mengubah tatasusunan asal, dan kembalikan hasil akhir pengiraan Jika nilai awal tidak diberikan, rentas
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
bermula dari item kedua bagi. tatasusunan, fungsi panggil balik parameter pertama, nilai awal parameter kedua
4.1 Menjumlahkan
//第一种给定初始值 var arr = [1, 3, 5, 7]; // 原理: 利用reduce特性 prev初始值设置0 并把函数的返回值再次带入函数中 var sum = arr.reduce(function (tmp, item,index) { // prev 初始为0 以后则为函数返回的值 console.log(tmp,item,index); // 0 1 0 // 1 3 1 // 4 5 2 // 9 7 3 return tmp + item; // 数组各项之间的和 }, 0); console.log(sum); //16 //第二种不给初始值 var arr2 = [1, 3, 5, 7] var result = arr2.reduce(function (tmp, item, index) { //tmp 上次结果,item当前数,index次数1开始 console.log(tmp, item, index) //1 3 1 // 4 5 2 // 9 7 3 return tmp + item; }) console.log(result,) //16
4.2 Mencari purata
var arr = [1, 3, 5, 7] var result = arr.reduce(function (tmp, item, index) { console.log(tmp,item,index); // 1 3 1 // 4 5 2 // 9 7 3 if (index != arr.length - 1) { // 不是最后一次 return tmp + item } else { return (tmp + item)/arr.length } }) console.log(result,'[[[u99') // 平均值 4
[Cadangan berkaitan :tutorial video javascript, bahagian hadapan web】
Atas ialah kandungan terperinci Apakah 4 kaedah yang biasa digunakan untuk menambah tatasusunan baharu dalam es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!