前言
在上一章 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;<br />
复制代码
(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) {
- $("").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等等,现阶段只需要了解一下
来源:https://www.cnblogs.com/jjgw/p/11717379.html |