2022年の初心者向けの5つの便利なJavaScriptコード例


1.配列をソートする



配列のソートは、最も簡単で最も頻繁に使用されるスニペットの 1 つです.基本的に、JavaScript には独自の組み込み関数、つまり sort() 関数があります.この sort() 関数は、数値だけでなく配列も直接ソートするのに役立ちます.

sort() 関数は、アルファベット順と数値順の両方の方法で並べ替えます.コードを見てみましょう:

//strings
const names = ["Prakash", "Ajay", "Mohan"];
names.sort();
//['Ajay', 'Mohan', 'Prakash' ]
//Numbers
const numbers = [25, 18, 29];
numbers.sort((a, b) => {
  return a - b;
});
//[ 18, 25, 29 ]


2.文字列を逆にする



文字列を逆にすることは、3 つの異なる方法で解決できる最も簡単で非常に一般的な問題です.以下は、文字列を逆にする 3 つの方法です.

3 つの単純な関数、つまり、split()、reverse()、および join() を使用する: まず、文字列を分割して配列を作成し、次にそれを逆にして、最後にそれらを結合する必要があります.
ループを使用する: 非常に単純で、ほとんどの人はこの概念について既に知っています. for ループを逆の順序で使用し、それを新しい変数に追加するだけです.
さらに、spread operator(…) と reverse() 関数を使用して文字列を逆にすることもできます.
最後の可能な解決策は、再帰関数です.コードを見てみましょう.

// reverse using basic functions
function reverse(string) {
    return string.split("").reverse().join("");
}
console.log(reverse('Prakash'));


// reverse using loop

function reverse(string) {
    var newString = "";
    for (var i = string.length - 1; i >= 0; i--) {
        newString += string[i];
    }
    return newString;
}
console.log(reverse('Prakash'));


//Using spread operator

function Reverse(str){
return [...str].reverse().join('');
}
console.log(Reverse("data")) //atad


// reverse using recursion function

function reverse(string) {
  if (string === "")
    return "";
  else
    return reverse(string.substr(1)) + string.charAt(0);
}
console.log(reverse('Prakash'));


3. Spread Operator の使用



スプレッド演算子は、複数の引数または要素が予想される場所で式を展開できるようにする JavaScript 機能です.この記事では、JavaScript コード スニペットでスプレッド演算子を使用する方法について説明します.

スプレッド演算子は 3 つのドット (…) で表され、配列、セット、およびその他の iterable で使用できます.別の式を引数として受け入れ、配列またはセット内の各要素に対して評価します.

JavaScript コード例:

let data = [1,2,3,4,5];
console.log(...data);
//  1 2 3 4 5
let data2 = [6,7,8,9,10];
let combined = [...data, ...data2];
console.log(...combined);
// 1 2 3 4 5 6 7 8 9 10
console.log(Math.max(...combined));
// 10


4.配列の違い



基本的に、ES6 JavaScript に追加された新しい概念を使用する最も興味深いコード スニペットです. JavaScript コード例 (スニペット) は、長い配列で作業していて、その配列の類似点または相違点を知りたい場合に便利です.

このコード スニペットでは、スプレッド演算子 (…) などの新しい JavaScript 機能を使用します.通常、イテラブル (配列など) を受け取り、それを個々の要素に展開します.

//Code Example

function ArrayDiff(a, b){
  const setX = new Set(a)
  const setY = new Set(b)
return [
    ...a.filter(x=>!setY.has(x)),
    ...b.filter(x=>!setX.has(x))
  ]
}
  const Array1 = [1, 2, 3];
  const Array2 = [1, 2, 3, 4, 5];
console.log(ArrayDiff(Array1, Array2)) // [4, 5]


5.オブジェクトをループする



基本的に、オブジェクトのループ処理は、すべてのプログラミング言語で定期的に必要とされるものであり、使用できる最も簡単な JavaScript コード例またはスニペットです.

場合によっては、複数のキーと値を持つ複雑なオブジェクトになることがあります.この種のペアを通過するのは少し混乱します.ここでは、考えられる 2 つの方法について説明します.

ここでは、オブジェクトをループする 2 つの方法について説明しました. 1 つ目では for in ループを使用し、2 つ目では非常に簡単な object を使用しました.

JavaScript コード例:

// Simple way

const person = { name: "Prakash", Age: 25, Gender: "Male" };
for (const property in person) {
  console.log(`${property}: ${person[property]}`);
}

// Another way
const anotherPerson = {
  Name: 'Shoaib',
  Age: 25,
  Gender:"Male"
};

for (const [key, value] of Object.entries(anotherPerson)) {
  console.log(`${key}: ${value}`);
}


https://untiedblogs.com/9-useful-javascript-code-examples-for-beginners/