更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

Web前端工程師要掌握的JavaScript代碼片段(一)

  • 發布:Web前端培訓
  • 來源:Web職場
  • 時間:2020-04-03 17:00

今天小編要跟大家分享的文章是關于Web前端工程師要掌握的JavaScript代碼片段(一)。正在從事web前端工作的小伙伴們來和小編一起看一看吧,希望本篇文章能夠對正在從事web前端工作的小伙伴們有所幫助。

1、Anagrams of string(帶有重復項)

使用遞歸。對于給定字符串中的每個字母,為字母創建字謎。使用map()將字母與每部分字謎組合,然后使用reduce()將所有字謎組合到一個數組中,最基本情況是字符串長度等于2或1。

const anagrams = str => {

if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str];

return str.split('').reduce((acc, letter, i) =>

acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);

};

// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']

2、數組平均數

使用reduce()將每個值添加到累加器,初始值為0,總和除以數組長度。

const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;

// average([1,2,3]) -> 2

3、大寫每個單詞的首字母

使用replace()匹配每個單詞的第一個字符,并使用toUpperCase()來將其大寫。

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());

// capitalizeEveryWord('hello world!') -> 'Hello World!'

4、首字母大寫

使用slice(0,1)和toUpperCase()大寫第一個字母,slice(1)獲取字符串的其余部分。省略lowerRest參數以保持字符串的其余部分不變,或將其設置為true以轉換為小寫。(注意:這和上一個示例不是同一件事情)

const capitalize = (str, lowerRest = false) =>

str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));

// capitalize('myName', true) -> 'Myname'

5、檢查回文

將字符串轉換為toLowerCase(),并使用replace()從中刪除非字母的字符。然后,將其轉換為tolowerCase(),將('')拆分為單獨字符,reverse(),join(''),與原始的非反轉字符串進行比較,然后將其轉換為tolowerCase()。

const palindrome = str => {

const s = str.toLowerCase().replace(/[\W_]/g,'');

return s === s.split('').reverse().join('');

}

// palindrome('taco cat') -> true

6、計數數組中值的出現次數

每次遇到數組中的特定值時,使用reduce()來遞增計數器。

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);

// countOccurrences([1,1,2,1,2,3], 1) -> 3

7、當前URL

使用window.location.href來獲取當前URL。

const currentUrl = _ => window.location.href;

// currentUrl() -> 'https://google.com'

8、Curry

使用遞歸。如果提供的參數(args)數量足夠,則調用傳遞函數f,否則返回一個curried函數f。

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

9、Deep flatten array

使用遞歸,使用reduce()來獲取所有不是數組的元素,flatten每個元素都是數組。

const deepFlatten = arr =>

arr.reduce((a, v) => a.concat(Array.isArray(v) ? deepFlatten(v) : v), []);

// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]

10、數組之間的區別

從b創建一個Set,然后在a上使用Array.filter(),只保留b中不包含的值。

const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };

// difference([1,2,3], [1,2]) -> [3]

11、兩點之間的距離

使用Math.hypot()計算兩點之間的歐幾里德距離。

const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);

// distance(1,1, 2,3) -> 2.23606797749979

12、可以按數字整除

使用模運算符(%)來檢查余數是否等于0。

const isDivisible = (dividend, divisor) => dividend % divisor === 0;

// isDivisible(6,3) -> true

13、轉義正則表達式

使用replace()來轉義特殊字符。

const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

// escapeRegExp('(test)') -> \\(test\\)

14、偶數或奇數

使用Math.abs()將邏輯擴展為負數,使用模(%)運算符進行檢查。如果數字是偶數,則返回true;如果數字是奇數,則返回false。

const isEven = num => num % 2 === 0;

// isEven(3) -> false

15、階乘

使用遞歸。如果n小于或等于1,則返回1。否則返回n和n - 1的階乘的乘積。

const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);

// factorial(6) -> 720

16、斐波那契數組生成器

創建一個特定長度的空數組,初始化前兩個值(0和1)。使用Array.reduce()向數組中添加值,后面的一個數等于前面兩個數相加之和(前兩個除外)。

const fibonacci = n =>

Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);

// fibonacci(5) -> [0,1,1,2,3]

17、過濾數組中的非唯一值

將Array.filter()用于僅包含唯一值的數組。

const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));

// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]

18、Flatten數組

使用reduce()來獲取數組中的所有元素,并使用concat()來使它們flatten。

const flatten = arr => arr.reduce((a, v) => a.concat(v), []);

// flatten([1,[2],3,4]) -> [1,2,3,4]

19、從數組中獲取最大值

使用Math.max()與spread運算符(...)結合得到數組中的最大值。

const arrayMax = arr => Math.max(...arr);

// arrayMax([10, 1, 5]) -> 10

20、從數組中獲取最小值

使用Math.min()與spread運算符(...)結合得到數組中的最小值。

const arrayMin = arr => Math.min(...arr);

// arrayMin([10, 1, 5]) -> 1

21、獲取滾動位置

如果已定義,請使用pageXOffset和pageYOffset,否則使用scrollLeft和scrollTop,可以省略el來使用window的默認值。

const getScrollPos = (el = window) =>

({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,

y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});

// getScrollPos() -> {x: 0, y: 200}

22、最大公約數(GCD)

使用遞歸。基本情況是當y等于0時。在這種情況下,返回x。否則,返回y的GCD和x / y的其余部分。

const gcd = (x, y) => !y ? x : gcd(y, x % y);

// gcd (8, 36) -> 4

23、Head of list

返回ARR[0]

const head = arr => arr[0];

// head([1,2,3]) -> 1

24、list初始化

返回arr.slice(0,-1)

const initial = arr => arr.slice(0, -1);

// initial([1,2,3]) -> [1,2]

以上就是小編今天為大家分享的關于Web前端工程師要掌握的JavaScript代碼片段(一)的文章,希望本篇文章能夠對正在從事web前端工作的小伙伴們有所幫助。想要了解更多web前端相關知識和想要了解后面的代碼片段的小伙伴,記得關注達內web培訓官網。

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:Web前端新手該如何進行性能優化?
下一篇:不是計算機專業可以轉行做web前端開發嗎

Web前端工程師都在用的前端開發工具匯總

Web前端初學者快速掌握JavaScript的技巧

Web前端開發者要知道的幾個前端框架

2020年Web前端面試題匯總(一)

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天