1. 首页
  2. IT资讯

「ES6基础」解构赋值(destructuring assignment)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F0eb6695e04fc405b8d49c5602522fdee” img_width=”900″ img_height=”383″ alt=”「ES6基础」解构赋值(destructuring assignment)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E我们经常可以在其他编程语言(如GO语言)中看到多返回值这种特性,因为在很多实际场景中,函数的返回值中,函数的返回值并不只有一个单一的值。ES6之前,并没有可以直接使用语法来实现多返回值的特性。ES6终于出现了解构赋值的语法糖来解决此类问题。u003Cu002Fpu003Eu003Cpu003E解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行赋值,大大的减少了代码量,快速的给多个变量进行赋值。解构表达式有两种:array和object。u003Cu002Fpu003Eu003Cpu003E今天的文章笔者将从以下方面进行介绍:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E使用数组表达式解构赋值u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E常规用法u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E忽略数组中的某些值u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E使用展开语法u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E默认参数值u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E嵌套数组解构u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E作为函数参数u003Cu002Fliu003Eu003Cliu003E使用对象表达式解构赋值u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E常规用法u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E默认参数值u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E嵌套对象u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E作为函数参数u003Cu002Fliu003Eu003Cliu003E其他u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E解构对象的方法u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E获取字符串长度u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E拆分字符串u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E交换变量u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E遍历Map结构u003Cu002Fliu003Eu003Cli class=”ql-indent-1″u003E加载指定模块的方法u003Cu002Fliu003Eu003Cliu003E常用场景介绍u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003Eu003Cstrongu003E本篇本章阅读时间预计15分钟u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E使用数组表达式解构赋值u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003E常规用法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E如何将一个数组的值,赋值给多个变量?数组解构语法能让我们快速的迭代数组的元素,并赋值给多个变量。u003Cu002Fpu003Eu003Cpu003EE6之前,我们可以这种形式将数组的内容赋值给多个变量:u003Cu002Fpu003Eu003Cpreu003Evar myArray = [1, 2, 3];u003Cbru003Evar a = myArray[0];u003Cbru003Evar b = myArray[1];u003Cbru003Evar c = myArray[2];u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003EES6后,我们可以通过数组解构语法,在一行语句里完成上述操作。u003Cu002Fpu003Eu003Cpreu003Elet myArray = [1, 2, 3];u003Cbru003Elet a, b, c;u003Cbru003E[a, b, c] = myArray; u002Fu002Farray destructuring assignment syntax”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码中,[a, b, c]就是解构表达式。在数组解构语句的左侧就是需要进行赋值的多个变量,等号右侧则是我们需要分配的值。u003Cu002Fpu003Eu003Cpu003E我们还可以上述代码更短,你还可以这么写,代码如下:u003Cu002Fpu003Eu003Cpu003Elet [a, b, c] = [1, 2, 3];u003Cu002Fpu003Eu003Cpu003E我们在同一个语句中创建变量,而不是分别创建。是不是更清爽。u003Cu002Fpu003Eu003Cpu003E如果左边的数值少于右边数组的项数,左边变量的值只会和右边数组的内容一一对应,多于的内容将会忽略。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E忽略数组中某些值u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E如果只有两个变量,我们数组内容有三项,我们想跳过数组中的第二项,我们如何使用数组解构赋值呢?代码如下:u003Cu002Fpu003Eu003Cpreu003Elet [a, , b] = [1, 2, 3];u003Cbru003Econsole.log(a);u003Cbru003Econsole.log(b);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码我们使用, ,忽略数组的第二项,建议中间有空格,方便我们阅读。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E使用展开语法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E上篇文章《【ES6基础】展开语法(Spread syntax)》,笔者介绍了展开语法的几个应用场景,由于上篇文章没介绍解构赋值,所以在这里给大家介绍展开语法在解构赋值的应用。如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet [a, …b] = [1, 2, 3, 4, 5, 6];u003Cbru003Econsole.log(a);u003Cbru003Econsole.log(Array.isArray(b));u003Cbru003Econsole.log(b);”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码则会输出:u003Cu002Fpu003Eu003Cpreu003E1u003Cbru003Etrueu003Cbru003E2,3,4,5,6u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码,你可以看到b变量被解构赋值成数组,这里…就是我们上篇文章提到的剩余参数场景的运用。u003Cu002Fpu003Eu003Cpu003E如果想跳过数组中的部分值,我们可以这么做,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet [a, , ,…b] = [1, 2, 3, 4, 5, 6];u003Cbru003Econsole.log(a);u003Cbru003Econsole.log(b);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码则会输出:u003Cu002Fpu003Eu003Cpreu003E1u003Cbru003E4,5,6u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这段代码我们跳过了数值2,3数组。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E默认参数值u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E笔者在《u003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714508610916844035u002F?group_id=6714508610916844035″ target=”_blank”u003E「ES6基础」默认参数值u003Cu002Fau003E》这篇给大家介绍了如何使用默认参数值,在解构赋值中,我们如何设置变量的默认值呢,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet [a, b, c = 3] = [1, 2];u003Cbru003Econsole.log(c); u002Fu002FOutput “3”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E嵌套数组u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们还可以从多维数组中提取值并分配给变量,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet [a, b, [c, d]] = [1, 2, [3, 4]];u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E作为函数参数u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们还可以使用数组解构表达式作为函数参数来提取可迭代对象的值,作为参数传递给函数参数,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction([a, b, c = 3]) {u003Cbru003E console.log(a, b, c); u002Fu002FOutput “1 2 3″u003Cbru003E }u003Cbru003EmyFunction([1, 2]);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E笔者在《【ES6基础】默认参数值》这篇文章提及到我们可以传递undefined,指定某个具体的参数使用默认值,我们可以使用结构赋值为相关变量提供一组默认值,并传入undefined,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction([a, b, c = 3] = [1, 2, 3]) {u003Cbru003E console.log(a, b, c); u002Fu002FOutput “1 2 3″u003Cbru003E }u003Cbru003EmyFunction(undefined);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在这里,我们将undefined作为参数传递,因此使用默认数组[1,2,3]进行提取赋值。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E使用对象表达式解构赋值u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003E常规用法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E对象解构赋值将对象属性的值给多个变量。ES6之前我们可以这样把对象的属性赋值给多个变量,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Evar object = {name : “John”, age : 23};u003Cbru003Evar name = object.name;u003Cbru003Evar age = object.age;u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在ES6中,我们可以使用对象解构表达式,在单行里给多个变量赋值,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet object = {name : “John”, age : 23};u003Cbru003Elet name, age;u003Cbru003E({name, age} = object); u002Fu002Fobject destructuring assignment syntaxu003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E对象解构赋值的左侧为解构赋值表达式,右侧为对应要分配赋值的对象。解构语句的两边千万不要遗漏左右括号(),否则会报错。u003Cu002Fpu003Eu003Cpu003E还有一点需要格外注意,解构对象变量的名称一定要和右边对象的属性名称保持一致,否则会提示变量的值为undefined。如果你想以其它的变量名进行命名,你可以这么做,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet object = {name : “John”, age : 23};u003Cbru003Elet x, y;u003Cbru003E({name: x, age: y} = object);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码x,y为对应对象属性的值John,23。如果你输出name或age,编译器则会提示ReferenceError: 变量 is not definedu003Cu002Fpu003Eu003Cpu003E我们可以让代码更短,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet {name: x, age: y} = {name : “John”, age : 23};u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上述代码由于声明变量和解构赋值在同一行,因此对象结构语句两边无需左右括号()。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E默认参数值u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E在解构对象针对未分配值的变量,我们可以为变量提供默认值,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet {a, b, c = 3} = {a: “1”, b: “2”};u003Cbru003Econsole.log(c); u002Fu002FOutput “3”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在解构对象时变量名支持表达式计算,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet {[“first”+”Name”]: x} = { firstName: “Eden” };u003Cbru003Econsole.log(x); u002Fu002FOutput “Eden”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E嵌套对象u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们还可以从嵌套对象中提取属性值,即对象中的对象。 如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet {name, otherInfo: {age}} = {name: “Eden”, otherInfo: {age:23}};u003Cbru003Econsole.log(name, age); u002Fu002FEden 23u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E作为函数参数u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E就像数组解构赋值一样,我们也可以使用对象解构赋值作为函数参数,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Efunction myFunction({name = ‘Eden’, age = 23, profession =”Designer”} = {}){u003Cbru003E console.log(name, age, profession); u002Fu002F Outputs “John 23 Designer”u003Cbru003E}u003Cbru003EmyFunction({name: “John”, age: 23});u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E在这里,我们传递一个空对象作为默认参数值,如果将undefined作为函数参数传递,变量将使用默认值。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E其他u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Cstrongu003E解构对象的方法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E比如结构Math对象的方法,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet {floor,pow}=Math;u002Fu002F把Math里的方法提取出来变成一个变量u003Cbru003Elet a=1.1;u003Cbru003Econsole.log(floor(a));u002Fu002F1u003Cbru003Econsole.log(pow(2,3));u002Fu002F8u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E获取字符串的长度u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Evar {length}=’lxy’;u003Cbru003Econsole.log(length);u002Fu002F3u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E拆分字符串u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Evar [a,b,c,d]=’前端达人’;u003Cbru003Econsole.log(a,b,c,d) u002Fu002F 输出:前 端 达 人u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E交换变量u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Elet x = 1;u003Cbru003Elet y = 2;u003Cbru003E[x, y] = [y, x];u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E遍历Map结构u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Evar map = new Map();u003Cbru003Emap.set(‘first’, ‘hello’);u003Cbru003Emap.set(‘second’, ‘world’);u003Cbru003Efor (let [key, value] of map) {u003Cbru003E console.log(key + ” is ” + value);u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E加载指定模块的方法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Econst { SourceMapConsumer, SourceNode } = require(“source-map”);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E常用场景介绍u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E比如我们经常与后端API接口做数据交互,我们需要处理返回的JSON对象,使用解构方式大大简化了我们的代码,如下段代码所示:u003Cu002Fpu003Eu003Cpreu003Elet jsonData = {u003Cbru003E id: 42,u003Cbru003E status: “OK”,u003Cbru003E data: [867, 5309]u003Cbru003E};u003Cbru003Elet { id, status, data: number } = jsonData;u003Cbru003Econsole.log(id, status, number);u003Cbru003Eu002Fu002F 42, “OK”, [867, 5309]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E今天的内容有些多,想必大家对解构用法有了全面的认识吧,使用解构赋值是不是很强大,大大简化了我们的代码量,虽然优势蛮多,但是增加对代码的理解难度,我们只有在实践中不断的运用,来加深我们对解构赋值的认识。u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003EES6相关文章u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6713733594054918663u002F?group_id=6713733594054918663″ target=”_blank”u003E「ES6基础」let和作用域u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714091462650233352u002F?group_id=6714091462650233352″ target=”_blank”u003E「ES6基础」const简介u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714508610916844035u002F?group_id=6714508610916844035″ target=”_blank”u003E「ES6基础」默认参数值u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6714847432842150414u002F?group_id=6714847432842150414″ target=”_blank”u003E「ES6基础」模板字符串(Template String)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6715214218485826059u002F?group_id=6715214218485826059″ target=”_blank”u003E「ES6基础」展开语法(Spread syntax)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712258013375234568u002F?group_id=6712258013375234568″ target=”_blank”u003E「ES6基础」箭头函数(Arrow functions)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712646837519532551u002F?group_id=6712646837519532551″ target=”_blank”u003E「ES6基础」迭代器(iterator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003Eu003Ca class=”pgc-link” data-content=”mp” href=”https:u002Fu002Fwww.toutiao.comu002Fi6712984431553937934u002F?group_id=6712984431553937934″ target=”_blank”u003E「ES6基础」生成器(Generator)u003Cu002Fau003Eu003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注u003Cstrongu003E“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「ES6基础」解构赋值(destructuring assignment)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10746.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code