前端常用的20个JavaScript函数

涓轰簡鎻愰珮寮€鍙戞晥鐜囧苟缂栧啓鏇存竻鏅般€佸彲缁存姢鐨勪唬鐮侊紝绋嬪簭鍛樹滑缁忓父浣跨敤鍚勭鑷畾涔夊嚱鏁般€備粖澶╃粰澶у浠嬬粛20涓父鐢ㄧ殑JavaScript鍑芥暟锛屽笇鏈涘澶у鏈夊府鍔┿€?/p>

1. 娣卞害澶嶅埗瀵硅薄

娣卞害澶嶅埗瀵硅薄鏄湪JavaScript涓潪甯告湁鐢ㄧ殑鎿嶄綔锛岀壒鍒槸褰撲綘闇€瑕佸厠闅嗗璞′互閬垮厤寮曠敤闂鏃躲€?code>deepCopy鍑芥暟閫掑綊鍦板鍒跺璞＄殑鎵€鏈夊睘鎬э紝纭繚涓嶄細鍏变韩寮曠敤銆?/p>

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const copy = Array.isArray(obj) [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

2. 寮傛寰幆鎵ц鏁扮粍鍏冪礌

鍦ㄥ鐞嗗紓姝ヤ换鍔℃椂锛岀粡甯搁渶瑕佸惊鐜墽琛屾暟缁勫厓绱狅紝骞剁‘淇濇瘡涓换鍔″畬鎴愬悗鎵嶆墽琛屼笅涓€涓换鍔°€?code>asyncForEach鍑芥暟鍙互甯姪浣犲疄鐜拌繖涓€鐩爣锛屼互閬垮厤鍥炶皟鍦扮嫳銆?/p>

async function asyncForEach(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    await callback(arr[i], i, arr);
  }
}

3. 鐢熸垚鍞竴鏍囪瘑绗︼紙UUID锛?/h3>

鐢熸垚鍞竴鏍囪瘑绗﹀浜庤窡韪璞℃垨鏁版嵁闈炲父鏈夌敤銆?code>generateUUID鍑芥暟鐢熸垚绗﹀悎UUID鏍煎紡鐨勫敮涓€鏍囪瘑绗︼紝鍙敤浜庡敮涓€鏍囪瘑鏁版嵁鎴栧璞°€?/p>

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0,
        v = c === 'x' r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

4. 鎵佸钩鍖栧祵濂楁暟缁?/h3>

鏈夋椂锛屼綘闇€瑕佸皢宓屽鏁扮粍鎵佸钩鍖栵紝浠ヤ究鏇磋交鏉惧湴澶勭悊鏁版嵁銆?code>flattenArray鍑芥暟灏嗗祵濂楁暟缁勮浆鎹负涓€缁存暟缁勶紝浣挎暟鎹洿鏄撲簬澶勭悊銆?/p>

function flattenArray(arr) {
  return arr.reduce((acc, val) => Array.isArray(val) acc.concat(flattenArray(val)) : acc.concat(val), []);
}

5. 鏌ユ壘涓や釜鏁扮粍鐨勪氦闆?/h3>

鏌ユ壘涓や釜鏁扮粍鐨勪氦闆嗘槸瑙ｅ喅鏁版嵁澶勭悊闂鐨勪竴绉嶅父瑙佹柟寮忋€?code>arrayIntersection鍑芥暟鎺ュ彈涓や釜鏁扮粍浣滀负鍙傛暟锛屽苟杩斿洖瀹冧滑鐨勪氦闆嗐€?/p>

function arrayIntersection(arr1, arr2) {
  return arr1.filter(value => arr2.includes(value));
}

6. 鏌ユ壘涓や釜鏁扮粍鐨勫樊闆?/h3>

鏈夋椂锛屼綘闇€瑕佹壘鍒颁袱涓暟缁勪箣闂寸殑宸紓銆?code>arrayDifference鍑芥暟鎺ュ彈涓や釜鏁扮粍浣滀负鍙傛暟锛屽苟杩斿洖瀹冧滑鐨勫樊闆嗐€?/p>

function arrayDifference(arr1, arr2) {
  return arr1.filter(value => !arr2.includes(value));
}

7. 鍒ゆ柇鏄惁涓洪棸骞?/h3>

鍦ㄦ煇浜涙儏鍐典笅锛屼綘鍙兘闇€瑕佸垽鏂煇涓€骞存槸鍚︿负闂板勾銆?code>isLeapYear鍑芥暟鎺ュ彈涓€涓勾浠戒綔涓哄弬鏁帮紝骞惰繑鍥炲竷灏斿€硷紝鎸囩ず璇ュ勾浠芥槸鍚︿负闂板勾銆?/p>

function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

8. 灏嗗嚱鏁版煰閲屽寲

鍑芥暟鏌噷鍖栨槸涓€绉嶆湁鐢ㄧ殑鎶€鏈紝鍙互灏嗕竴涓帴鍙楀涓弬鏁扮殑鍑芥暟杞寲涓轰竴绯诲垪鎺ュ彈鍗曚釜鍙傛暟鐨勫嚱鏁般€?code>curry鍑芥暟鎺ュ彈涓€涓嚱鏁颁綔涓哄弬鏁帮紝骞惰繑鍥炲叾鏌噷鍖栫増鏈€?/p>

function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) {
      return func(...args);
    } else {
      return function(...nextArgs) {
        return curried(...args.concat(nextArgs));
      };
    }
  };
}

9. 鏌ユ壘鏁扮粍涓殑鏈€澶ц繛缁瓙鏁扮粍鍜?/h3>

鍦ㄥ鐞嗘暟鍊兼暟缁勬椂锛屼綘鍙兘闇€瑕佹壘鍒板叾涓殑鏈€澶ц繛缁瓙鏁扮粍鍜屻€?code>maxSubarraySum鍑芥暟鎺ュ彈涓€涓暟缁勪綔涓哄弬鏁帮紝骞惰繑鍥炴渶澶ц繛缁瓙鏁扮粍鐨勫拰銆?/p>

function maxSubarraySum(arr) {
  let maxSum = -Infinity;
  let currentSum = 0;
  for (let num of arr) {
    currentSum = Math.max(num, currentSum + num);
    maxSum = Math.max(maxSum, currentSum);
  }
  return maxSum;
}

10. 璁＄畻鏂愭尝閭ｅ鏁板垪

鏂愭尝閭ｅ鏁板垪鏄竴涓父瑙佺殑鏁板搴忓垪锛岀敤浜庢ā鎷熻嚜鐒剁晫鐨勮澶氱幇璞°€?code>fibonacci鍑芥暟鎺ュ彈涓€涓暣鏁颁綔涓哄弬鏁帮紝骞惰繑鍥炲搴斾綅缃殑鏂愭尝閭ｅ鏁般€?/p>

function fibonacci(n) {
  if (n <= 1) return n;
  let a = 0, b = 1;
  for (let i = 2; i <= n; i++) {
    let temp = b;
    b = a + b;
    a = temp;
  }
  return b;
}

11. 鐢熸垚鎸囧畾鑼冨洿鍐呯殑闅忔満鏁存暟

鏈夋椂浣犻渶瑕佺敓鎴愭寚瀹氳寖鍥村唴鐨勯殢鏈烘暣鏁扮敤浜庡悇绉嶇洰鐨勩€?code>getRandomInt鍑芥暟鎺ュ彈涓や釜鍙傛暟锛?code>min鍜?code>max锛屽苟杩斿洖涓€涓湪杩欎袱涓€间箣闂达紙鍖呮嫭杈圭晫锛夌殑闅忔満鏁存暟銆?/p>

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

12. 鍒ゆ柇鏄惁涓哄洖鏂囧瓧绗︿覆

鍥炴枃瀛楃涓叉槸鎸囨璇诲拰鍙嶈閮界浉鍚岀殑瀛楃涓层€?code>isPalindrome鍑芥暟鎺ュ彈涓€涓瓧绗︿覆浣滀负鍙傛暟锛屽皢鍏惰浆鎹负灏忓啓骞剁Щ闄ら潪瀛楁瘝鏁板瓧瀛楃锛岀劧鍚庢鏌ユ槸鍚︿负鍥炴枃瀛楃涓层€?/p>

function isPalindrome(str) {
  str = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  return str === str.split('').reverse().join('');
}

13. 灏嗙鏁拌浆鎹负鏃堕棿瀛楃涓?/h3>

浣犲彲鑳介渶瑕佸皢缁欏畾鐨勭鏁拌浆鎹负鏄撹鐨勬椂闂村瓧绗︿覆銆?code>secondsToTime鍑芥暟鎺ュ彈涓€涓鏁颁綔涓哄弬鏁帮紝骞跺皢鍏惰浆鎹负鏃?鍒?绉?/code>鐨勬牸寮忋€?/p>

function secondsToTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;
  return `${hours}:${minutes}:${remainingSeconds}`;
}

14. 鍒ゆ柇鏄惁涓烘暣鏁?/h3>

鍦ㄦ煇浜涙儏鍐典笅锛屼綘鍙兘闇€瑕佹鏌ヤ竴涓€兼槸鍚︿负鏁存暟銆?code>isInteger鍑芥暟鎺ュ彈涓€涓€间綔涓哄弬鏁帮紝骞惰繑鍥炲竷灏斿€硷紝鎸囩ず璇ュ€兼槸鍚︿负鏁存暟銆?/p>

function isInteger(value) {
  return Number.isInteger(value);
}

15. 璁＄畻瀛楃涓蹭腑鐗瑰畾瀛楃鐨勫嚭鐜版鏁?/h3>

countOccurrences鍑芥暟鎺ュ彈涓や釜鍙傛暟锛屼竴涓槸瀛楃涓诧紝鍙︿竴涓槸瑕佽绠楃殑瀛楃锛岀劧鍚庤繑鍥炶瀛楃鍦ㄥ瓧绗︿覆涓嚭鐜扮殑娆℃暟銆?/p>

function countOccurrences(str, target) {
  return str.split(target).length - 1;
}

16. 闅忔満鐢熸垚鎸囧畾鑼冨洿鍐呯殑鏁存暟

鏈夋椂锛屼綘鍙兘闇€瑕佺敓鎴愭寚瀹氳寖鍥村唴鐨勬暣鏁帮紝鑰屼笉浠呬粎鏄暣鏁般€?code>getRandomInt鍑芥暟鍙互鎺ュ彈min鍜?code>max涓や釜鍙傛暟锛岀劧鍚庣敓鎴愪竴涓湪杩欎袱涓€间箣闂寸殑闅忔満鏁存暟銆?/p>

function getRandomInt(min, max) {
  if (min > max) {
    [min, max] = [max, min];
  }
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

17. 灏嗗瓧绗︿覆鍙嶈浆

鏈夋椂锛屼綘鍙兘闇€瑕佸皢涓€涓瓧绗︿覆鍙嶈浆锛屼互瀹炵幇涓嶅悓鐨勬晥鏋溿€?code>reverseString鍑芥暟鎺ュ彈涓€涓瓧绗︿覆浣滀负鍙傛暟锛屽苟杩斿洖璇ュ瓧绗︿覆鐨勫弽杞増鏈€?/p>

function reverseString(str) {
  return str.split("").reverse().join("");
}

18. 灏嗛瀛楁瘝澶у啓

鏈夋椂锛屼綘鍙兘闇€瑕佸皢瀛楃涓蹭腑鐨勯瀛楁瘝澶у啓锛屼互婊¤冻鐗瑰畾鐨勬枃鏈牸寮忋€?code>capitalizeFirstLetter鍑芥暟鎺ュ彈涓€涓瓧绗︿覆浣滀负鍙傛暟锛屽苟杩斿洖涓€涓柊瀛楃涓诧紝鍏朵腑棣栧瓧姣嶅ぇ鍐欍€?/p>

function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

19. 鍒ゆ柇鏁扮粍鏄惁鍖呭惈鐗瑰畾鍏冪礌

鍦ㄥ鐞嗘暟缁勬椂锛屼綘鍙兘闇€瑕佺‘瀹氭暟缁勪腑鏄惁鍖呭惈鐗瑰畾鍏冪礌銆?code>arrayContains鍑芥暟鎺ュ彈涓€涓暟缁勫拰涓€涓鏌ユ壘鐨勫厓绱犱綔涓哄弬鏁帮紝鐒跺悗杩斿洖涓€涓竷灏斿€硷紝鎸囩ず鏁扮粍鏄惁鍖呭惈璇ュ厓绱犮€?/p>

function arrayContains(arr, element) {
  return arr.indexOf(element) !== -1;
}

20. 楠岃瘉鐢靛瓙閭欢鍦板潃鏍煎紡

鍦ㄥ鐞嗙敤鎴疯緭鍏ユ垨琛ㄥ崟鏁版嵁鏃讹紝浣犲彲鑳介渶瑕侀獙璇佺數瀛愰偖浠跺湴鍧€鐨勬牸寮忔槸鍚︽湁鏁堛€?code>isValidEmail鍑芥暟鎺ュ彈涓€涓數瀛愰偖浠跺湴鍧€浣滀负鍙傛暟锛屽苟浣跨敤姝ｅ垯琛ㄨ揪寮忔潵楠岃瘉鍏舵牸寮忔槸鍚︾鍚堟爣鍑嗐€?/p>

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

Happy coding! 馃殌馃懆馃捇馃摑

鏈枃鐢眒dnice澶氬钩鍙板彂甯?/p>