天天看點

[第6期] 三十秒掌握一段有用的JavaScript 代碼 - Part 17. flatten8. deepFlatten9. Get Time From Date10. Get Days Between Dates11. Filter Duplicate Elements12. union

Javascript 是當今非常火爆的語言之一 , 市面上也有很多Js的教育訓練機構。

正如很多人所言:如果你想掌握一門程式設計語言, 那就選JavaScript吧。

也可以說,

Javascript 是最好的程式設計語言之一

[第6期] 三十秒掌握一段有用的JavaScript 代碼 - Part 17. flatten8. deepFlatten9. Get Time From Date10. Get Days Between Dates11. Filter Duplicate Elements12. union

能用 Javascript 實作的, 都必将使用 Javascript 實作。

引用一段目前很多的一段言論:

“Software is eating the world, and JavaScript is eating software. JavaScript is becoming more dominant with each year, and nobody knows what might eventually replace it.

由此可見Javavscript 的活力。

下面, 我将介紹一些你能學習,也能迅速應用在項目中的Javascript 片段。

1. average

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2           

複制

這段代碼計算一批數字的平均值。

2. averageBy

const averageBy = (arr, fn) =>
  arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) / arr.length;

averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5           

複制

這段代碼, 可以根據傳入的函數, 将每一個元素 映射為值, 然後計算傳回平均值。

3. capitalize

const capitalize = ([first, ...rest]) =>
  first.toUpperCase() + rest.join('');
  
capitalize('fooBar'); // 'FooBar'           

複制

這段代碼, 傳回把首字母大寫之後的字元串。

4. capitalizeEveryWord

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

capitalizeEveryWord('hello world!'); // 'Hello World!'           

複制

和上面那段相似,這個函數傳回把每個單詞的首字母都大寫之後的字元串。

5. dayOfYear

const dayOfYear = date =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date()); // 272           

複制

這段代碼擷取一個日期對象的天數。

6. countOccurrences

const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3           

複制

計算給定數字出現的次數。

7. flatten

const flatten = (arr, depth = 1) =>
  arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);

flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]           

複制

這段代碼, 展開制定層數的數組。

8. deepFlatten

const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));

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

複制

這段代碼以遞歸的方式展開數組。

9. Get Time From Date

const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

getColonTimeFromDate(new Date()); // "08:38:00"           

複制

這段代碼擷取目前時間的時分秒。

10. Get Days Between Dates

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);
  
getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2           

複制

這段代碼, 獲得兩個日期之間相差的天數。

11. Filter Duplicate Elements

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

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

複制

這段代碼,去除一個array中的重複元素。

12. union

const union = (a, b) => Array.from(new Set([...a, ...b]));

union([1, 2, 3], [4, 3, 2]); // [1,2,3,4]           

複制

這段代碼, 可以合并兩個數組, 傳回一個合并之後的, 沒有重複元素的數組。

上面介紹了一些資料操作的方法, 方法不唯一, 這裡知識介紹了一種思路。

複雜的資料操作功能, 都可以用通過組合的方式來實作, 這一點在函數式程式設計中尤其常見。

希望上文能對大家有所幫助 謝謝。