JavaScript中的Curring是一個非常有用的概念,可以幫助我們更好的組織和重用代碼。它基本上是一個將接受多個參數的函數轉換成一系列單參數函數的過程,也就是函數的柯里化。舉例來說:
function add(a, b, c) { return a + b + c; } console.log(add(1, 2, 3)); //6
如果我們使用Curring的思路,可以將這個三個參數的函數轉換成三個單參數的函數:
function addCurried(a) { return function(b) { return function(c) { return a + b + c; }; }; } console.log(addCurried(1)(2)(3)); //6
這樣,我們就可以通過這個函數構造出任意一個帶有三參數的函數對象。
接下來我們來看一個更加實際的例子。假設我們有一個列表,需要對這個列表進行一些操作:過濾、轉換、排序。我們可以定義一些通用的函數來實現這些操作:
const students = [ { name: 'Alice', gender: 'F', age: 22 }, { name: 'Bob', gender: 'M', age: 21 }, { name: 'Charlie', gender: 'M', age: 23 }, { name: 'Daisy', gender: 'F', age: 22 }, { name: 'Emma', gender: 'F', age: 24 } ]; function filter(prop, fn, arr) { return arr.filter(function(item) { return fn(item[prop]); }); } function map(prop, fn, arr) { return arr.map(function(item) { item[prop] = fn(item[prop]); return item; }); } function sortBy(prop, arr) { return arr.sort(function(a, b) { return a[prop]< b[prop] ? -1 : a[prop] >b[prop] ? 1 : 0; }); }
現在我們可以通過這些通用的函數來實現我們的操作:
const femaleStudents = filter('gender', function(gender) { return gender === 'F'; }, students); console.log(femaleStudents); const namedStudents = map('name', function(name) { return name.toUpperCase(); }, students); console.log(namedStudents); const sortedStudentsByAge = sortBy('age', students); console.log(sortedStudentsByAge);
然后我們發現,這樣寫代碼太煩瑣了,每一行代碼都需要寫出一大堆參數,有沒有更好的方式呢?這就是Curring的用武之地。我們可以將filter、map和sortBy這三個函數轉成類似addCurried這樣的柯里化函數:
function filterCurried(prop) { return function(fn) { return function(arr) { return filter(prop, fn, arr); }; }; } function mapCurried(prop) { return function(fn) { return function(arr) { return map(prop, fn, arr); }; }; } function sortByCurried(prop) { return function(arr) { return sortBy(prop, arr); }; }
轉換完成以后,我們就可以更加簡潔的使用這些函數:
const femaleStudents = filterCurried('gender')(function(gender) { return gender === 'F'; })(students); console.log(femaleStudents); const namedStudents = mapCurried('name')(function(name) { return name.toUpperCase(); })(students); console.log(namedStudents); const sortedStudentsByAge = sortByCurried('age')(students); console.log(sortedStudentsByAge);
這樣做的好處是,我們可以把那些都是常量的參數放在函數調用的外面,這樣代碼就更加清晰簡潔了。
JavaScript中的Curring是一個非常有用的語言特性,可以幫助我們構造更加靈活,復用性更高的函數。不妨在自己的代碼中試試看吧!
上一篇amp 編碼 php
下一篇css3++文字環繞