JavaScript ES6 教你轻松构造对象，各取所需！

前端

2024-01-04 07:46:11

JavaScript ES6 有条件构造对象

在不同的来源之间移动用户生成的数据时，经常需要检查特定字段是否有值，并根据这些数据来构建输出。这篇文章将为你介绍如何使用 JavaScript ES6 中的一些特性来更简洁地完成这个任务。

使用 ES6 特性构造对象

使用解构和扩展运算符

使用可选链

使用 Sanity.io 的示例

在 Sanity.io 中，我们可以使用这些 ES6 特性来构建用于呈现用户生成内容的 React 组件。例如，以下组件使用解构和扩展运算符来从 Sanity.io 中获取数据并将其显示在页面上：

import React from 'react'
import {useState, useEffect} from 'react'
import sanityClient from '@sanity/client'

const client = sanityClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'production',
})

export default function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    client.fetch('*').then((data) => setData(data))
  }, [])

  if (!data) return null

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  )
}

这个组件首先从 Sanity.io 中获取数据，然后使用解构和扩展运算符来将数据提取到单独的变量中。最后，它使用这些变量来渲染组件。

使用可选链

可选链运算符 (?.) 可以让我们安全地访问对象属性，即使该属性不存在。这可以让我们避免在尝试访问不存在的属性时引发错误。例如，以下代码使用可选链运算符来从 Sanity.io 中获取数据，即使该属性不存在：

import React from 'react'
import {useState, useEffect} from 'react'
import sanityClient from '@sanity/client'

const client = sanityClient({
  projectId: 'YOUR_PROJECT_ID',
  dataset: 'production',
})

export default function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    client.fetch('*').then((data) => setData(data))
  }, [])

  if (!data) return null

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data?.body}</p>
    </div>
  )
}