28 JavaScriptを知っている必要があります


今日はJavaScriptのいくつかの一般的なテクニックを紹介します.迅速かつ容易に設定するプロセスの一般的な問題.

1 ) JavaScript逆列

以下はコードです.
const stringReverse = str => str.split("").reverse().join("");
stringReverse('hello world'); /*dlrow olleh*/

2 )ページの先頭までスクロールする

以下はコードです.
const scrollToTop = () => window.scrollTo(0, 0);
scrollToTop();

3 )配列の重複を削除する

以下はコードです.
const removeDuplicate = (arr) => [...new Set(arr)];
removeDuplicate([1, 2, 3, 4, 4, 2, 1]); // [1, 2, 3, 4]

4 )配列内のランダムな項目を取得する

以下はコードです.
const randomItemArray = (arr) => arr[Math.floor(Math.random() * arr.length)];
randomItemArray(['a', 'b', 'c', 1, 2, 3]);

5 )配列の最大数を得る

以下はコードです.
const maxNumber = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
maxNumber([4,9,5,7,2]) /* 9 */

検査型番

以下はコードです.
function isNumber(num) {
  return !isNaN(parseFloat(num)) && isFinite(num);
}
isNumber("Hello"); /*false*/
isNumber(123);/*true*/

7 )検査タイプNULL

以下はコードです.
const checkNull = val => val === undefined || val === null;
checkNull(123) /* false */
checkNull() /* true */
checkNull('hello') /* false */

8 )配列内のmin数を取得する

以下はコードです.
const minNumber = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
console.log(minNumber([3,5,9,7,1])) /*1*

9 )配列内のmin数を取得する

以下はコードです.
const averageNumber = arr => arr.reduce((a, b) => a + b) / arr.length;
averageNumber([1, 2, 3, 4, 5]) /* 3 */

10 )要素の型の確認

以下はコードです.
 const checkType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
checkType(true) /*boolean*/
checkType("hello World") /*string*/
checkType(123) /*number*/

11 )配列内のcount要素の出現

以下はコードです.
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1,2,2,4,5,6,2], 2) /* Number 2 Occurrences 3 times in array */

12 ) JavaScriptを使用して現在のURLを取得する

以下はコードです.
const getCurrentURL = () => window.location.href;
getCurrentURL() /* https://en.niemvuilaptrinh.com */

13 )文字列の文字化

以下はコードです.
const capitalizeString = str => str.replace(/b[a-z]/g, char => char.toUpperCase());
capitalizeString('niem vui lap trinh'); /* 'Niem Vui Lap Trinh' */

14 ) RGBを16進数に変換する

以下はコードです.
 const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 rgbToHex(52, 45, 125); /* Result: '#342d7d'*/

15 )数値を配列に変換する

以下はコードです.
const numberToArray = n => [...`${n}`].map(i => parseInt(i));
numberToArray(246) /*[2, 4, 6]*/
numberToArray(357911) /*[3, 5, 7, 9, 1, 1]*/

16 ) HTMLからコンテンツを取得する
これは、ログイン、登録、投稿コンテンツの形式で情報を記入するときに、ユーザーがWebページにHTMLタグを埋め込むことができないようにするのに非常に役立ちます.

以下はコードです.
const getTextInHTML = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
getTextInHTML('<h2>Hello World</h2>'); /*'Hello World'*/

17 ) JSに複数の変数を割り当てる

以下はコードです.
var [a,b,c,d] = [1, 2, 'Hello', false];
console.log(a,b,c,d) /* 1 2 'Hello' false */

18 )空配列

以下はコードです.
let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log(arr); /* Result : [] */

19 ) JSにおけるコピーオブジェクト

以下はコードです.
const obj = {
    name: "niem vui lap trinh",
    age: 12
};
const copyObject = { ...obj };
console.log(copyObject); /* {name: 'niem vui lap trinh', age: 12}*/ 

20 )偶数と奇数のチェック

以下はコードです.
const isEven = num => num % 2 === 0;
console.log(isEven(1)); /*false*/
console.log(isEven(2)); /*true*/

21 )複数の配列を結合する

以下はコードです.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr = arr1.concat(arr2);
console.log(arr); /* [1, 2, 3, 4, 5, 6] */

22 )内容をクリップボードにコピーする

以下はコードです.
const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text)
}

23 )値の範囲から乱数を選択する

以下はコードです.
var max = 10;
var min = 1;
var numRandom = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(numRandom)

24 )チェック要素は集中します.

以下はコードです.
const elementFocus = (el) => (el === document.activeElement);
elementIsInFocus(element);
/*if true element is focus*/
/*if false element is not focus*/

25 ) JSによるアップルデバイスのテスト

以下はコードです.
const isAppleDevice =
/Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
/*if true element is apple devices **/
/*if false element is not  apple devices*/

26 )文字列を配列に変換する

以下はコードです.
const str = "Hello";
const arr = [...str];
console.log(arr); /* ['H', 'e', 'l', 'l', 'o'] */

27 ) JSにおける矢印関数の使用

以下はコードです.
/* regular function*/
const sum = function(x, y) {
  return x + y;
};
/* arrow function */
const sum = (x, y) => x + y;
概要
私はこの記事は、開発のウェブサイトのための有用なJavaScriptの知識を提供することを期待している場合は、ご質問がある場合は、私にメールしてください、私はできるだけ早く対応します.私たちはあなたがより良い記事を書くことができるので、私たちのウェブサイトをサポートし続けてほしい.良い一日を!