JavaScript解构赋值的5个常见场景与实例教程

目录
  • 前言
  • 1. 提取数据
  • 2. 别名取值
  • 3. 动态属性
  • 4. 对象解构中的 Rest
  • 5. 默认值
  • 总结

前言

解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值。

1. 提取数据

先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始。

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

这样,就可以通过以下方式访问相应的属性:

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

解构,能够让代码更加清晰简洁。如果需要解构一个更复杂的对象呢?即对象中的对象。

现在假设需要从商品列表数据中获取其中一个商品的属性,如下:

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

在这里,产品列表嵌套了几层,需要访问商品的信息,可以解构尽可能多的级别以获取商品对象的属性。

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

上面的代码仅用于展示其用法,项目开发中不建议再数组中这样获取对象信息。

通常,数据列表不一定非要数组,从获取效率来说,map 对象的访问比数组效率要高。可以将上面的数据改为 map 对象,如下:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

在 JavaScript 中,数据可以是变量和方法,因此解构赋值也适合用在函数参数的定义,如下:

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解构赋值",
    remark: "解构赋值的实用场景介绍",
});

在使用 React 或 Vue 等框架时,有很多解构赋值的地方,如方法的引入等等。

2. 别名取值

如果想创建与属性名称不同的变量,那么可以使用对象解构的别名功能。

const { identifier: aliasIdentifier } = expression;

identifier 是要访问的属性的名称,aliasIdentifier 是变量名称。具体用法如下:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275

3. 动态属性

可以使用动态名称提取到变量属性(属性名称在运行时已知):

const { [propName]: identifier } = expression;

propName 表达式应计算为属性名称(通常是字符串),标识符应指示解构后创建的变量名称,用法如下:

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

上面代码中,可以通过更新 productKey 的值进而使得 product 的值也跟随变化。

4. 对象解构中的 Rest

将 rest 语法添加到解构中,Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。

const { identifier, ...rest } = expression;

解构后,变量标识符包含属性值。 rest 变量是一个具有其余属性的普通对象。

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

对于数组,可以通过 Rest 的实现首尾值的获取:

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]

5. 默认值

正如前面介绍的那样可以在解构数组时为其分配默认值:

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

这样,可以将确保在 B、A 未定义的情况下有一个默认值。

总结

解构是一个非常实用的特性,它被添加到了 JavaScript 的 ES6 版本中了。通过解构,可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象,可以使用 ... 运算符为数组分配赋值。

到此这篇关于JavaScript解构赋值的5个常见场景与实例的文章就介绍到这了,更多相关JS解构赋值实例内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

  • Javascript中的解构赋值语法详解

    前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e

  • 详解JS ES6变量的解构赋值

    1.什么是解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.它在语法上比ES5所提供的更加简洁.紧凑.清晰.它不仅能减少你的代码量,还能从根本上改变你的编码方式. 2.数组解构 以前,为变量赋值,我们只能直接指定值,比如 let a = 1; let b = 2; let c = 3; 现在可以用数组解构的方式来进行赋值 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1, 2, 3 这是数组解构最基本类型

  • JavaScript之解构赋值的理解

    1. ES6的新特性 允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1).  定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量 所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj

  • JavaScript解构赋值的5个常见场景与实例教程

    目录 前言 1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量.这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值. 1. 提取数据 先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始. const product = { id: 1, title: "Ni

  • ES6下javascript解构赋值常见用法总结

    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b Javascript解构赋值问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想 上面的问题解构方案: let obj = { a: 1, b: 2 } // 取值 let {a,

  • Javascript 解构赋值详情

    目录 1.数组解构 2.对象解构 3.不完全解构 4.用解构赋值实现变量交换 1.数组解构 let [a, b, c] = [1,2,3] console.log(a, b, c) // 1 2 3 除了数组,任何可迭代的对象都支持被解构, 例如字符串 let [first, second] = "he" console.log(first, second) // h e 2.对象解构 赋值右侧是对象,左侧是包含在花括号内逗号隔开的变量名 let {a, b, c} = {a:1, b

  • JavaScript解构赋值的实用技巧指南

    目录 一.基本概念 二.解构分类 1. 对象的解构赋值 2. 数组的解构赋值 (1)字符串 (2)数组 (3)集合 (4)Map 三.嵌套解构 四.使用技巧 1. 函数解构 (1)解构函数参数 2. 循环中的解构 3. 动态属性解构 4. 交换变量 5. 数组拷贝 四.解构赋值注意点 总结 一.基本概念 为什么需要解构呢,先来看一个例子: const student = { name: 'ZhangSan', age: 18, scores: { math: 19, english: 85, c

  • JavaScript解构赋值详解

    目录 概念 数组解构 声明分别赋值 解构默认值 交换变量值 解构函数返回的数组 忽略返回值(或跳过某一项) 赋值数组剩余值给一个变量 嵌套数组解构 字符串解构 对象解构 基础对象解构 赋值给新变量名 解构默认值 赋值给新对象名的同时提供默认值 同时使用数组和对象解构 不完全解构 赋值剩余值给一个对象 嵌套对象解构(可忽略解构) 注意事项 小心使用已声明变量进行解构 函数参数的解构赋值 解构的用途 交换变量的值 从函数返回多个值 提取JSON数据 总结 概念 ES6提供了更简洁的赋值模式,从数组和

  • 一篇文章带你了解JavaScript的解构赋值

    目录 1. 什么是解构赋值 ? 2. 数组的解构赋值 2.1) 数组解构赋值的默认值 2.2) 数组解构赋值的应用 类数组中的应用 交换变量的值 3. 对象的解构赋值 3.1) 对象解构赋值的默认值 3.2)对一个已声明的变量解构赋值 4. 字符串的解构赋值 总结 1. 什么是解构赋值 ? 将属性/值从对象/数组中取出,赋值给其他变量 通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量. 让我们通过一个例子看看: const [a, b, c] = [1, 2, 3];

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

  • ES6解构赋值实例详解

    本文实例讲述了ES6解构赋值.分享给大家供大家参考,具体如下: 基本用法 let [x, y, ...z] = ['a'] //"a", undefined, [] 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 let [x, y, z] = new Set(["a", "b

随机推荐