简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JavaScript コードのスニペット

WBOY
リリース： 2024-08-30 21:00:10
オリジナル
420 人が閲覧しました

Javascript Code Snippets

データ型

プリミティブデータ型

番号

let age = 25;
ログイン後にコピー

文字列

let name = "John";
ログイン後にコピー

ブール値

let isStudent = true;
ログイン後にコピー

未定義:

let address;
ログイン後にコピー

ヌル

let salary = null;
ログイン後にコピー

記号

let sym = Symbol("id");
ログイン後にコピー

BigInt

let bigIntNumber = 1234567890123456789012345678901234567890n;
ログイン後にコピー

非数 (NaN)
NaN は「Not-a-Number」の略で、有効な数値ではない値を表します

console.log(0 / 0); // NaN
console.log(parseInt("abc")); // NaN
ログイン後にコピー

データ型を確認するにはどうすればよいですか? 

console.log(typeof a);
ログイン後にコピー

クラス

1) クラスはコンストラクターを 1 つだけ持つことができます

class gfg {
    constructor(name, estd, rank) {
        this.n = name;
        this.e = estd;
        this.r = rank;
    }

    decreaserank() {
        this.r -= 1;
    }
}

const test = new gfg("tom", 2009, 43);

test.decreaserank();

console.log(test.r);
console.log(test);
ログイン後にコピー

継承 

class car {
    constructor(brand) {
        this.carname = brand;
    }

    present() {
        return 'I have a ' + this.carname;
    }
}
class Model extends car {
    constructor(brand, model) {
        super(brand);
        super.present();
        this.model = model;
    }

    show() {
        return this.present() + ', it is a ' + this.model;
    }
}
ログイン後にコピー

取得と設定 

class car {
    constructor(brand) {
        this.carname = brand;
    }

    // Getter method
    get cnam() {
        return "It is " + this.carname;  // Return a value
    }

    // Setter method
    set cnam(x) {
        this.carname = x;
    }
}

const mycar = new car("Ford");
console.log(mycar.cnam);
ログイン後にコピー

即時に呼び出される関数式 (IIFE)

IIFE は、定義されるとすぐに実行される関数です

(function() {
    console.log("IIFE executed!");
})();
ログイン後にコピー

高次関数

高階関数とは、他の関数を引数として受け取るか、結果として関数を返す関数です

function higherOrderFunction(callback) {
    return callback();
}

function sayHello() {
    return "Hello!";
}

console.log(higherOrderFunction(sayHello)); // "Hello!"
ログイン後にコピー

変数シャドーニング

変数シャドウイングは、ローカル変数が外部スコープ内の変数と同じ名前を持つ場合に発生します。
ローカル変数は、独自のスコープ内の外部変数をオーバーライドするか、非表示にします。
外部変数はそのまま残り、ローカル スコープの外部からアクセスできます。

var name = "John";

function sayName() {
  console.log(name);
  var name = "Jane";
}

sayName();
ログイン後にコピー

JavaScript での HTML 要素へのアクセス

JavaScript で HTML 要素にアクセスするには、いくつかの方法があります。

ID で要素を選択:

document.getElementById("elementId");
ログイン後にコピー

クラス名で要素を選択:

document.getElementsByClassName("className");
ログイン後にコピー

タグ名で要素を選択:

document.getElementsByTagName("tagName");
ログイン後にコピー

CSS セレクター:

document.querySelector(".className");
document.querySelectorAll(".className");
ログイン後にコピー

値渡し 

function changeValue(x) {
  x = 10;
  console.log("Inside function:", x)
}

let num = 5;
changeValue(num);
ログイン後にコピー

参照渡し 

function changeProperty(obj) {
  obj.name = "Alice";
  console.log("Inside function:", obj.name); // Output: Inside function: Alice
}

let person = { name: "Bob" };
changeProperty(person);
console.log("Outside function:", person.name); // Output: Outside function: Alice
ログイン後にコピー

厳密に使用する

JavaScript エンジンを厳密モードに切り替えます。これにより、一般的なコーディングミスが検出され、より多くの例外がスローされます。

"use strict";
x = 10; // Throws an error because x is not declared
ログイン後にコピー

スプレッド演算子

配列や文字列などの反復可能オブジェクトを、0 個以上の引数や要素が予期される場所で展開できるようにします

function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6
ログイン後にコピー

インスタンスの

演算子は、オブジェクトが特定のクラスまたはコンストラクター関数のインスタンスであるかどうかを確認します。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');

console.log(myDog instanceof Dog);   // true
console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Object); // true
console.log(myDog instanceof Array);  // false
ログイン後にコピー

フィルター

このメソッドは、提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]
ログイン後にコピー

減らす

このメソッドは、配列の各要素に対してリデューサー関数を実行し、単一の出力値を生成します。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((sum, value) => sum + value, 0);
// sum = 0 initially

console.log(sum); // 15
ログイン後にコピー

休む

このパラメーター構文を使用すると、関数は無限の数の引数を配列として受け入れることができます。

function sum(...numbers) {
  return numbers.reduce((sum, value) => sum + value, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(5, 10, 15, 20)); // 50
ログイン後にコピー

宣言の種類

暗黙的なグローバル変数
暗黙的なグローバル変数は、var、let、const などのキーワードで明示的に宣言されずに値が割り当てられると、グローバル スコープ内で自動的に作成される変数です。ただし、Strict モード
の場合、エラーがスローされます。 

function myFunction() {
    x = 10; // no error
}
ログイン後にコピー

定数
再代入できない定数変数を宣言しています。

const PI = 3.14;
ログイン後にコピー

させて
ブロックスコープの変数を宣言します。
同じ名前で再初期化することはできません

let c=1;
let c=3;// throws error
let count = 0;
if (true) {
    let count = 1;
    console.log(count); // Output: 1
}
console.log(count); // Output: 0
ログイン後にコピー

var
関数スコープまたはグローバルスコープの変数を宣言します。吊り上げと再割り当てを奨励します。

var name = 'John';
if (true) {
    var name = 'Doe';
    console.log(name); // Output: Doe
}
console.log(name); // Output: Doe

console.log(a)
var a=2 // prints undefined
ログイン後にコピー

合成イベント

合成イベント: React は、ネイティブ ブラウザ イベントの周囲に SyntheticEvent ラッパーを提供します。このラッパーは、さまざまなブラウザー間でイベントのプロパティと動作を正規化し、ブラウザーに関係なくイベント処理コードが同じように動作するようにします。

import React from 'react';

class MyComponent extends React.Component {
  handleClick = (event) => {
    // `event` is a SyntheticEvent
    console.log(event.type); // Always 'click' regardless of browser
    console.log(event.target); // Consistent target property
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}
ログイン後にコピー

JavaScript でのホイスティング

ホイスティングは、コンパイル段階で変数と関数の宣言が含まれるスコープの先頭に移動され、コード内で宣言される前に使用できるようにする JavaScript メカニズムです。ただし、宣言のみがホイストされ、初期化はホイストされません。

console.log(x); // Output: undefined
var x = 5;
console.log(x); // Output: 5

// Function hoisting
hoistedFunction(); // Output: "Hoisted!"
function hoistedFunction() {
    console.log("Hoisted!");
}

// Function expressions are not hoisted
notHoisted(); // Error: notHoisted is not a function
var notHoisted = function() {
    console.log("Not hoisted");
};
ログイン後にコピー

型強制

これは、あるデータ型から別のデータ型への値の自動変換です。強制には、暗黙的強制と明示的強制の 2 種類があります。

暗黙の強制

例

let result = 5 + "10"; // "510"
let result = "5" * 2; // 10
let result = "5" - 2; // 3
let result = "5" / 2; // 2.5
ログイン後にコピー

明示的な強制

これは、組み込み関数を使用して値をある型から別の型に手動で変換するときに発生します。

let num = 5;
let str = String(num); // "5"
let str2 = num.toString(); // "5"
let str3 = `${num}`; // "5"
ログイン後にコピー

Truthy Values

Non-zero numbers (positive and negative)
Non-empty strings
Objects (including arrays and functions)
Symbol
BigInt values (other than 0n)

Falsy Values

0 (zero)
-0 (negative zero)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN (Not-a-Number)

Props (Properties)

To pass data from a parent component to a child component. It is immutable (read-only) within the child component.

// Parent Component
function Parent() {
  const data = "Hello from Parent!";
  return <Child message={data} />;
}

// Child Component
function Child(props) {
  return <div>{props.message}</div>;
}
ログイン後にコピー

State

To manage data that can change over time within a component. It is mutable within the component.

// Function Component using useState
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
ログイン後にコピー

Closure

A closure in JavaScript is a feature where an inner function has access to the outer (enclosing) function's variables and scope chain even after the outer function has finished executing.

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log('Outer Variable:', outerVariable);
    console.log('Inner Variable:', innerVariable);
  };
}

const newFunction = outerFunction('outside');
newFunction('inside');
ログイン後にコピー

Currying

Currying is a technique of transforming a function that takes multiple arguments into a sequence of functions that each take a single argument.

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // Output: 8
console.log(add(2)(3)); // Output: 5
ログイン後にコピー

Generators

Generators are special functions that can be paused and resumed, allowing you to generate a sequence of values over time.

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = generateSequence();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }
ログイン後にコピー

Stay Connected!
If you enjoyed this post, don’t forget to follow me on social media for more updates and insights:

Twitter: madhavganesan
Instagram: madhavganesan
LinkedIn: madhavganesan

以上がJavaScript コードのスニペットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：Wasp: Web 開発における Django に対する JavaScript の答え 次の記事：競合のないレプリケートされたデータ型を理解する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1816
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1976
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1665
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1569
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1593
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！