[JavaScript]解构赋值详解
文章目录
- 概念
- 数组解构
- 声明分别赋值
- 解构默认值
- 交换变量值
- 解构函数返回的数组
- 忽略返回值(或跳过某一项)
- 赋值数组剩余值给一个变量
- 嵌套数组解构
- 字符串解构
- 对象解构
- 基础对象解构
- 赋值给新变量名
- 解构默认值
- 赋值给新对象名的同时提供默认值
- 同时使用数组和对象解构
- 不完全解构
- 赋值剩余值给一个对象
- 嵌套对象解构(可忽略解构)
- 注意事项
- 小心使用已声明变量进行解构
- 函数参数的解构赋值
- 解构的用途
- 交换变量的值
- 从函数返回多个值
- 提取JSON数据
概念
ES6提供了更简洁的赋值模式,从数组和对象中提取值,这被称为解构
示例:
[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]
数组解构
数组解构是非常简单简洁的,在赋值表达式的左侧使用数组字面量,数组字面量中的每个变量名称映射为解构数组的相同索引项
这是什么意思呢,就是如下面这个示例一样,左边数组中的项分别得到了右侧解构数组相应索引的值
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
声明分别赋值
你可以通过变量声明分别解构赋值
示例:声明变量,分别赋值
// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
解构默认值
如果解构取出的值是undefined
,可以设置默认值:
let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7
在上面的例子中,我们给a和b均设置了默认值
这种情况下,如果a或b的值是undefined
,它将把设置的默认值赋给相应变量(5赋给a,7赋给b)
交换变量值
以往我们进行两个变量的交换,都是使用
//交换ab
c = a;
a = b;
b = c;
或者异或的方法
然而在解构赋值中,我们可以在一个解构表达式中交换两个变量值
let a = 1;
let b = 3;
//交换a和b的值
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
解构函数返回的数组
我们可以直接解构一个返回值为数组的函数
function c() {return [10, 20];
}let a, b;
[a, b] = c();
console.log(a); // 10
console.log(b); // 20
在上面的例子中,**c()**的返回值[10,20]可以在单独的同一行代码中使用解构
忽略返回值(或跳过某一项)
你可以有选择性的跳过一些不想得到的返回值
function c() {return [1, 2, 3];
}let [a, , b] = c();
console.log(a); // 1
console.log(b); // 3
赋值数组剩余值给一个变量
当你使用数组解构时,你可以把赋值数组剩余的部分全部赋给一个变量
let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
这样的话b也会变成一个数组了,数组中的项是剩余的所有项
注意:
这里要小心结尾是不能再写逗号的,如果多了一个逗号将会报错
let [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
嵌套数组解构
像对象一样,数组也可以进行嵌套解构
示例:
const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255
字符串解构
在数组解构中,解构的目标若为可遍历对象,皆可进行解构赋值,可遍历对象即实现Iterator接口的数据
let [a, b, c, d, e] = 'hello';
/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/
对象解构
基础对象解构
let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写console.log(y); // 22
console.log(z); // true
赋值给新变量名
当使用对象解构时可以改变变量的名称
let o = { p: 22, q: true };
let { p: foo, q: bar } = o;console.log(foo); // 22
console.log(bar); // true
如上代码var {p: foo} = o
获取对象 o 的属性名 p,然后赋值给一个名称为 foo 的变量
解构默认值
如果解构取出的对象值是undefined
,我们可以设置默认值
let { a = 10, b = 5 } = { a: 3 };console.log(a); // 3
console.log(b); // 5
赋值给新对象名的同时提供默认值
前面提到过我们赋值给新的对象名,这里我们可以给这个新的对象名提供一个默认值,如果没有解构它,就会自动使用默认值
let { a: aa = 10, b: bb = 5 } = { a: 3 };console.log(aa); // 3
console.log(bb); // 5
同时使用数组和对象解构
在结构中数组和对象可以一起使用
const props = [{ id: 1, name: 'Fizz' },{ id: 2, name: 'Buzz' },{ id: 3, name: 'FizzBuzz' },
];const [, , { name }] = props;
console.log(name); // "FizzBuzz"
不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x// x = undefined
// y = 'world'
赋值剩余值给一个对象
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
嵌套对象解构(可忽略解构)
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;//忽略y
// x = 'hello'
注意事项
小心使用已声明变量进行解构
错误示范:
let x;
{x} = {x: 1};
JavaScript引擎会将{x}
理解为一个代码块,从而产生语法错误,我们要避免将大括号写在行首,避免JavaScript将其解释为代码块
正确写法:
let x;
({x} = {x: 1});
正确写法将整个解构赋值语句放在一个圆括号里,就可以正确执行了
函数参数的解构赋值
函数的参数也可以使用解构赋值
function add([x, y]) {return x + y;
}add([1, 2]);
上面代码中,函数add的参数表面上是一个数组,但在传参的时候,数组参数就被解构为变量x和y了,对于函数内部来说,就和直接传入x和y是一样的
解构的用途
解构赋值的用法很多
交换变量的值
let x = 1;
let y = 2;[x, y] = [y, x];
上面的代码交换x和y的值,这样的写法不仅简洁而且易读,语义清晰
从函数返回多个值
函数只能返回一个值,如果要返回多个值,我们只能将这些值放置数组或对象里返回,当我们有了解构赋值后,从对象或数组里取出这些值犹如探囊取物
// 返回一个数组function example() {return [1, 2, 3];
}
let [a, b, c] = example();// 返回一个对象function example() {return {foo: 1,bar: 2};
}
let { foo, bar } = example();
提取JSON数据
解构赋值对于提取JSON对象中的数据,尤其有用
示例:
let jsonData = {id: 42,status: "OK",data: [867, 5309]
};let { id, status, data: number } = jsonData;console.log(id, status, number);
// 42, "OK", [867, 5309]
使用上面的代码,我们就可以快速取出JSON数据中的值
[JavaScript]解构赋值详解相关推荐
- ES6 解构赋值详解
解构赋值是对赋值运算符的扩展,可以将属性/值从对象/数组中取出,赋值给其他变量. 一.数组的解构赋值 1.基本用法 只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [a, [[b], ...
- 展开运算符解构赋值_解构式展开式搜索栏
展开运算符解构赋值 View demo 查看演示Download Source 下载源 Maybe you have noticed the little adjustments that we di ...
- let的解构赋值_解构赋值还有这么多玩法?
解构赋值 解构赋值很多人可能和我一样,第一次看到这个词的时候摸不着头脑.但是冷静再看一遍好像明白了,"把数据结构分解开分别进行赋值". 我们先看几个小例子 let [a,b,c] ...
- vue解构赋值_ES6解构赋值
写vue或react项目,我们经常在接收到数据的时候,需要对数据进行二次加工操作,一些传统的办法可以实现对数据的加工.但利用到ES6的解构赋值,则更为简单. 解构赋值主要分为对象的解构和数组的解构,在 ...
- vue解构赋值_vue解构赋值_ES6解构赋值
写vue或react项目,我们经常在接收到数据的时候,需要对数据进行二次加工操作,一些传统的办法可以实现对数据的加工.但利用到ES6的解构赋值,则更为简单. 解构赋值主要分为对象的解构和数组的解构,在 ...
- JavaScript系列之解构赋值
文章の目录 一.解构赋值概述 二.解构赋值语法 三.描述 四.示例[解构数组] 1.变量声明并赋值时的解构 2.如果解构不成功,变量的值为undefined. 3.变量先声明后赋值时的解构 4.默认值 ...
- 【JavaScript】解构赋值
1 作用于数组 1.1 解构赋值简介 解构赋值:按照一定的模式,从数组 / 对象中提取值,并对变量进行赋值 let [a, b, c] = [12, 5, 6]; // 左边的结构 = 右边的结构 c ...
- 不容错过的ES6知识点(一):变量、函数、扩展操作符、解构赋值
首先给大家介绍一个网站: freeCodeCamp. ES6 变量 var可以重复声明同一个变量 Object.freeze:禁止对对象进行增删改操作 函数 使用箭头函数编写简洁的匿名函数 设置函数的 ...
- ES6变量的解构赋值--对象篇
目录 使用方式 普通形式 嵌套结构 使用默认值 注意事项 上一篇我们讲解了数组的解构赋值,解构还可以用于对象.字符串等等,这里我们来讲解对象的解构赋值. ES6变量的解构赋值--数组_zxn20012 ...
最新文章
- php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧
- su命令 sudo命令 限制root远程登录
- 为什么使用中间件下载时总是收到警告消息Object is in status Wait
- CIKM 2021 | AutoHERI: 基于层次表示自动聚合的 CVR 预估模型
- Java中的堆栈和队列
- 基于jsp+mysql+Spring的SpringBoot招聘网站项目(完整源码+sql)主要实现了管理员登录,简历管理,问答管理,职位管理,用户管理,职位申请进度更新,查看简历
- linux火狐自动更新,CentOS 7手动更新firefox | Linux系统运维联盟
- 进程的创建-fork(python版)
- error C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead.
- 《社交网站界面设计(原书第2版)》——3.2 注册
- verilog宏功能中dds信号发生器_什么是相位相干性?了解生成相位相干射频信号的三种配置方法...
- (三)Mybatis类型转换器,接口传参类型,一对一,一对多查询resultMap配置
- StringUtil工具类 之 字符串长度截取函数
- Mac 系统SourceTree 配置VSCode代码对比工具
- Oracle 锁表查询及解锁
- iOS开发之SEL用法
- linux系统取消自检,Linux 磁盘自检设置
- 【软件测试面试题】证券项目面试过程总结
- Progressive Domain Adaptation from Source Pre-trained Model
- [Nikon D80]南京新庄立交桥