盘点JavaScript中解构赋值,数组解构常用的数组操作

Karen110
• 阅读 1396

大家好,我是进阶学习者。

前言

解构赋值:是一种特殊的语法,它使可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。

一、数组解构

下面是一个将数组解构到变量中的。

例:

<script>
            // 有一个存放了名字和姓氏的数组
            let arr = ["Ilya", "Kantor"]
            // 解构赋值
            // sets firstName = arr[0]
            // and surname = arr[1]
            let [firstName, surname] = arr;
            alert(firstName); // Ilya
            alert(surname); // Kantor
</script>

盘点JavaScript中解构赋值,数组解构常用的数组操作

现在就可以针对这些变量进行操作,而不是针对原来的数组元素。

当与 split 函数(或其他返回值是数组的函数)结合使用时,看起来就更优雅了:

let [firstName, surname] = "Ilya Kantor".split(' ');

1. “解构”并不意味着“破坏”

这种语法叫做“解构赋值”,因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

2. 剩余的 ‘…’

如果不只是要获得第一个值,还要将后续的所有元素都收集起来 — 可以使用三个点 "..." 来再加一个参数来接收“剩余的”元素:


let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert(name1); // Julius
alert(name2); // Caesar
// 请注意,`rest` 的类型是数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

盘点JavaScript中解构赋值,数组解构常用的数组操作

rest 的值就是数组中剩下的元素组成的数组。不一定要使用变量名 rest,也可以使用其他的变量名,只要确保它前面有三个点,并且在解构赋值的最后一个参数位置上就行了。

3. 默认值

如果赋值语句中,变量的数量多于数组中实际元素的数量,赋值不会报错。未赋值的变量被认为是 undefined。

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

盘点JavaScript中解构赋值,数组解构常用的数组操作

如果想要一个“默认”值给未赋值的变量,可以使用 = 来提供:

// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];
alert(name);    // Julius(来自数组的值)
alert(surname); // Anonymous(默认值被使用了

盘点JavaScript中解构赋值,数组解构常用的数组操作

默认值可以是更加复杂的表达式甚至可以是函数调用,这些表达式或函数只会在这个变量未被赋值的时候才会被计算。

使用了 prompt 函数来提供两个默认值,但它只会在未被赋值的那个变量上进行调用:


// 只会提示输入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];
alert(name);    // Julius(来自数组)
alert(surname); // 输入的值

二、对象解构


解构赋值同样适用于对象。

基本语法:

let {var1, var2} = {var1:…, var2:…}

在等号右侧有一个已经存在的对象,想把它拆开到变量中。等号左侧包含了对象相应属性的一个“(pattern)模式”。

在简单的情况下,等号左侧的就是 {...} 中的变量名列表。

例 :


let options = {  
  title: "Menu",  width: 100,  height: 200
};
let {title, width, height} = options;
alert(title);  // Menualert(width);  // 100
alert(height); // 200

盘点JavaScript中解构赋值,数组解构常用的数组操作

属性 options.title、options.width 和 options.height 值被赋给了对应的变量。变量的顺序并不重要,下面这个代码也奏效:


// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

就像数组或函数参数一样,默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

1. 剩余模式(pattern)

如果对象拥有的属性数量比提供的变量数量还多,该怎么办?

可以只取其中的某一些属性,然后把“剩余的”赋值到其他地方吗?

可以使用剩余模式(pattern),就像对数组那样。一些较旧的浏览器不支持此功能(例如,使用 Babel 对其进行填充),但可以在现代浏览器中使用。

例:


let options = {
  title: "Menu",
  height: 200,
  width: 100
};
// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let {title, ...rest} = options;
// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

盘点JavaScript中解构赋值,数组解构常用的数组操作

注:

变量都是在赋值中通过正确方式声明的:let {…} = {…}。当然,也可以使用已有的变量,而不用 let,但这里有一个陷阱。

三、智能函数参数

案例

解构赋值语法:可以把所有参数当作一个对象来传递,然后函数马上把这个对象解构成多个变量:


// 传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};
// ……然后函数马上把对象展开成变量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options,
  // width, height – 使用默认值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}
showMenu(options);

同样可以使用带有嵌套对象和冒号映射的更加复杂的解构:

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};
function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}
showMenu(options);

盘点JavaScript中解构赋值,数组解构常用的数组操作

完整语法和解构赋值是一样的:


function({
  incomingProperty: varName = defaultValue

})

注:

对于参数对象,属性 incomingProperty 对应的变量是 varName,默认值是 defaultValue。

这种解构假定了 showMenu() 函数确实存在参数。如果想让所有的参数都使用默认值,那应该传递一个空对象:

showMenu({}); // 不错,所有值都取默认值showMenu(); // 这样会导致错误

可以通过指定空对象 {} 为整个参数对象的默认值来解决这个问题:


function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}
showMenu(); // Menu 100 200

运行结果:

盘点JavaScript中解构赋值,数组解构常用的数组操作

整个参数对象的默认是 {},因此总会有内容可以用来解构。

四、总结

本文基于JavaScript基础,介绍了解构赋值,数组解构,介绍了常见的数组操作,对象结构。在实际应用中需要注意的点,遇到的难点,提供了详细的解决方法。

使用JavaScript语言,能够让读者更好的理解。代码很简单,希望能够帮助读者更好的学习。

**-----**------**-----**---**** End **-----**--------**-----**-****

往期精彩文章推荐:

盘点JavaScript中解构赋值,数组解构常用的数组操作

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
翼
2年前
ES6的解构赋值是深拷贝or浅拷贝?
面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?我们先来看一下深拷贝和浅
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
2年前
ES6新语法(二)
1.解构在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。解构:自动解析数组或对象中的值,并赋值给指定的变量。、1.1数组解构vararr3,4,5;vara,b,carr;
Wesley13 Wesley13
2年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
Python进阶者 Python进阶者
1个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这