親愛なるプログラミング愛好家へ, 今日 Xiaolan は 13 の基本的な JavaScript 関数を共有します. Web フロントエンド開発者であれば, これらの関数に精通しているはずです.
この記事のすべての JavaScript 関数をツールボックスに追加して、ソフトウェア プロジェクトでこれらのスニペットを可能な限り使用できるようにすることができます。
1. JavaScript 配列の最初/最後のアイテムを取得する
通常、JavaScript を使用する場合、配列の最初の要素が必要です。使いやすさのために、配列に使用できる単純な head 関数を作成し、最初の項目を返します。
おまけとして、配列から最後の項目を取得する JavaScript の last 関数を追加しました。
const head = (arr) => arr[0];
const last = (arr) => arr[arr.length - 1];
head([1, 2, 3, 4, 5, 6, 7, 8]); // 1
last([1, 2, 3, 4, 5, 6, 7, 8]); // 8
2. JavaScript のカンマ演算子
JavaScript のコンマ演算子は、最初は複雑になる可能性があります。
でも、実はとっても簡単！
たとえば、[x,y] を使用すると、常に正しいオペランドが返されます。理解を深めるために、次の JavaScript スニペットを参照してください。
console.log([1, 2, 3, 4][1]); // 2
console.log([1, 2, 3, 4][(1, 2)]); // 3
console.log([1, 2, 3, 4][2]); // 3
3.何でもクリップボードにコピー
Web サイトを開発するとき、特定のコンテンツをクリップボードにコピーして使いやすさを向上させたい場合があります。
JavaScript では、ドキュメントを直接使用するか (古い方法)、Navigator コンポーネントを使用して (新しい方法)、これを行うことができます。
function copyToClipboard() {
const copyText = document.getElementById('myInput');
copyText.select();
document.execCommand('copy');
}
// new API
function copyToClipboard() {
navigator.clipboard.writeText(document.querySelector('#myInput').value);
}
4. JavaScript でのネストされた破壊
破壊は JavaScript の重要なトピックであり、以前に詳細に共有されています。
しかし、今日、このコード スニペットは、オブジェクトから 2 つの変数のみを抽出する単純なオブジェクトの再編成を示しています。
const user = {
id: 459,
name: 'Paul Knulst',
age: 29,
job: {
role: 'Tech Lead',
},
};
const {
name,
job: { role },
} = user;
console.log(name); // Paul Knulst
console.log(role); // Tech Lead
5.グローバルに利用可能な関数を任意のオブジェクトに追加する
JavaScript では、任意のオブジェクトを新しいメソッドで拡張できます。
次の JavaScript スニペットは、toUpperCase 関数を配列に追加する方法を示しています。
Array.prototype.toUpperCase = function () {
let i;
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toUpperCase();
}
return this;
};
const myArray = ['paul', 'knulst', 'medium'];
console.log(myArray); // ['paul', 'knulst', 'medium']
console.log(myArray.toUpperCase()); // ['PAUL', 'KNULST', 'MEDIUM']
この概念はプロトタイプ継承と呼ばれ、この記事で詳しく説明します。
6. JavaScript で配列をオブジェクトにネイティブに変換する
JavaScript には、任意の入力配列をオブジェクトに変換するために使用できるネイティブ関数 Object.fromEntries があります。
const anArray = [
['firstname', 'Paul'],
['surname', 'Knulst'],
['address', 'worldwide'],
['role', 'Senior Engineer'],
['followers', 'not much'],
];
const anObj = Object.fromEntries(anArray);
console.log(anObj);
// {
// firstname: 'Paul',
// surname: 'Knulst',
// address: 'worldwide',
// role: 'Senior Engineer',
// followers: 'not much'
// }
7. 数値のフィボナッチを再帰的に取得する
再帰は、すべてのソフトウェア開発者が知っておくべき概念です!
この JavaScript スニペットは、再帰的に実装されたフィボナッチ関数を示しています。
const getFibonacci = (n, memo = {
}) =>
memo[n] ||
(n <= 2
? 1
: (memo[n] = getFibonacci(n - 1, memo) + getFibonacci(n - 2, memo)));
console.log(getFibonacci(4)); // 3
console.log(getFibonacci(8)); // 21
8. 日付が週末かどうかを確認する
この JavaScript スニペットは、各 Date オブジェクトが週末かどうかを簡単に確認できることを示しています。
週番号 (6 と 0) を変更し、それを他の曜日番号に置き換えて、別の日をチェックすることができます。
const isWeekend = (date) => date.getDay() === 6 || date.getDay() === 0;
console.log(isWeekend(new Date())); // false
console.log(isWeekend(new Date('2022-10-28'))); // false
console.log(isWeekend(new Date('2022-10-29'))); // true
9. 24 時間形式を午前/午後に変換する
異なる時間形式で作業するのは面倒です。
この単純な JavaScript スニペットは、任意の 24 時間制を午前/午後の時間に変換する関数を示しています。
const toAMPMFormat = (h) =>
`${
h % 12 === 0 ? 12 : h % 12}${
h < 12 ? ' am.' : ' pm.'}`;
console.log(toAMPMFormat(12)); // 12 pm.
console.log(toAMPMFormat(21)); // 9 pm.
console.log(toAMPMFormat(8)); // 8 am.
console.log(toAMPMFormat(16)); // 4 pm
10.オブジェクトにプロパティが存在するかどうかを確認する
印刷または使用する前に、属性が存在するかどうかを確認したい場合があります。
使用する前に if property !== undefined を実行する代わりに、JavaScript にはそれを実行するための組み込み関数があります。
const developer = {
name: 'Paul Knulst',
role: 'Tech Lead',
extra: 'Loves DevOps',
company: 'Realcore',
os: 'Windows',
};
const laptop = {
os: 'Windows',
buydate: '27.10.2022',
extra: 'looks cool',
};
console.log('name' in developer); // true
console.log('extra' in developer); // true
console.log('name' in laptop); // false
console.log('extra' in laptop); // true
nullish 合体演算子と組み合わせると、JavaScript コードがよりきれいになります!
11.配列に同じ値が含まれているかどうかを確認します
場合によっては、2 つの配列に同じ値が含まれているかどうかを知る必要があります。
この JavaScript スニペットには、2 つの配列を並べ替えて連結し、それらの文字列を比較することによってこれを行う関数 containsSameValues が含まれています。
const containSameValues = (arr1, arr2) =>
arr1.sort().join(',') === arr2.sort().join(',');
console.log(containSameValues([1, 2, 3], [1, 2, 3])); // true
console.log(containSameValues([1, 2, 3], [2, 3, 4])); // false
console.log(containSameValues([1, 2, 3], [1, 2, 3, 4])); // false
実際に配列を正しく比較するには、配列がソート可能でなければならないことに注意してください。
12. 変数がスコープ内にあることを確認する
この JavaScript 関数は私にとって非常にうまく機能します。
変数が特定の範囲内にあるかどうかを確認し、そうでない場合は、最も近い最小値または最大値にクランプします。
const clamp = (min, max, value) => {
if (min > max) {
throw new Error('min cannot be greater than max');
}
return value < min ? min : value > max ? max : value;
};
clamp(0, 6, -5); // 0
clamp(0, 6, 20); // 6
clamp(0, 6, 3); // 3
13. 1 行で 2 つの変数を入れ替える
これは JavaScript 関数ではありませんが、2 つの変数を交換するための非常に優れた方法です。
値を「一時的な」オブジェクトに入れるのではなく、1行で行う方法を示しています（これは他のプログラミング言語で行う必要があります）。
let x = 50;
let y = 100;
console.log(x, y); //50 100
[y, x] = [x, y];
console.log(x, y); //100 50
結論
以上が本日シェアした内容ですが、勉強や仕事で良いJavaScriptスニペットがあればコメントして一緒に学んでいただければと思います。