ES6学习总结之变量的解构赋值
前言
在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解，上一章中我们主要学习了三大部分的内容，let命令的使用，块级作用域，const命令的使用，那么从本篇博客将进一步深入了解ES6中的相关语法，毕竟未来ES6是主流。
本章目标
- 学会数组的解构赋值
- 学会对象的解构赋值
- 学会字符串的解构赋值
- 学会数值和布尔值的解构赋值
- 学会函数参数的解构赋值
- 学会解构赋值的用途
本人对解构赋值的理解：模式匹配，匹配成功获取值，匹配不成功则为undefined，好比开心消消乐一样(我没有玩过，但是听过一点点)，开心消消乐中只要有相同的就会消失，然后加分，而模式匹配呢？匹配成功加分，匹配不成功则失败。
数组的解构赋值
数组的解构赋值十分简单，只要等号左右两边模式匹配成功，则获取值，否则为undefined，在讲解数组解构赋值之前，我们先来看下我们以前定义变量的格式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> let a=1; let b=2; let c=3; //或者 let a=3, b=4, c=5; //ES6的模式 let [a,b,c]=[4,5,6];//左右两边相等，a=4,b=5,c=6 </script> </body> </html>
在这里我们已经使用了数组的解构赋值，即let [a,b,c]=[4,5,6]左右两边进行模式匹配，可得a=4,b=5,c=6
(1)不完全解构
解构除了完全解构之外，还具备不完全解构的特性,即左边的模式只匹配一部分等号右边的数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> let [x,y]=[1,2,3]; console.log(x);//1 console.log(y);//2 let [a,[b],d]=[1,[2,3],4]; console.log(a);//1 console.log(b);//2 console.log(d);//4 </script> </body> </html>
(2)特殊值
如果等号右边不是数组，那么将会报错
let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null;
(3)默认值
数组的解构允许有默认值，如果一个数组的成员为null,默认值就不会生效，因为null不严格等于undefined
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> let [foo=true]=[]; console.log(foo);//true let [x,y='b']=['a']; let [z,w='b']=['a',undefined]; console.log(x);//a console.log(y);//b console.log(z);//a console.log(w);//b let [a=1]=[undefined]; let [b=2]=[null]; console.log(a);//1 console.log(b);//null </script> </body> </html>
对象的解构赋值
关于对象的解构赋值我总结了如下三点
- 数组的元素是按次序排列的，变量的取值有它的位置决定，而对象的属性是没有次序的，变量必须和属性同名，才能取到正确的值
- 如果解构失败，变量的值等于undefined
- 对象解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者
示例1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对象的解构赋值</title> </head> <body> <script type="text/javascript"> //按顺序排列 // let {foo,bar}={foo:'foo',bar:'bar'}; // console.log(foo);//foo // console.log(bar);;//bar //不按顺序排列 // let {bar,foo}={foo:'foo',bar:'bar'}; // console.log(bar);//bar // console.log(foo);;//foo //解构不成功，值为undefined let {baz}={foo:'foo',bar:'bar'}; console.log(baz);//undefined </script> </body> </html>
在这个案例中，我们有按顺序的解构，没有顺序的解构，以及解构不成功的情况
示例二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对象的解构赋值</title> </head> <body> <script type="text/javascript"> let {foo:baz}={foo:'aaa',bar:'bbb'} console.log(baz);//aaa let obj={first:'hello',last:'world'}; let {first:a,last:b}=obj; console.log(a);//hello console.log(b);//world </script> </body> </html>
从而可以看出：对象解构赋值的原理是先找到同名属性，然后再赋给对应变量，真正被赋值的是后者而不是前者
字符串的解构赋值
字符串的结构赋值十分简单，和之前的解构赋值一样也是模式匹配，注意：字符串中有length属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字符串解构赋值</title> </head> <body> <script type="text/javascript"> const [a,b,c,d,e]='hello'; console.log(a);;//h console.log(b);//e console.log(c);//l console.log(d);//l console.log(e);//o let {length:len}='hello'; console.log(len);//5 </script> </body> </html>
数值和布尔值的解构赋值
解构赋值原理：只要等号右边的值不是数组或对象，就先将其转为对象，但是也有特殊情况，如：undefined和null无法转为对象，所以对它们进行解构赋值都会报错。这一点非常重要
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数值和布尔值的解构赋值</title> </head> <body> <script type="text/javascript"> // let {toString:s}=123; // console.log(s===Number.prototype.toString); // let {toString:b}=true; // console.log(b===Boolean.prototype.toString); let {prototype:x}=undefined; let {prop:y}=null; console.log(x);//报错 console.log(y);//报错 </script> </body> </html>
函数参数的解构赋值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数参数解构赋值</title> </head> <body> <script type="text/javascript"> function add([x,y]){ return x+y; } console.log(add([1,3]));//4 [[1,2],[3,4]].map(([a,b])=>{ console.log(a+b);//4,7 }) //使用默认值 function move({x=0,y=0}){ return [x,y] } move({x:3,y:10});//[3,8] move({x:3})//[3,0] move({})//[0,0] move();//[0,0] function bar({x,y}={x:0,y=0}){ return [x,y] } move({x:3,y:8});//[3,8] move({x:3});//[3,undefined] move({});//[undefined,undefined] move();//[0,0] </script> </body> </html>
在move方法中函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值，而函数bar的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果
解构赋值的实际用途
(1)交换变量的值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解构赋值的用途</title> </head> <body> <script type="text/javascript"> //(1)交换变量的值 let x=1; let y=2; [x,y]=[y,x]; console.log(x);//2 console.log(y);//1 </script> </body> </html>
在这里，我们可以看到x和y的值进行了交换，x的值从1变成的2，而y的值从2变成了1
(2)从函数返回多个值
我们知道javascript中中使用return只能返回一个值，如果需要返回多个值的话就需要将数据放在数组或对象中，然后return回去，但是有了解构赋值，你想要取出这些值就非常方便，我们看下下面的示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解构赋值的用途</title> </head> <body> <script type="text/javascript"> //(2)从函数返回多个值 //返回一个数组 function bar(){ return[1,2,3] } let[a,b,c]=bar(); console.log(a);//1 console.log(b);//2 console.log(c);//3 //返回一个对象 function baz(){ return{ x:1, y:2, } } let {x,y}=baz(); console.log(x);//1 console.log(y);//2 </script> </body> </html>
在这里我们返回一个数组之后使用a,b,c进行解构赋值，匹配a=1,b=2,c=3,而返回对象之后我们使用对象来接收，注意：返回对象的键名一定要和需要解构的键名一致，否则取到的值为undefined
(3)函数参数定义
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解构赋值的用途</title> </head> <body> <script type="text/javascript"> //(3)函数参数定义 //参数是一组有次序的值 function foo([x,y,z]){ console.log(x);//1 console.log(y);//2 console.log(z);//3 } foo([1,2,3]); //参数是一组无序的值 function bar({x,y,z}){ console.log(x);//10 console.log(y);//20 console.log(z);//1 } bar({z:1,x:10,y:20}) </script> </body> </html>
(4)提取JSON数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解构赋值的用途</title> </head> <body> <script type="text/javascript"> //(4)提取JSON数据 let stu={ name:'一只流浪的kk', age:18, sex:'male' } let {name:name,age:age,sex:sex}=stu; console.log(name,age,sex);//一只流浪的kk,18,male </script> </body> </html>
使用解构赋值可以很方便的提取JSON中的数据
(5)函数参数默认值
这种方法我们见过很多，再封装ajax的时候经常用到或者是扩张jquery插件的时候，我们都会添加默认值
//(5)函数参数默认值 ; (function(method) { method(window, window.document, jQuery); }(function(win, doc, $) { ＄.fn.SuperPlus = function(options) { //默认参数 var setting={ length:3, color:"blue" }; //使用用户的参数覆盖默认参数 $.extend(setting,options); return $.each(this, function(index, obj) { $("<span/>").html("+").css("cursor", "pointer").css("color",setting.color).click(function() { $(obj).width($(obj).width() + setting.length); }).insertAfter(obj); }); } }));
在这里我们就是指定了默认值，我们对外开发我们可以让用户进行修改的一些参数，当用户没有传递的时候，我们就使用默认值
(6)遍历Map结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解构赋值的用途</title> </head> <body> <script type="text/javascript"> //(6)遍历Map结构 const map=new Map(); map.set('first','hello'); map.set('last','world'); for(let [key,value] of map){ console.log('键是：'+key,'值是:'+value);//键：first,last,值：hello,world } //或者 for(let [key,value] of map.entries()){ console.log('键是：'+key,'值是:'+value);//键：first,last,值：hello,world } //如果只想遍历key for(let [key,] of map){ console.log(key);//first,last } //如果只想遍历value for(let [,value] of map){ console.log(value);//hello,world } </script> </body> </html>
这里涉及到map的相关知识，关于ES6新增的数据结构，查看博客 https://www.cnblogs.com/jjgw/p/11561169.html
(7)输入模块的指定方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解构赋值的用途</title> </head> <body> <script type="text/javascript"> //(7)输入模块的指定方法 const{add,sub}=require('count'); </script> </body> </html>
这种方法我们之后会用到，关于ES6中模块的加载，例如：AMD,CMD,UMD等等，现阶段只需要了解一下
| 作者：一只流浪的kk 出处：https://www.cnblogs.com/jjgw/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留原文链接，否则将追究法律责任 |
微信扫一扫 |
