常用js代码片段(一)

1、如果数组所有元素都满足函数条件,则返回true。调用时,如果省略第二个参数,则默认传递布尔值。

const all= (arr, fn=Boolean) => arr.every(fn);
console.log(all([0,1,1])); //false
console.log(all([1,2,3]); //true
console.log(all([4,5,5,3], x => x>2)); //true

2、判断数组中的元素是否都相等

const allEqual = arr => arr.every(val => val === arr[0]);
console.log(allEqual([1,2,3,4,5])); //false
console.log(allEqual([1,1,1,1])); //true

3、检查两个数字是否近似相等,差异值可以通过传参的形式进行设置

const approximatelyEqual = (val1, val2, epsilon = 0.001) => Math.abs(val1- val2) < epsilon;
console.log(approximatelyEqual(Math.PI / 2, 1.5708));//true

4、将数组中没有逗号或双引号的元素转换成带有逗号分隔符的字符串,即CSV格式识别的形式

const arrayToCSV = (arr, delimiter = ',') => arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
console.log(arrayToCSV([['a', 'b'], ['c', 'd']])); // '"a","b"\n"c","d"'
console.log(arrayToCSV([['a', 'b'], ['c', 'd']], ';')); // '"a";"b"\n"c";"d"'

5、将数组元素转换成<li>标记,并将此元素添加至给定的ID元素标记内。

const arrayToHtmlList = (arr, listID) => (el => (
    (el = document.querySelector('#' + listID)),
    (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
  ))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');

6、执行一个函数,将剩余的参数传回函数当参数,返回相应的结果,并能捕获异常。

const attempt = (fn, ...args) => {
  try {
    return fn(...args);
  } catch (e) {
    return e instanceof Error ? e : new Error(e);
  }
};
var elements = attempt(function(selector) {
  return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []

7、求两个或多个数的平均数。

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

8、一个 map()函数和 reduce()函数结合的例子,此函数先通过 map() 函数将对象转换成数组,然后在调用reduce()函数进行累加,然后根据数组长度返回平均值。

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

9、此函数包含两个参数,类型都为数组,依据第二个参数的真假条件,将一个参数的数组进行分组,条件为真的放入第一个数组,其它的放入第二个数组。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式。

const bifurcate = (arr, filter) => arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); // [ ['beep', 'boop', 'bar'], ['foo'] ]

 10、将数组按照指定的函数逻辑进行分组,满足函数条件的逻辑为真,放入第一个数组中,其它不满足的放入第二个数组 。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式,基于函数过滤逻辑,通过 Array.prototype.push() 函数将其添加到数组中。

const bifurcateBy = (arr, fn) => arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); // [ ['beep', 'boop', 'bar'], ['foo'] ]

11、用于检测页面是否滚动到页面底部。

const bottomVisible = () => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
bottomVisible(); // true

12、返回字符串的字节长度。这里用到了Blob对象,Blob(Binary Large Object)对象代表了一段二进制数据,提供了一系列操作接口。其他操作二进制数据的API(比如File对象),都是建立在Blob对象基础上的,继承了它的属性和方法。生成Blob对象有两种方法:一种是使用Blob构造函数,另一种是对现有的Blob对象使用slice方法切出一部分。

const byteSize = str => new Blob([str]).size;
byteSize('😀'); // 4
byteSize('Hello World'); // 11

13、将字符串的首字母转成大写,这里主要运用到了ES6的展开语法在数组中的运用。

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

14、将一个句子中每个单词首字母转换成大写字母,这里中要运用了正则表达式进行替换。

const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalizeEveryWord('hello world!'); // 'Hello World!'

15、将非数值的值转换成数组对象。

const castArray = val => (Array.isArray(val) ? val : [val]);
castArray('foo'); // ['foo']
castArray([1]); // [1]

16、将数组中移除值为 false 的内容。

const compact = arr => arr.filter(Boolean);
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); // [ 1, 2, 3, 'a', 's', 34 ]

17、统计数组中某个值出现的次数。

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

18、使用 existSync() 检查目录是否存在,然后使用 mkdirSync() 创建目录(如果不存在)。

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test'); // creates the directory 'test', if it doesn't exist

19、返回当前访问的 URL 地址。

const currentURL = () => window.location.href;
currentURL(); // 'https://www.baidu.com'

20、返回当前是今年的第几天

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

21、将字符串的首字母转换成小写字母。

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

22、通过递归的形式,将多维数组展平成一维数组。

const deepFlatten = arr => [].concat(...arr.map(v =>  (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]

23、去重对象的属性,如果对象中含有重复的属性,以前面的为准。

const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);
defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

24、延迟函数的调用,即异步调用函数。

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

25、将标准的度数,转换成弧度。

const degreesToRads = deg => (deg * Math.PI) / 180.0;
degreesToRads(90.0); // ~1.5708

26、查找两个给定数组的差异,查找出前者数组在后者数组中不存在元素。

const difference = (a, b) => {
  const s = new Set(b);
  return a.filter(x => !s.has(x));
};
difference([1, 2, 3], [1, 2, 4]); // [3]

27、通过给定的函数来处理需要对比差异的数组,查找出前者数组在后者数组中不存在元素。

const differenceBy = (a, b, fn) => {
  const s = new Set(b.map(fn));
  return a.filter(x => !s.has(fn(x)));
};
differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]

28、按照给定函数逻辑筛选需要对比差异的数组,查找出前者数组在后者数组中不存在元素。

const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);
differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b));// [1, 1.2]

 

 
posted @ 2020-07-08 13:46  jmwlhj  阅读(234)  评论(0编辑  收藏  举报