پرش به مطلب اصلی

ویژگی‌ها

ویژگی‌های js مانند spread operators, async await, destructuring, ...

Destructuring​

زمانی که یک آبجکت داریم و نیاز به یک مقدار خاص داخلش داریم میتونیم از destructuring استفاده بکنیم

const data = {
    id: 13,
    name :"amir",
    age : 18,
    address:{
        city: "Tehran",
        street:"golestan 10",
        postalCode: 1549871134
    }
}

const {id, name, address:{city , postalCode}} = data

در این عملیات مقدارهای id, name, city, postalCode, address از داخل آبجکت data بدست می‌آیند و به عنوان یک متغیر با همین اسم‌ها ذخیره میشوند برای تغییر اسم یک چیز به طور خلاصه باید از سینتکس زیر استفاده کرد

const {name: firstName, age} = data

که اسم name رو به صورت firstName ذخیره میکند

Spread Operators​

فرض کن یک آبجکت(آرایه) داریم، میخوایم مقادیر قبلی اون آبجکت(آرایه) رو نگه داریم و صرفا یک مقدارش رو عوض کنیم یا بهش اضافه کنیم. در این حالت باید از این ویژگی استفاده کرد

array.js
const nums = [1, 3, 10, 14]
const newNums = [...nums, 18, 13] // [1, 3, 10, 14, 18, 13]

object.js
const user = {
    id: 12,
    name: "ali",
    age: 21
}
const newUser = {
    ...user,
    age: 23,
    petName: "tala"
} // { id: 12, name:"ali", age:23, petName:"tala" }

Async | Await​

با مفهوم promise ها قطعا آشنا هستی این یک سینتکس راحتتره

create.js
const fetchData = async (id) => {
    const response = await fetch(`example.com/${id}`)
    const data = await response.json()
    return data;
}

هرجا await داشتی باید تابعی که داخلش هست async بشه و از طرفی وقتی میخوای از اون تابع استفاده کنی باید پشتش await بزنی.

use.js
const main = async () =>{
    const data = await fetchData(3);
    console.log(data)
}

Export | Import​

Export​

user.js
const userInfo = {
    id: 12,
    name: "Ali",
    username: "Hosseini"
}
const userAddres = {
    postalCode: 125661313,
    street: "golestan 9"
}
const user = {
    userInfo,
    userAddres
}

export {userInfo, userAddres}
export default user

توی حالت export {...} به صورت named export میشود و در صورت export default ... به صورت دیفالت export میشود

Import​

import user, {userInfo, userAddress} from "./user.js";

import {...} مربوط به export های named است و import ... مربوط به export default است