一丶詳解代碼
<!--作者：key-->
<!--瀏覽工具：Chrome-->
<!--開發工具：WebStorm-->
<!--開發時間：2020/11/21 12:48-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{"原來的陣列："+ nums}}<br>
{{'過濾掉小于100之后的陣列：' + useFilter()}}<br>
{{'將過濾之后的陣列，乘以2后的陣列：' + useMap()}}<br>
{{'乘以2后的陣列各元素的和：'+ useReduce()}}<br>
{{'三種函式，聯用：' + useOnceCount()}}<br>
{{'一行代碼搞定，以上三種需求：' + useOnceRowCount()}}<br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
nums:[10,20,111,222,333,444,40,50]
},
// filter/map/reduce
methods:{
// 1.filter過濾器
// filter中的回呼函式有一個要求，必須回傳一個boolean值
// true:當回傳true時，函式內部會自動將這次回呼的n加入到新的陣列中
// false:當回傳false時，函式內部會過濾掉這次的n
useFilter(){
//取出小于100的值，使用filter
let newNums = this.nums.filter(function (n) {
return n < 100
})
return newNums
},
// 2.map使用
useMap(){
// 將第一步過濾的newNums資料乘以2
let new2Nums = this.useFilter(this.newNums).map(function (n) {
return n * 2
})
return new2Nums
},
// 3.reduce的使用
// 作用：對陣列中所有的內容進行匯總(相加，相乘之類的）
useReduce(){
let total = this.useMap().reduce(function (preValue,n) {
return preValue+n
},0)
// 第一次： preValue 0 n:20
// 第二次： preValue 20 n:40
// 第三次： preValue 60 n:80
// 第四次： preVAalue 140 n:100
// 回呼: 回傳240
return total
},
useOnceCount(){
let total = this.nums.filter(function (n) {
return n < 100
}).map(function (n) {
return n * 2
}).reduce(function (preValue,n) {
return preValue + n
},0)
return total
},
useOnceRowCount(){
let total = this.nums.filter(n => n < 100).map(n => n * 2).reduce((preValue,n) => preValue+n)
return total
}
}
})
</script>
</body>
</html>
二丶運行結果
——高岸為谷，深谷為陵——
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/226236.html
標籤：其他