ES6 入门—ES6 解构赋值

let [c = 3, d = c] = [1];

// c = 1, d = 1

let [e = 3, f = e] = [1, 2];

// e = 1, f = 2




示例代码:



步骤一:新建一个名为 test5.js 的文件,在其中输入以下代码:



console.log(“示例一:”);

console.log(“a 与 b 匹配结果为 undefined,触发默认值:a = 3; b = a =3”);

let [a = 3, b = a] = [];

console.log(“a 的值为” + a);

console.log(“b 的值为” + b);

console.log(“示例二:”);

console.log(

“c 正常解构赋值,匹配结果:c = 1,d 匹配结果 undefined,触发默认值:d = c =1”

);

let [c = 3, d = c] = [1];

console.log(“c 的值为” + c);

console.log(“d 的值为” + d);

console.log(“示例三:”);

console.log(“e 与 f 正常解构赋值,匹配结果:e = 1,f = 2。”);

let [e = 3, f = e] = [1, 2];

console.log(“e 的值为” + e);

console.log(“f 的值为” + f);




在终端使用 node 命令运行:  

![请添加图片描述](https://img-blog.csdnimg.cn/923e8c59ff634acebf1ae39bc4493817.png)



[]( )二、对象的解构赋值

============================================================================



解构不仅可以用于数组,还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。



let { foo, bar } = { foo: ‘aaa’, bar: ‘bbb’ };

// foo = ‘aaa’

// bar = ‘bbb’

let { baz : foo } = { baz : ‘ddd’ };

// foo = ‘ddd’

let person = { name: ‘zhangsan’, age: 20, sex: ‘男’};

let {name, age, sex} = person;

// name = ‘zhangsan’

// age = 20

// sex = ‘男’




示例代码:



步骤一:新建一个名为 test6.js 的文件,在其中输入以下代码:



console.log(“示例一:”);

console.log(

“等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。”

);

let { foo, bar } = { foo: “aaa”, bar: “bbb” };

console.log(“foo 的值为” + foo);

console.log(“bar 的值为” + bar);

console.log(“示例二:”);

let { baz: ccc } = { baz: “ddd” };

console.log(“ccc 的值为” + ccc);

console.log(“示例三:”);

let person = { name: “zhangsan”, age: 20, sex: “男” };

let { name, age, sex } = person;

console.log(“name :” + name);

console.log(“age :” + age);

console.log(“sex :” + sex);




在终端使用 node 命令运行:  

![请添加图片描述](https://img-blog.csdnimg.cn/800cb06a833848e18a706ece0c5c6aca.png)  

下面这个例子的变量没有对应的同名属性,导致取不到值,最后等于 undefined。



var { baz } = { foo: “aaa”, bar: “bbb” };

// baz = undefined




新建 index.html 文件,示例代码:



<script>

  var { baz } = { foo: "aaa", bar: "bbb" };

  document.write("baz 的值为" + baz);

</script>



显示效果:  

![请添加图片描述](https://img-blog.csdnimg.cn/50ba8dee5da54eef9d37724abcb2d04e.png)  

如果变量名与属性名不一致,必须写成下面这样。



var { foo: baz } = { foo: ‘aaa’, bar: ‘bbb’ };

// baz = “aaa”

let obj = { first: ‘hello’, last: ‘world’ };

let { first: f, last: l } = obj;

// f = ‘hello’

// l = ‘world’




[]( )三、可嵌套可忽略

===========================================================================



和数组一样,解构也可以用于嵌套结构的对象。



let obj = {p: [‘hello’, {y: ‘world’}] };

let {p: [x, { y }] } = obj;

// x = ‘hello’

// y = ‘world’

let obj = {p: [‘hello’, {y: ‘world’}] };

let {p: [x, { }] } = obj;

// x = ‘hello’




示例代码一:



新建一个名为 index1.html 的文件,在其中输入以下代码:



<script>

  let obj = { p: ["hello", { y: "world" }] };

  let {

    p: [x, { y }],

  } = obj;

  document.write("x 的值为" + x + "</br>");

  document.write("y 的值为" + y);

</script>



显示效果:  

![请添加图片描述](https://img-blog.csdnimg.cn/c8a3a4704ceb4edf9e476e744edace7a.png)  

示例代码二:



新建一个名为 index2.html 的文件,在其中输入以下代码:



<script>

  let obj = { p: ["hello", { y: "world" }] };

  let {

    p: [x, {}],

  } = obj;

  document.write("x 的值为" + x);

</script>



显示效果:  

![请添加图片描述](https://img-blog.csdnimg.cn/05087e7dbbbd4b79889d72d0e65156c2.png)  

下面是嵌套赋值的例子。



let obj = {};

let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

//obj = {prop:123}

//arr = [true]




[]( )四、解构默认值

==========================================================================



对象的解构也可以指定默认值。



let {a = 10, b = 5} = {a: 3};

// a = 3; b = 5;

let {c: aa = 10, d: bb = 5} = {c: 3};

// aa = 3; bb = 5;

var { message: msg = ‘Something went wrong’ } = {};

//msg = “Something went wrong”




示例代码:



步骤一:新建一个名为 test7.js 的文件,在其中输入以下代码:



console.log(“示例一:”);

let { a = 10, b = 5 } = { a: 3 };

console.log(“a 的值为” + a);

console.log(“b 的值为” + b);

console.log(“示例二:”);

let { c: aa = 10, d: bb = 5 } = { c: 3 };

console.log(“aa 的值为” + aa);

console.log(“bb 的值为” + bb);

console.log(“示例三:”);

var { message: msg = “Something went wrong” } = {};

console.log(“msg 的值为” + msg);




步骤二:在终端使用 node 命令运行:  

![请添加图片描述](https://img-blog.csdnimg.cn/506e93f85f8548ac90af2e79cac8e6d1.png)



[]( )五、不完全解构

==========================================================================



let obj = {p: [{y: ‘world’}] };

let {p: [{ y }, x ] } = obj;

// x = undefined

// y = ‘world’




示例代码:



步骤一:新建一个名为 test8.js 的文件,在其中输入以下代码:



let obj = { p: [{ y: “world” }] };

let {

p: [{ y }, x],

} = obj;

console.log(“x =” + x);

console.log(“y =” + y);




步骤二:在终端使用 node 命令运行:  

![请添加图片描述](https://img-blog.csdnimg.cn/75d59dbed57747a983a7f7a7c7bf236f.png)



[]( )六、剩余运算符

==========================================================================



let {a, b, …rest} = {a: 10, b: 20, c: 30, d: 40};

// a = 10

// b = 20

// rest = {c: 30, d: 40}




示例代码:



步骤一:新建一个名为 test9.js 的文件,在其中输入以下代码:



let { a, b, …rest } = { a: 10, b: 20, c: 30, d: 40 };

console.log(“a =” + a);

console.log(“b =” + b);

console.log(“rest =” + rest.c);

console.log(“rest =” + rest.d);




步骤二:在终端使用 node 命令运行:  

![请添加图片描述](https://img-blog.csdnimg.cn/606b2329acee4a1c93c835ac951da796.png)



[]( )七、注意事项

=========================================================================



如果要将一个已经声明的变量用于解构赋值,必须非常小心。



// 错误的写法

var x;

{x} = {x: 1};

// SyntaxError: syntax error




上面代码的写法会报错,因为 JavaScript 引擎会将 {x} 理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。



// 正确的写法

({x} = {x: 1});




上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。关于圆括号与解构赋值的关系,如下。



解构赋值允许,等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。



({} = [true, false]);

({} = ‘abc’);

({} = []);




[]( )八、字符串的解构赋值

=============================================================================



在数组的解构中,解构的目标若为可遍历对象,皆可进行解构赋值。



字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。新建文件 index3.html ,示例代码:



<script>

  let [a, b, c, d, e] = "hello";

  document.write("a 的值为" + a + "</br>");

  document.write("b 的值为" + b + "</br>");

  document.write("c 的值为" + c + "</br>");

  document.write("d 的值为" + d + "</br>");

  document.write("e 的值为" + e);

</script>



显示效果:  

![请添加图片描述](https://img-blog.csdnimg.cn/95c1b2406c6e43689d98c523e0cef7fa.png)  

类似数组的对象都有一个 length 属性,因此还可以对这个属性解构赋值。新建文件 index4.html ,示例代码:



<script>

  let { length: len } = "hello";

  document.write("len =" + len);

</script>



显示效果:  

![请添加图片描述](https://img-blog.csdnimg.cn/de61ce85e03f4c61b4c9a70d98fff991.png)



[]( )九、圆括号问题

==========================================================================



解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。



由此带来的问题是,如果模式中出现圆括号怎么处理。ES6 的规则是,只要有可能导致解构的歧义,就不得使用圆括号。但是,这条规则实际上不那么容易辨别,处理起来相当麻烦。因此,建议只要有可能,就不要在模式中放置圆括号。



不得使用圆括号的情况



变量声明语句中,不能带有圆括号。



var [(a)] = [1];

var {x: ©} = {};

var ({x: c}) = {};

var {(x: c)} = {};

var {(x): c} = {};

最后

除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/739546.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HTML5+CSS3小实例:可爱的卷纸开关

实例:可爱的卷纸开关 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=…

复习2-20240624

vscode 使用 Javabean &#xff08;封装性&#xff09; public class Demo01 {/*1.原则 &#xff1a; 字母 数字 $ _ 中文 除了 这五个 其它都不可以2. 细则 &#xff1a; 数字 不能 开头%hbviunh &hfiureh )nhjrn 7487j -ni hbiu tgf hi…

Verifieable FHE(VFHE):使用Plonky2来证明Zama TFHE的“Bootstrapping的正确执行”

1. 引言 Zama团队2024年论文Towards Verifiable FHE in Practice: Proving Correct Execution of TFHE’s Bootstrapping using plonky2 中&#xff1a; 首次阐述了&#xff0c;在实践中&#xff0c;将整个FHE bootstrapping操作&#xff0c;使用SNARK来证明。在其相应的http…

Appium+python自动化(二十一)- 让猴子按你指令大闹手机,让我们都成为耍猴高手(超详解)

宏哥微信粉丝群&#xff1a;https://bbs.csdn.net/topics/618423372 有兴趣的可以扫码加入 简介  一年一度的暑假如期而至&#xff0c;每年必不可少的&#xff0c;便是《西游记》这部经典电视连续剧的播出&#xff0c;作为一名90后&#xff0c;对于这部经典剧的情谊&#xff…

探索蓝牙协议的奥秘:用ESP32实现高质量蓝牙音频传输

蓝牙&#xff08;Bluetooth&#xff09;是一种短距离无线通信技术&#xff0c;广泛应用于各种电子设备之间的数据传输。自1994年由爱立信公司首次提出以来&#xff0c;蓝牙技术已经经历了多个版本的更新和改进。本文将详细介绍蓝牙协议&#xff0c;并通过一个具体的项目——使用…

自然语言处理:第三十九章 中文测评榜单-CEval

文章链接:2305.08322 (arxiv.org) 官网: C-Eval: 一个适用于大语言模型的多层次多学科中文评估套件 (cevalbenchmark.com) 主页: hkust-nlp/ceval: Official github repo for C-Eval, a Chinese evaluation suite for foundation models [NeurIPS 2023] 在人工智能领域&#…

Vue 项目居然有4种包管理器,你了解吗?

在vue项目中&#xff0c;用于依赖包管理的主流工具居然有四种&#xff0c;这是重复造了多少轮子呀。作为主要从事后端开发的我来说&#xff0c;这真是不可思议。Java的依赖包管理工具主要就两种&#xff0c;Maven和Gradle&#xff0c;而且据我多年实际开发经验来看&#xff0c;…

MySQL集群高可用架构之MySQL InnoDB Cluste

今天我将详细的为大家介绍Centos 7.5 基于 MySQL 5.7的 InnoDB Cluster 多节点高可用集群环境部署的相关知识&#xff0c;希望大家能够从中收获多多&#xff01;如有帮助&#xff0c;请点在看、转发支持一波&#xff01;&#xff01;&#xff01; 一、MySQL InnoDB Cluster 介…

Go 在结构体中定义下划线(_)字段原来还有这个特殊用途?

作者&#xff1a;陈明勇 个人网站&#xff1a;https://chenmingyong.cn 文章持续更新&#xff0c;如果本文能让您有所收获&#xff0c;欢迎点赞收藏加关注本号。 微信阅读可搜《程序员陈明勇》。 这篇文章已被收录于 GitHub https://github.com/chenmingyong0423/blog&#xff…

ECMAScript6介绍及环境搭建

这实际上说明&#xff0c;对象的解构赋值是下面形式的简写。 let { foo: foo, bar: bar } { foo: ‘aaa’, bar: ‘bbb’ }; 也就是说&#xff0c;对象的解构赋值的内部机制&#xff0c;是先找到同名属性&#xff0c;然后再赋给对应的变量。真正被赋值的是后者&#xff0c;而…

【经验分享】免费版虚拟机VMware Workstation Pro 17下载方式

【经验分享】免费版虚拟机VMware Workstation Pro 17下载方式 前言一、免费虚拟机下载方式二、 安装过程总结 前言 我真的是服了&#xff0c;现在的CSDN时效性为什么这么差了。都快一个月了还没有博主更新个人免费版虚拟机VMware Workstation Pro&#xff0c;甚至很多人还不知…

【数据结构】线性表:顺序表

文章目录 1. 线性表2. 顺序表2.1 概念及结构2.2 接口实现2.3 顺序表的问题及思考 1. 线性表 线性表是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串… 线性表在逻辑上是…

element-ui table使用type=‘selection‘复选框全禁用-全选禁用_elementui table禁用全选

问题点&#xff1a;当条件数据全被禁用时&#xff0c;全选按钮不是禁用的状态。 复选框全被禁用时&#xff0c;全选按钮将被隐藏 问题总结&#xff1a; 当条件数据全被禁用时&#xff0c;全选按钮也变成禁用的状态&#xff0c;而不是隐藏。有会做的小伙伴希望跟帖。谢谢&#x…

Java基础的重点知识-08-接口、多态

文章目录 接口多态 接口 从之前的章节中&#xff0c;我们了解到类的内部封装了成员变量、构造方法、成员方法&#xff0c;那么接口的内部主要就是封装了方法&#xff0c;包含了抽象方法&#xff08;JDK7及之前&#xff09;&#xff0c;默认方法和静态方法&#xff08;JDK8&…

思看科技冲刺上市疑云:募资用途遭强烈质疑,IPO前突击分红

近日&#xff0c;思看科技&#xff08;杭州&#xff09;股份有限公司&#xff08;下称“思看科技”&#xff09;已更新提交2023年最新财务资料&#xff0c;重启科创板IPO进程。贝多财经了解到&#xff0c;思看科技的上市申请于2023年6月获上交所受理&#xff0c;目前已进入问询…

yarn:终极包管理器指南 - 提高您的项目效率和性能

Yarn使用教程大纲 一、介绍1.1 什么是Yarn1.2 Yarn的优势1.3 Yarn与npm的比较 二、安装Yarn2.1 Windows安装Yarn2.2 macOS安装Yarn2.3 Linux安装Yarn2.4 注意事项 三、初始化项目3.1 在项目中使用Yarn3.2 创建新项目3.3 在已有项目中使用Yarn 四、添加依赖4.1 添加依赖4.1.1 安…

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧

【Pandas驯化-15】Pandas中几个特征工程函get_dummies、factorize、diff、rank技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内…

磨坊中年轻的面包师

磨坊中年轻的面包师 The young baker in the mill 每天清晨(early morning)&#xff0c;喜欢裸睡(sleep naked)的面包师(baker)在面包房(bakery)中醒来(wake up)后&#xff0c;就会到湖(lake)边取水&#xff0c;在刷(brushing)牙洗(washing)脸后&#xff0c;他就会开始烘焙(ba…

Linux_应用篇(22) 音频应用编程

ALPHA I.MX6U 开发板支持音频&#xff0c;板上搭载了音频编解码芯片 WM8960&#xff0c;支持播放以及录音功能&#xff01;本章我们来学习 Linux 下的音频应用编程&#xff0c; 音频应用编程相比于前面几个章节所介绍的内容、 其难度有所上升&#xff0c; 但是笔者仅向大家介绍…

【源码】含70演示高转化率Magento2外贸时装女装跨境电商模板V1.2.2

MagMog是下一代最高转化率和可扩展的跨境电商Magento2主题&#xff0c;让您几乎可以立即上手。这是一个终极解决方案&#xff1a;主题附带一系列电子商务功能&#xff0c;可以启用您商店的隐藏功能&#xff0c;并且您无需支付任何额外费用。 100% 免费。 MagMog从定制设计到内…