广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript 解构赋值详情
  • 536
分享到

Javascript 解构赋值详情

2024-04-02 19:04:59 536人浏览 安东尼
摘要

目录1、数组解构2、对象解构3、不完全解构4、用解构赋值实现变量交换 1、数组解构 let [a, b, c] = [1,2,3] console.log(a, b, c) /

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:2, c:3}
console.log(a,b,c) // 1 2 3


左侧的变量名需要和对象中的属性名相同,如果对应不上的话,左侧的变量名将被赋值为undefined。例如:


let {a,b, d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 undefined


如果变量名与属性名不一样,可以用冒号分隔符将属性名赋值给变量名

例如:


let {a,b, c:d} = {a:1, b:2, c:3}
console.log(a,b,d) // 1 2 3


3、不完全解构

解构赋值左侧变量个数可以不等于右侧数组中元素的个数

(1)左侧多余的变量会被设置为undefined,


let [a, b, c] = [1, 2]

console.log(a, b, c) // 1 2 undefined

(2)右侧多余的值将被直接忽略


let [a, b, c] = [1, 2, 3, 4]

console.log(a, b, c)  // 1 2 3


(3)左侧可以用逗号跳过某些值


let [a, , c] = [1, 2, 3, 4]

console.log(a, c)  // 1 3


(4)右侧多余的值可以通过...收集到一个变量中


let [a, b, ...c] = [1, 2, 3, 4]

console.log(a, b, c)  // 1 2 [3, 4]


4、用解构赋值实现变量交换


let a = 1, b=2;
[a, b] = [b, a]
console.log(a) //2
console.log(b) //1

到此这篇关于javascript 解构赋值详情的文章就介绍到这了,更多相关Javascript 解构赋值内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Javascript 解构赋值详情

本文链接: https://www.lsjlt.com/news/157281.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Javascript 解构赋值详情
    目录1、数组解构2、对象解构3、不完全解构4、用解构赋值实现变量交换 1、数组解构 let [a, b, c] = [1,2,3] console.log(a, b, c) /...
    99+
    2022-11-12
  • JavaScript解构赋值详解
    目录概念数组解构声明分别赋值解构默认值交换变量值解构函数返回的数组忽略返回值(或跳过某一项)赋值数组剩余值给一个变量嵌套数组解构字符串解构对象解构基础对象解构赋值给新变量名解构默认值...
    99+
    2022-11-12
  • Javascript中的解构赋值语法详解
    前言 首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难,但实际上很容易学习和使用。 解构赋值语法是一种 JS表达式。ES6 允许按照...
    99+
    2022-11-12
  • Javascript中解构赋值的含义
    这篇文章主要介绍“Javascript中解构赋值的含义”,在日常操作中,相信很多人在Javascript中解构赋值的含义问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Javascript中解构赋值的含义”的疑...
    99+
    2023-06-14
  • 详解JS ES6变量的解构赋值
    目录1.什么是解构?2.数组解构3.数组模式和赋值模式统一4.解构的默认值5.对象的解构赋值6.函数参数7.字符串解构8.数值和布尔值的解构赋值9.解构赋值的应用1.交换变量的值2....
    99+
    2022-11-12
  • JavaScript中怎么实现解构赋值
    JavaScript中怎么实现解构赋值,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1. ES6的新特性  &nbs...
    99+
    2022-10-19
  • JavaScript解构赋值的示例分析
    这篇文章给大家分享的是有关JavaScript解构赋值的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。概念ES6提供了更简洁的赋值模式,从数组和对象中提取值,这被称为解构...
    99+
    2022-10-19
  • JavaScript解构赋值的简写方法
    这篇文章将为大家详细讲解有关JavaScript解构赋值的简写方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。解构赋值简写方法在web框架中,经常需要从组件和API之间来回传递数组或对象字面形式的数据,...
    99+
    2023-06-27
  • Javascript 中有哪些解构赋值语法
    本篇文章给大家分享的是有关Javascript 中有哪些解构赋值语法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。组解构数组解构非常简单。你所...
    99+
    2022-10-19
  • C++赋值函数+移动赋值函数+移动构造函数详解
    目录左值引用和右值引用左值与右值左右值的切换左值引用:将左值绑定在引用上常量左值引用和非常量左值引用右值引用:将右值绑定在引用上常量右值引用和非常量右值引用移动构造函数赋值和移动赋值...
    99+
    2022-11-13
  • JavaScript解构赋值的实用技巧指南
    目录一、基本概念二、解构分类1. 对象的解构赋值2. 数组的解构赋值(1)字符串(2)数组(3)集合(4)Map三、嵌套解构四、使用技巧1. 函数解构(1)解构函数参数2. 循环中的...
    99+
    2022-11-13
  • C++ 结构体初始化与赋值详解
    目录1.结构体初始化 2.结构体赋值 参考文献 1.结构体初始化 结构体是常用的自定义构造类型,是一种很常见的数据打包方法。结构体对象的初始化有多种方式,分为顺序初始化、指定初始化...
    99+
    2022-11-12
  • C++构造析构赋值运算函数应用详解
    目录了解C++默默编写哪些函数不想使用编译器函数为多态基类声明virtual析构函数别让异常逃离析构函数绝不在构造和析构过程中调用virtual函数令operator=返回一个ref...
    99+
    2022-11-13
  • 一篇文章带你了解JavaScript的解构赋值
    目录1. 什么是解构赋值 ?2. 数组的解构赋值2.1) 数组解构赋值的默认值2.2) 数组解构赋值的应用类数组中的应用交换变量的值3. 对象的解构赋值...
    99+
    2022-11-13
  • JavaScript解构赋值的常见场景有哪些
    这篇文章主要为大家展示了“JavaScript解构赋值的常见场景有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript解构赋值的常见场景有哪些”这篇文章吧。1. 提取数据先来看...
    99+
    2023-06-25
  • ES6下javascript解构赋值常见用法总结
    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a =...
    99+
    2022-11-13
  • 如何在Javascript中使用解构赋值语法
    本篇文章给大家分享的是有关如何在Javascript中使用解构赋值语法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。前言首先在 ES6中引入的“解构赋值语法”允许把数组和对象中...
    99+
    2023-06-14
  • JavaScript解构赋值的实用技巧是什么
    这篇文章跟大家分析一下“JavaScript解构赋值的实用技巧是什么”。内容详细易懂,对“JavaScript解构赋值的实用技巧是什么”感兴趣的朋友可以跟着小编的思路慢慢深入来阅读一下,希望阅读后能够对大家有所帮助。下面跟着小编一起深入学习...
    99+
    2023-06-28
  • ES6解构赋值(数组,对象,函数)使用详解
    目录解构赋值数组解构默认值对象解构剩余模式(pattern)"…"嵌套解构智能函数参数总结解构赋值 JavaScript 中最常用的两种数据结构是 ...
    99+
    2022-11-16
    ES6解构赋值使用 ES6解构赋值 ES6数组解构赋值 ES6解构赋值对象
  • ES6中解构赋值实现变量批量赋值解放双手
    目录引言一、数组的解构赋值解构失败不完全解构默认值二、对象的解构赋值三、字符串的解构赋值结束语引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量操作变量赋值,先有个印象,...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作