vue js 高階函式

2021-10-01 06:39:13 字數 2105 閱讀 5411

nums: [1, 2, 6, 7, 3, 4, 5]

objectnums:[,,

,]

遍歷集合中的所有元素,對每乙個元素進行單獨的相同的操作

1.每個成員乘以2倍;物件陣列計算

return this.nums.map(function (n) );

return this.objectnums.map(function(n))

結果

[ 2, 4, 12, 14, 6, 8, 10 ]

[ 2, 6, 12, 20 ]

2.lambda

return this.nums.map(n => n * 2)

return this.objectnums.map(n=>n.count * n.value)

遍歷整個集合,每次對乙個元素和乙個結果集進行操作,並將結果存入結果集

1.整個陣列相加

return this.nums.reduce(function (preresult, currentvalue) , 0)

return this.nums.reduce(function (currentvalue, nextvalue) )

當reduce有2個引數的時候,第二個引數會在第一次計算的時候賦值給preresult,而currentvalue則為陣列的第乙個值,而計算的結果則會儲存在preresult中,以便後續繼續計算

當reduce只有乙個引數的時候,第一次計算會直接傳入陣列中的2個數,然後將結果儲存在currentvalue中,這時候總的遍歷次數比上面要少一次

2.lambda

return this.nums.reduce((x, y) => x + y);

return this.nums.reduce(((x, y) => x + y),0);

遍歷整個集合,保留符合條件的元素,去除不符合條件的元素

1.篩選小於5的元素

return this.nums.filter(function(n))
篩選位置小於4的元素

return this.nums.filter(function(n,index))
去重

return this.nums.filter(function (n, index, self) )
2.lambda

return this.nums.filter(n => n < 5);

return this.nums.filter((n, index) => index < 4);

return this.nums.filter((n, index, self) => self.indexof(n) === index);

排序,預設按照字串,從小到大排序

集合

nums: [1, 2, 6, 7, 3, 4, 5, 10]
1.預設排序

return this.nums.sort();
結果

[ 1, 10, 2, 3, 4, 5, 6, 7 ]
2.按數字從小到大排序

return this.nums.sort(function(x,y))
結果

[ 1, 2, 3, 4, 5, 6, 7, 10 ]
3.按數字從大到小排序

return this.nums.sort(function(x,y))
結果

[ 10, 7, 6, 5, 4, 3, 2, 1 ]
lambda

return this.nums.sort((x, y) => x < y);

return this.nums.sort((x, y) => x > y);

vue,js中高階函式的使用

在用vue.js開發過程中為了使 不那麼複雜化,我們常常需要記住一些js中高階函式的用法,這裡推薦3中高階函式的用法 filter,map,reduce 這裡用乙個小栗子來記錄一下 const nums 12,23,22,18,100,67,48,88 需求1 對陣列進行遍歷篩選小於50的數字,如果...

VUE JS 鬧鐘函式

心跳函式 秒錶 setinterval 方法可按照指定的週期 以毫秒計 來呼叫函式或計算表示式。setinterval 方法會不停地呼叫函式,直到 clearinterval 被呼叫或視窗被關閉。由 setinterval 返回的 id 值可用作 clearinterval 方法的引數。cleari...

Vuejs高階知識 十九 slot

作為對component的補充,vuejs 增加了slot這個功能.我們從具體的例子來說明。src script head 我學習到了slot 這個章節。study process div vue.component study process template newvue script body...