天天看点

[第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]           

复制

这段代码, 可以合并两个数组, 返回一个合并之后的, 没有重复元素的数组。

上面介绍了一些数据操作的方法, 方法不唯一, 这里知识介绍了一种思路。

复杂的数据操作功能, 都可以用通过组合的方式来实现, 这一点在函数式编程中尤其常见。

希望上文能对大家有所帮助 谢谢。