Coretan Kod Javascript

Jenis data

Jenis Data Primitif

Nombor

let age = 25; 

Rentetan

let name = "John";

Boolean

let isStudent = true;

Tidak ditentukan:

let address;

Batal

let salary = null;

Simbol

let sym = Symbol("id");

BigInt

let bigIntNumber = 1234567890123456789012345678901234567890n;

Bukan Nombor (NaN)
NaN bermaksud "Not-a-Number" dan mewakili nilai yang bukan nombor sah

console.log(0 / 0); // NaN
console.log(parseInt("abc")); // NaN

Bagaimana untuk menyemak jenis data?

console.log(typeof a);

Kelas

1) Kelas hanya boleh mempunyai satu pembina

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);

Warisan

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;
    }
}

Dapatkan dan Tetapkan

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);

Ungkapan Fungsi Dipanggil Serta-merta (IIFE)

IIFE ialah fungsi yang berjalan sebaik sahaja ia ditakrifkan

(function() {
    console.log("IIFE executed!");
})();

Fungsi Pesanan Tinggi

Fungsi tertib tinggi ialah fungsi yang mengambil fungsi lain sebagai argumen atau mengembalikan fungsi sebagai hasilnya

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

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

console.log(higherOrderFunction(sayHello)); // "Hello!"

Pembayang Pembolehubah

Pembayangan Pembolehubah berlaku apabila pembolehubah tempatan mempunyai nama yang sama dengan pembolehubah dalam skop luar.
Pembolehubah tempatan mengatasi atau menyembunyikan pembolehubah luar dalam skopnya sendiri.
Pembolehubah luar kekal utuh dan boleh diakses di luar skop setempat.

var name = "John";

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

sayName();

Mengakses Elemen HTML dalam JavaScript

Terdapat beberapa cara untuk mengakses elemen HTML dalam JavaScript:

Pilih elemen mengikut ID:

document.getElementById("elementId");

Pilih elemen mengikut Nama Kelas:

document.getElementsByClassName("className");

Pilih elemen mengikut Nama Tag:

document.getElementsByTagName("tagName");

Pemilih css:

document.querySelector(".className");
document.querySelectorAll(".className");

Lulus nilai

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

let num = 5;
changeValue(num);

Lulus dengan rujukan

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

menggunakan ketat

Ia menukar enjin JavaScript kepada mod ketat, yang menangkap kesilapan pengekodan biasa dan membuang lebih banyak pengecualian.

"use strict";
x = 10; // Throws an error because x is not declared

Pengendali penyebaran

Ia membenarkan leteran seperti tatasusunan atau rentetan dikembangkan di tempat di mana sifar atau lebih argumen atau elemen dijangka

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

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

InstanceOf

Pengendali menyemak sama ada objek ialah tika bagi kelas atau fungsi pembina tertentu.

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

Penapis

Kaedah ini mencipta tatasusunan baharu dengan semua elemen yang lulus ujian yang dilaksanakan oleh fungsi yang disediakan.

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

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

console.log(evenNumbers); // [2, 4, 6]

Kurangkan

Kaedah ini melaksanakan fungsi pengurang pada setiap elemen tatasusunan, menghasilkan satu nilai output.

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

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

console.log(sum); // 15

Rehat

Sintaks parameter ini membenarkan fungsi menerima bilangan argumen yang tidak ditentukan sebagai tatasusunan.

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

Jenis Pengisytiharan

Pembolehubah Global Tersirat
Pembolehubah global tersirat ialah pembolehubah yang dicipta secara automatik dalam skop global apabila ia diberikan nilai tanpa diisytiharkan secara eksplisit dengan kata kunci seperti var, let atau const. Tetapi ini menimbulkan ralat jika ia berada dalam mod Ketat

function myFunction() {
    x = 10; // no error
}

konst
Ia mengisytiharkan pembolehubah malar yang tidak boleh ditetapkan semula.

const PI = 3.14;

biar
Ia mengisytiharkan pembolehubah berskop blok.
Ia tidak boleh dimulakan semula dengan nama yang sama

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
Ia mengisytiharkan pembolehubah berskop fungsi atau berskop global. Ia menggalakkan pengangkatan dan penugasan semula.

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

Peristiwa Sintetik

Acara Sintetik: React menyediakan pembalut SyntheticEvent di sekitar acara penyemak imbas asli. Pembalut ini menormalkan sifat dan tingkah laku acara merentas penyemak imbas yang berbeza, memastikan kod pengendalian acara anda berfungsi dengan cara yang sama tanpa mengira penyemak imbas.

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>;
  }
}

Mengangkat dalam JavaScript

Hoisting ialah mekanisme JavaScript di mana pembolehubah dan pengisytiharan fungsi dialihkan ke bahagian atas skop kandungannya semasa fasa penyusunan, membolehkannya digunakan sebelum ia diisytiharkan dalam kod. Walau bagaimanapun, hanya pengisytiharan yang dinaikkan, bukan permulaan.

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");
};

Jenis paksaan

Ia ialah penukaran nilai automatik daripada satu jenis data kepada yang lain. Terdapat dua jenis paksaan: tersirat dan eksplisit.

Paksaan Tersirat

Cth.

let result = 5 + "10"; // "510"
let result = "5" * 2; // 10
let result = "5" - 2; // 3
let result = "5" / 2; // 2.5

Paksaan Eksplisit

Ia berlaku apabila kita menukar nilai secara manual daripada satu jenis kepada jenis lain menggunakan fungsi terbina dalam.

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

Atas ialah kandungan terperinci Coretan Kod Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!