reduce()方法的學習和整理

十三月呀發表於2020-12-30

今天看文章的時候看到reduce方法去做迴圈比較是較為優雅的寫法,遂學習了一波,現整理如下。

文章連結:https://www.jianshu.com/p/e375ba1cfc47

1. 語法

reduce() 方法接收一個函式作為累加器,陣列中的每個值(從左到右)開始縮減,最終計算為一個值。
reduce() 可以作為一個高階函式,用於函式的 compose。
注意: reduce() 對於空陣列是不會執行回撥函式的。

arr.reduce(callback,[initialValue])

callback詳解:

  1. previousValues: 上一次呼叫回撥函式返回的值,第一次是 initialValue的值,如何未設定 initialValue 值,是陣列的第一個元素的值
  2. currentValue: 陣列當前被處理的值,未設定 initialValue ,為陣列的第二個元素的值。
  3. index:當前元素在陣列中的索引。預設值為1,設定 initialValue 則為 initialValue的值
  4. array:呼叫reduce方法的陣列
  5. initialValue: 第一次呼叫callback的第一個引數

2. 例項

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

列印結果:
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

3. 其他語法

  1. if in
	if ( cur in pre ) {
       pre[cur]++
  	}

if in 用法是判斷屬性是否屬於物件
上述代表的是在 pre 中是否有 cur 屬性

注: in 我一般用於 for in 沒使用過 if in,還是見識少,要多看書和文章。

  1. includes
   if ( !pre.includes(cur) ) {
      return pre.concat(cur)
    }

ncludes() 方法用於判斷字串是否包含指定的子字串。
如果找到匹配的字串則返回 true,否則返回 false。
includes() 方法區分大小寫。

故上述程式碼是用來判斷 cur 中是否包含字串 pre

4. 討論

和後臺男朋友說到元素匹配陣列,男朋友告訴我後臺有個 contains 方法,js裡面可能也有,搜尋了一下發現是jQuery 裡的 contains,方法是用來判斷dom元素的包含關係的。

$.contains() 方法用於判斷指定元素內是否包含另一個元素。即判斷另一個DOM元素是否是指定DOM元素的後代。

例項:

$(function () {
    function funcontain( html ){
        document.body.innerHTML += "<br>" + html;
        }
    funcontain($.contains( document.documentElement, document.body )); // true
    funcontain($.contains( document.body, document.documentElement )); // false
})

but 看文章的時候發現有個陣列有個 indexOf 判斷陣列內某個元素是否存在,只用字串的 indexOf ,一查文件,發現還真的有,又學到一個。寫法和字串的一致,返回元素所在的位置,沒有找到返回-1。

有個大佬的文章講這個的,分析的不錯。

相關文章