React 教程

浏览7155
更新时间2025-08-20

解构

为了说明解构,我们将制作一个三明治。 你把冰箱里的所有东西都拿出来做三明治吗? 不,您只取出您想在三明治上使用的物品。

解构是完全一样的。 我们可能有一个正在使用的数组或对象,但我们只需要其中包含的一些项目。

解构可以很容易地只提取需要的东西。


破坏数组

这是将数组项分配给变量的旧方法:

之前:

const vehicles = ['mustang', 'f-150', 'expedition'];

// 老方法
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

这是将数组项分配给变量的新方法:

使用解构:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

在解构数组时,声明变量的顺序很重要。

如果我们只想要汽车和 suv,我们可以简单地省略卡车但保留逗号:

const vehicles = ['mustang', 'f-150', 'expedition'];

const [car,, suv] = vehicles;

当函数返回一个数组时,解构会派上用场:

实例

function calculate(a, b) {
  const add = a + b;
  const subtract = a - b;
  const multiply = a * b;
  const divide = a / b;

  return [add, subtract, multiply, divide];
}

const [add, subtract, multiply, divide] = calculate(4, 7);

解构对象

这是在函数中使用对象的旧方法:

之前:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

// 老方法
function myVehicle(vehicle) {
  const message = 'My ' + vehicle.type + ' is a ' + vehicle.color + ' ' + vehicle.brand + ' ' + vehicle.model + '.';
}

这是在函数中使用对象的新方法:

使用解构:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

请注意,对象属性不必按特定顺序声明。

我们甚至可以通过引用嵌套对象然后使用冒号和花括号再次解构嵌套对象所需的项目来解构嵌套对象:

实例

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red',
  registration: {
    city: 'Houston',
    state: 'Texas',
    country: 'USA'
  }
}

myVehicle(vehicleOne)

function myVehicle({ model, registration: { state } }) {
  const message = 'My ' + model + ' is registered in ' + state + '.';
}

学习训练

练习题:

使用解构从数组中仅提取第三项,放入名为 suv 的变量中。

const vehicles = ['mustang', 'f-150', 'expedition'];

const [] = vehicles;

开始练习

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

64.1万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.4万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

40.7万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

75.6万次学习

收藏

精品课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

64.4万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

40.9万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

63.7万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

35.8万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

131.8万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7,16种组合,超全大合集

下载

VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载

VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载

php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载

VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载

SublimeText3汉化版
SublimeText3汉化版

中文版,非常好用

下载

Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包,适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载