JavaScript进阶——解构赋值

最新推荐文章于 2024-07-11 15:45:00 发布
最新推荐文章于 2024-07-11 15:45:00 发布
阅读量482 收藏 10
点赞数 5
文章标签： javascript html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57184906/article/details/136846008
版权

目录

 1.数组解构

1.1 引入

1.2 介绍

1.3 基本语法

1.4 应用-典型应用交互2个变量

1.5 特殊情况

2.对象解构

2.1 介绍

2.2 基本语法

2.3 给新的变量名赋值

2.4 数组对象解构

2.5 多级对象解构

 1.数组解构

1.1 引入
  • 传统方法赋值麻烦

1.2 介绍
  • 数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。
1.3 基本语法
  • 赋值运算符 = 左侧的用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
  • 变量的顺序对应数组单元值的位置依次进行赋值操作

1.4 应用-典型应用交互2个变量

1.5 特殊情况
  • 变量多单元值少的情况

变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

  • 变量少单元值多的情况

  • 利用剩余参数解决变量少单元值多的情况

剩余参数返回的还是一个数组

  • 防止有 undefined 传递单元值的情况，可以设置默认值

允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效的默认单元值

  • 按需导入，忽略某些返回值

  • 支持多维数组的结构

2.对象解构

2.1 介绍
  • 对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
2.2 基本语法
  • 赋值运算符＝左侧的用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
  • 对象属性的值将被赋值给与属性名相同的变量
  • 注意解构的变量名不要和外面的变量名冲突否则报错
  • 对象中找不到与变量名一致的属性时变量值为 undefined

2.3 给新的变量名赋值
  • 可以从一个对象中提取变量并同时修改新的变量名

冒号表示"什么值：赋值给谁"

2.4 数组对象解构

2.5 多级对象解构

热爱前端的小wen
关注
JS解构赋值详解
Zhang_wang_yun的博客
04-05 4046
解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。
解构赋值
qq_48296654的博客
03-17 1139
前言 这些是我学习中的一些笔记，希望有用。 一、解构赋值是什么？ ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，该操作即为**解构（Destructuring)** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210317215908298.png#pic_center) 特点： 1、给变量赋值 2、值的来源是对象或数组 3、规则：按一定的模式 一般用在数据交互，ajax请求数据。 二、数组的解构赋值 1.这种比较散 let a = 10;
Javascript 解构赋值
Andy Tools
04-16 3496
本文是 ECMAScript 6 入门 学习笔记：http://es6.ruanyifeng.com/#docs/destructuringES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。1 可以解构赋值的数据类型等号的右边不是数组必须为可遍历的结构（具备 Iterator 接口）1.1 数组解构赋值为数组中提取值，按照对应位置，对变量赋值
JavaScript进阶（四）---js解构
最新发布
yanminghe66666的博客
07-11 847
1.对象解构 1.1变量和值不匹配的情况 1.2多维数组 2.对象解构 3.对象数组解构 4.函数参数解构 5.扩展运算符
JS解构赋值
热门推荐
qi_bai_jin的博客
10-29 1万+
解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。本文将讨论解构赋值的作用与其用法。
ES 6 : 变量的解构赋值
weixin_33682719的博客
09-19 91
1. 数组的解构赋值 [ 基本用法 ] 　　按照一定的模式从数组或者对象中取值，对变量进行赋值的过程称为解构。 　　以前，为变量赋值只能直接指定值： 　　而ES 6 允许写成下面这样： 　　上面的代码表示，可以从数组中取值，按照位置的对应关系对变量赋值。 [ 默认值 ]　 　　解构赋值允许使用默认值。 　　ES6内部使用严格相等运算符（===）判断一个位置是否有值...
JavaScript 解构赋值
xzbqd的博客
12-17 157
JavaScript 解构赋值
JavaScript：解构赋值
JinsmLill的博客
10-28 122
定义一个类需要使用关键字 class。定义类的方式有两种：类声明类声明，即使用关键字 class 定义一个具名的类。类表达式类表达式，即以表达式的形式使用关键字 class 定义一个类，类名是可选的。类名一般采用首字母大写的形式。定义类。} // 类声明 const TypeB = class {} // 类表达式，不指定类名 const Type = class TypeC {} // 类表达式，指定类名。
前端 —— JavaScript 进阶 25 -- ES6 之 解构赋值
宁静致远
07-12 195
解构： 按照某种结构来分解里面的成员 解构赋值： 是对赋值运算符的扩展 是针对数组或对象进行模式匹配，然后对其中的变量进行赋值 解构模型 在解构中，有两部分参与： 解构的目标=解构的源 只要左右两边的模式相同，就可以合法赋值 如果解构不成功，变量值等于undefined 对象解构： 对象解构不需要位置一致，只要保证解构的变量名和属性一致即可。 //解构赋值 等号前面的大括号里的属性名 要和对象里的属性名一致 const {name,age} = { n...
黑马程序员前端JavaScript高级——ES6学习笔记
weixin_44566194的博客
10-29 2981
黑马程序员前端教程的PPT和代码学习笔记，里面包含了面向对象的编程思想，以及构造函数，类和对象、原型链、箭头函数、数组和字符串新增方法、函数递归、深拷贝浅拷贝、正则表达式等知识点。本文是对CSDN其他博主记录的一个补充，因为黑马也是今年才陆续补充一些知识点的视频的，本文将其收录于此，雷同勿怪。
Web前端系列技术之JavaScript进阶（从ES6开始）①
小柴爱程序的博客
09-30 387
那么今天主要会学习的内容是：一、let和const、二、作用域、三、闭包、四、预解析、五、参数、六、箭头函数
JavaScript网页开发——体验式学习教程.pdf
02-12
ES6（ECMAScript 2015）是JavaScript的一个重要版本，引入了许多新特性，如箭头函数、模板字符串、let和const变量、解构赋值、类和模块等。了解并掌握这些新特性可以提升代码的简洁性和可维护性。 最后，教程可能还...
前端 —— JavaScript 进阶 25 -- ES6 之 ... 展开运算符（剩余运算符）
宁静致远
07-13 529
... 展开运算符 展开运算符（剩余运算符）应用于 数组 或者 对象。一个对数组或者对象进行展开插值一个是对数组或者对象进行局部的赋值 合并数组 let arr01 = [1,2,3]; let arr02 = [4,5,6]; let arr = [...arr01,...arr02]; console.log(arr); //[ 1, 2, 3, 4, 5, 6 ] 一个数组或者对象指定到另一个数组或者对象的某一个位置 let arr03=[1,2,3]; let a...
JavaScript解构赋值
qq_39832721的博客
10-29 310
JavaScript解构赋值 在js中的解构赋值是一种十分便捷的赋值方式,如果运用的足够熟练,能大大提高工作效率,废话少说,这就开始介绍: 从ES6开始,JavaScript引入了解构赋值,不同于传统做法,解构赋值可以同时对一组变量进行赋值 比如,传统做法是酱紫的: var array = ['hello', 'world']; var x = array[0]; var y = array[1]...
javascript-解构赋值
guiguiann789的博客
03-04 471
解构赋值（解开解构，进行赋值） 解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。 在解构中，有下面两部分参与： 解构的源，解构赋值表达式的右边部分。 解构的目标，解构赋值表达式的左边部分。 数组的解构赋值：按照书写顺序，--对应解构 let arr=...
js 解构赋值
qq_39852145的博客
02-22 719
1. 数组的解构赋值 // 对不需要的值，使用','，将该该值略过。 const [first, , third, ...rest] = [1, 2, 3, 4, 5]; console.log(first) // 1 console.log(third) // 3 console.log(rest) // [4, 5] const [a, b = 'default'] = [] console.log(a,b) // undefined 'default' String、Set、Map等所有可遍历对
【JavaScript】解构赋值
Superman_H的博客
09-05 1818
作用于数组 解构赋值简介 解构赋值：按照一定的模式，从数组 / 对象中提取值，并对变量进行赋值 let [a, b, c] = [12, 5, 6]; // 左边的结构 = 右边的结构 console.log(a, b, c); // 12 5 6 本质上，这种写法属于 “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值 变量 = 值 let [a, b, c] = [12, [5, 6]]; console.log(a, b, c); // 12 [5, 6] undefined
JavaScript中解构赋值
weixin_47417033的博客
06-21 2933
JavaScript中解构赋值
ES6+进阶：解构赋值与异步处理在前端开发中的应用
1. **解构赋值**：ES6引入了解构赋值，这是一种简洁且强大的语法，用于将数据从一种形式转换为另一种形式，同时保持数据结构。它分为三类： - **数组解构赋值**：通过`var [name1, name2, name3] = names`这样的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

热爱前端的小wen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值