你现在需要知道的 Javascript 代码片段🔥 - #1

2025-06-08

你现在需要知道的 Javascript 代码片段🔥 - #1

JavaScript 是最流行的编程语言之一。正如许多人所说：“如果你只打算学习一种编程语言，那就选择 JavaScript。”

如果你觉得这很有吸引力，那么我接下来会创建一个系列，每周三分享 10 个 Javascript 代码片段，持续 5 周。
这条推文最初启发了我创建这个系列，欢迎点赞并关注我。

这里列出了 10 个有益的片段，您可以立即学习和使用。

让我们开始吧！

1️⃣全部

如果谓词函数对集合中的所有元素都返回 true，则此代码段返回 true，否则返回 false。如果要使用布尔值作为默认值，可以省略第二个参数“fn”。

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
Enter fullscreen mode Exit fullscreen mode

2️⃣ arrayToCSV

此代码片段将元素转换为以逗号分隔的字符串。

const arrayToCSV = (arr, delimiter = ',') =>
  arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');

arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'
Enter fullscreen mode Exit fullscreen mode

3️⃣ arrayToHtmlList

此代码片段将数组的元素转换为列表标签，并将它们附加到给定 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');
Enter fullscreen mode Exit fullscreen mode

4️⃣分叉

此代码片段将值分成两组，然后将过滤器的真值元素放入第一组，否则放入第二组。

您可以使用 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'] ]
Enter fullscreen mode Exit fullscreen mode

5️⃣字节大小

此代码片段返回字符串的长度（以字节为单位）。

const byteSize = str => new Blob([str]).size;

byteSize('😀'); // 4
byteSize('Hello World'); // 11
Enter fullscreen mode Exit fullscreen mode

6️⃣ 大写

此代码片段将字符串的首字母大写。

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

capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'
Enter fullscreen mode Exit fullscreen mode

一年中的第 7 天

此代码片段从 Dateobject 获取一年中的某一天。

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

dayOfYear(new Date()); // 272
Enter fullscreen mode Exit fullscreen mode

8️⃣ 去掉大写字母

此代码片段将字符串的首字母转换为小写。

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

decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar'); // 'fooBar'
Enter fullscreen mode Exit fullscreen mode

9️⃣ 次出现

此代码片段计算数组中某个值的出现次数。

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

🔟 default
此代码片段为对象中所有未定义的属性分配默认值。

const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);

defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }
Enter fullscreen mode Exit fullscreen mode

直到下周三，
Abhiraj

鏂囩珷鏉ユ簮锛�https://dev.to/abhirajb/javascript-snippets-you-need-to-know-right-now-2mo6
Devto 翻译
PREV
你现在需要知道的 Javascript 代码片段🔥 - #3
NEXT
10 个技巧助您改善网站设计。