函數有哪些作用

本篇內容介紹了“函數有哪些作用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯(lián)公司是專業(yè)的鎮(zhèn)坪網站建設公司，鎮(zhèn)坪接單;提供成都網站制作、成都網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行鎮(zhèn)坪網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

函數在任何編程語言中都占據著主導地位。

而在js中，函數是另類的存在，本質上是特殊的Object，它可以設置屬性：

const fn = () => { }; fn.foo = "foo"; console.log(fn.foo); // 'foo'

今天分享的是函數的一些操作：

函數的緩沖功能memoize
函數柯里化curry
截取參數處理arg
防抖節(jié)流
延遲函數執(zhí)行delay
延遲函數調用defer
異步函數調用compose
函數只被調用一次once
判斷函數是否可以執(zhí)行
檢查對象屬性checkProp
鏈式調用函數

函數的緩沖功能memoize

關于memoize的思考來源于reack的Hook文檔中，memoize的特性就是「利用函數的特性做緩存」。

不知道你做算法的時候，是否考慮過遞歸是怎么緩存結果，層層儲存的。

如下的斐波那契，每一次計算的結果緩存在哪里呢?

const fibonacci = (n) => {     return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2); };

我們可以簡單模擬一下memoize的實現(xiàn)：

const memoize = function (fn) {   const cache = {};   return function () {     const key = JSON.stringify(arguments);     var value = cache[key];     if (!value) {       // 為了了解過程加入的log，正式場合應該去掉       console.log('新值，執(zhí)行中...');        // 放在一個數組中，方便應對undefined，null等異常情況       value = [fn.apply(this, arguments)];         cache[key] = value;     } else {       console.log('來自緩存');       }     return value[0];   } }

測試一下：

const memoizeFibonacci = memoize(fibonacci);  const log = console.log; log(memoizeFibonacci(45)); // 新值，執(zhí)行中...;    1134903170  // 等待時間比較長 log(memoizeFibonacci(45)); // 來自緩存;    1134903170 log(memoizeFibonacci(45)); // 來自緩存;    1134903170 log(memoizeFibonacci(45)); // 來自緩存;    1134903170 log(memoizeFibonacci(45));

函數柯里化curry

柯里化的概念就是「把接受多個參數的函數變換成接受一個單一參數的函數」。

const curry = (fn, arity = fn.length, ...args) =>   arity <= args.length ? fn(...args) : curry.bind(null, fn, arity, ...args);  curry(Math.pow)(2)(10); // 1024 curry(Math.min, 3)(10)(50)(2); // 2

這個bind用得非常好，借助它積累每次傳進來的參數，等到參數足夠時，再調用。

有了柯里化，還有反柯里化，它的概念是「把多個接受多個參數的函數層層鋪平」。

const uncurry = (fn, n = 1) => (...args) => {   const next = acc => args => args.reduce((x, y) => x(y), acc);   if (n > args.length) throw new RangeError('Arguments too few!');   return next(fn)(args.slice(0, n)); };  const add = x => y => z => x + y + z; const uncurriedAdd = uncurry(add, 3); uncurriedAdd(1, 2, 3); // 6

截取函數參數ary

「截取指定函數參數做操作」;ary的第二個參數接收一個索引參數，表示只截取得到n的位置。

// ary 截取指定參數處理 const ary = (fn, n) => (args) => fn(args.slice(0, n));  // 如果處理的數據是字符串 const checkPe = (arg) => {   if (arg && arg.indexOf('pe') > -1) {     return arg.indexOf('pe')   }   return -1 } const getPe = ary(checkPe, 5); const numsPe = ['wpe', 'wwperr', 'wwepe'].map(x => getPe(x));  console.log(numsPe, 'numsPe') // [1, 2, 3]

如果是數組的話，需要使用擴展運算符。

// 如果處理的數據是數組 const ary = (fn, n) => (...args) => fn(...args.slice(0, n));  const firstTwoMax = ary(Math.max, 3); const nums = [[2, 6, 9, 'a'], [6, 4, 8], [10]].map(x => firstTwoMax(...x));  console.log(nums, 'nums') // [9, 8, 10]

防抖節(jié)流

關于防抖和節(jié)流的區(qū)別可以參考我之前的文章《電梯與地鐵之說》。

const debounce = (fn, ms = 0) => {   let timeoutId;   return function(...args) {     clearTimeout(timeoutId);     timeoutId = setTimeout(() => fn.apply(this, args), ms);   }; };  window.addEventListener(   'resize',   debounce(() => {     console.log(window.innerWidth);     console.log(window.innerHeight);   }, 250)

傳入高頻次調用的函數和時間間隔，返回一個已防抖的函數。

節(jié)流會稀釋函數的執(zhí)行頻率。在wait秒內只執(zhí)行一次。

const throttle = (fn, wait) => {   let inThrottle, lastFn, lastTime;   return function() {     const context = this,       args = arguments;     if (!inThrottle) {       fn.apply(context, args);       lastTime = Date.now();       inThrottle = true;     } else {       clearTimeout(lastFn);       lastFn = setTimeout(function() {         if (Date.now() - lastTime >= wait) {           fn.apply(context, args);           lastTime = Date.now();         }       }, Math.max(wait - (Date.now() - lastTime), 0));     }   }; };  window.addEventListener(   'resize',   throttle(function(evt) {     console.log(window.innerWidth);     console.log(window.innerHeight);   }, 250) ); // Will log the window dimensions at most every 250ms

延遲函數執(zhí)行delay

delay字面意思：「延遲執(zhí)行」。

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);  delay(   function (text) {     console.log(text);   },   1000,   'later' ); // Logs 'later' after one second.

延遲函數調用defer

defer字面意思：「延遲調用」。

可適用于推遲 cpu 密集型計算，以免阻塞渲染引擎工作。使用setTimeout(超時時間為1ms)將函數參數添加到瀏覽器事件隊列末尾。

const defer = (fn, ...args) => setTimeout(fn, 1, ...args);  // Example A: defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

異步函數compose

compose函數是「從右向左去實現(xiàn)的數據執(zhí)行流」。它的真正意義在于邏輯分層。利用reduce方法實現(xiàn)函數的“洋蔥”包裹。

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));  const substract3 = x => x - 3; const add5 = x => x + 5; const multiply = (x, y) => x * y; const multiplyAndAdd5AndSubstract3 = compose(   substract3,   add5,   multiply ); multiplyAndAdd5AndSubstract3(5, 2); // 12

要想實現(xiàn)從左向右執(zhí)行也非常簡單，把f和g的位置互調一下。

函數只被調用一次once

因為 JavaScript 是單線程執(zhí)行環(huán)境，不需要考慮并發(fā)環(huán)境，直接一個內部變量存到閉包中，每次調用前判斷，并在第一次調用時，修改其值，讓后續(xù)調用全部失效。

const once = (fn) => {   let called = false;   return function (...args) {     if (called) return;     called = true;     return fn.apply(this, args);   }; };  const startApp = function (event) {   console.log(this, event); // document.body, MouseEvent }; document.body.addEventListener("click", once(startApp));

判斷函數是否可以執(zhí)行

第一個參數為函數是否可以執(zhí)行的判斷條件，第二個參數為執(zhí)行的函數。

const when = (pred, whenTrue) => (x) => (pred(x) ? whenTrue(x) : x);  const doubleEvenNumbers = when(   (x) => x % 2 === 0,   (x) => x * 2 ); doubleEvenNumbers(2); // 4 doubleEvenNumbers(1); // 1

檢查對象屬性

「判斷某個對象是否具備要求」。用!!強制轉化為布爾類型。

const checkProp = (predicate, prop) => (obj) => !!predicate(obj[prop]);  const lengthIs4 = checkProp((l) => l === 4, "length"); lengthIs4([]); // false lengthIs4([1, 2, 3, 4]); // true  const sizeIs4 = checkProp((l) => l === 4, "size"); sizeIs4(new Set([1, 2, 3, 4])); // true  const session = { obj: { active: true, disabled: false } }; const validUserSession = checkProp((u) => u.active && !u.disabled, "obj");  validUserSession(session); // true

鏈式調用

將函數數組轉換為有決策權的鏈式函數調用。

const chainAsync = (fns) => {   let curr = 0;   const last = fns[fns.length - 1];   const next = () => {     const fn = fns[curr++];     fn === last ? fn() : fn(next);   };   next(); };  chainAsync([   (next) => {     console.log("0 seconds");     setTimeout(next, 1000);   },   (next) => {     console.log("1 second");     setTimeout(next, 1000);   },   () => {     console.log("2 second");   }, ]);

“函數有哪些作用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！

網站題目：函數有哪些作用
標題路徑：http://m.kartarina.com/article22/ppphjc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網站制作、網站策劃、營銷型網站建設、網站設計、ChatGPT、網站改版

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容