React/React-Native中的{}_react native object显示为{}-优快云博客

本文深入解析ES6模块系统中的导入导出机制，包括默认导出、命名导出及如何在其他模块中正确引用。同时，探讨了解构赋值这一新语法特性及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

import {user} from "./person"
const { urlToPathAndParams } = pathUtils

import {user} from “./person”

在import时，有时会用{}引用，有时就不用{}，区别如下：

//person.js
export default 'person'
export const user = 42
export const user2 = 43

上述为person.js中的代码，其中有一个默认导出（只能有一个）和两个命名导出（可以有多个），在其他js（other.js）中引用时，如下示代码：

import abc1 from "./person"	//正确，会解析到person.js的默认导出export default
import abc2 from "./person"	//正确，会解析到person.js的默认导出export default
import { user } from "./person"	//正确，会解析到person.js的命名导出export user
import { user2 } from "./person"	//正确，会解析到person.js的命名导出export user2
import { user3 } from "./person"	//错误，person.js中没有命名导出export user3

PS: 可以一次性的将默认导出和命名导出同时引用

import abc1, { user, user2 } from "./person"

const { urlToPathAndParams } = pathUtils

在查看React-Navigation源码时发现这种带有{}的声明方式，这是ES6的新语法，叫做解构

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

所以，标题所示代码的 pathUtils 中是有 urlToPathAndParams 属性的，这段代码等同于
const urlToPathAndParams = pathUtils.urlToPathAndParams