ES6-变量的解构赋值复习+学习

ES6------变量的解构赋值

 

　　由于之前学过ES6的解构赋值，但是只是略看了一点网上的视频，所以今天就看了看ES6对这一部分的详细介绍，然后做一个总结的笔记。

 

　　首先，先大概说一下什么是变量的解构赋值，大概了解一下是什么？然后从几个方面分别对这个概念，以及相应的知识做一个总结和学习，最后总结一下具体的用途，然后再看一下涉及到的不足，以及解决方法！具体分为以下几点：

1.基本用法（模式匹配），同时借此理解什么是变量赋值

2.对象的解构赋值

3.字符串的解构赋值

4.数值和布尔值的解构赋值

5.函数参数的解构赋值

6.重要的用途都有哪些

7.涉及到的括号问题

 　　接下来就从上面这七点展开复习和学习！

 

 

 

 

1.基本用法（模式匹配），同时借此理解什么是变量赋值

//1.首先，什么是解构赋值？
//在ES6中，允许按照一定的模式从数组和对象中提取值，然后对变量进行赋值，这个被称为解构赋值，举个例子：
let a = 1;
let b = 2;     //普通的变量声明
let [a,b] = [1,2];   //利用解构赋值进行的变量声明（该方法为“模式匹配”）
//至此我想大家都应该知道解构赋值的大概意思了吧！
//利用模式匹配的方法对数组进行解构：
let [a,[b,c]] = [1,[2,3]]; //简单理解就是对应变量对应的值
​
​
//2.模式匹配的三种情况：解构成功，解构不成功，不完全解构,以及模式匹配的条件。如下：
//(1)解构成功就是对应都有值，这个就不再多说
//(2)解构不成功，则变量的值就是undefined，例如：
let [f] = [];
let [a,f] =[1];    //这两个都是解构不成功，对应的f就是undefined 
//(3)不完全解构，意思应该是数值较多，变量少的情况。例如：
let [a,b,c] = [1,2,3,4];  //这里右边有四个数值，左边有三个变量，那就是从左向右对应赋值，解构可以成功，但是不完全。
//(4)模式匹配的条件：如果等号右边不是可遍历的解构，那么将会报错。例如：
let [f] = 2;
let [f] = false;    
let f = NaN;        //这几个都会报错，原因就是等号右边的值转为对象后不具备Iterator接口，或者就是本身就没有这个接口
let f = undefined;   
//只要有Iterator接口，或者是Generator函数，也都可以进行解构赋值，例如：
function *fibs(){
    let a = 0;
    let b = 1;
    while(true){
        yield a;
        [a,b] = [b,a+b];
    }
}
let [a,b,c,d,e,f] = fibs(); //f = 5;
//当然Iterator，Generator是什么？大家可以先搜索一下了解一下，在之后我会就这部分单独进行学习和复习，以及做笔记。
​
​
//3.默认值
//(1)解构赋值可以做默认值，那么默认值是干什么的？是什么？看以下例子你就知道了：
let [f = 1] = [];   //f的值是1
let [x = 1] = [undefined]   // x的值是1
let [x = 1] = [null]   //x的值是null，这种情况和上面的不同，为什么呢？
//大家看完上面的例子为什么最后一个是null？看第(2)点。
//(2)注意一个默认值规则：ES6内部的默认值是先进行===判断，然后再让默认值生效的。
let [x = 1] = [null]  //当执行这一句，会先判断等号右边括号内是否是undefined，此时右边是null与undefined不一样，所以默认值不会生效，结果就是null
let [x = 1] = [];    //等号右边是空，空也就是undefined，所以默认值可以生效，所以x=1成立
//(3)默认值的方式
//默认值可以是变量：
let [x =1,y = x]= [];  // x=1;y=1;
let []x = 1,y=x] =[2]; //x = 2,y = 2; 先进行===比较，如果右边有值，先赋值，如果没了，取默认值
//默认值可以表达式，而表达式是惰性的，在用时才会执行：
function(){
    console.log('aaa');
}
let [x = f()] = [1];   //在该代码中，等号右边数组里面有值，则x可以取到值，因此不需要默认值，那么f()这个表达式根本不会执行。
​
//注意：数组的模式是成员，而不是成员的值，两回事，在最后的圆括号内会提及

 

 

 

 

 

2.对象的解构赋值

//1.对象解构的规则（与数组解构的区别）
//(1)对象解构与数组解构不同，对象解构是匹配属性名的，而不看顺序:
let {b,f} = {f:"f",b:"b"};  //得到的结果b为b，f为f
//(2)对象解构是属性找不到匹配值会得到undefined
//(3)对象的匹配模式，不同变量名的解构赋值操作：
let{匹配已有属性名：真正想要改变值的属性名} = {匹配已有的属性名：对应的属性值}; 
let{f:f} = {f:"fff"}; //对象的匹配模式是等号左边的f属性的值是个f变量，这样匹配到的f属性的值才是fff
let{f:a} = {f:"fff"}; //对象中含有属性a，但是等号右边没有属性a，此时怎么对属性a赋值呢？利用f属性：对应属性就可以让a得到fff
let{foo:bar} = {foo:"barbarbar"}  //结果就让bar得到了barbarbar字符串
//在上面的代码中，foo与f是匹配的模式，f，a，bar才是变量，才是真正被赋值的，而不是匹配模式
//(4)匹配模式的嵌套理解：
var demo = {
    a:{
        b:{
            c=1
        }
    }
}
var {a,a:{b},a:{b:{c}}} = demo;  //c:1,b为{c=1},a为{b:obj},该匹配等号左边的a相当于 a:a的形式
​
​
//2.对象解构的默认值
//对象解构也可以有默认值，默认值的条件仍旧是等号右边对象属性判断为undefined
var {x = 3} ={}  //x = 3
var {x:y = 3}={} //匹配模式x为匹配名字，对应得还是y得值改变，此时等号右边为undefined，y取默认值
var {x:x = 3} = {x:null}  //仍旧为null
​
​
//3.对象解构与数组解构
//因为数组得本质也是对象，因此可以让对象与数组相互使用:
let arr = [1,2,3];
let{0:a,1:b,2:c} = arr;  //a=1,b=2,c=3 此时就很类似伪数组
​

 

 

 

 

 

 

 

3.字符串的解构赋值

//字符串也可以解构赋值，此时就转化为一个伪数组形式
const [a,b,c]="big";   //a为b，b为i，c为g
//伪数组（对象）也有一个length属性
let {length:len} = "hello";  //len = 5;
//创建一个伪数组对象类似于下列：
var ar={
    0:'1',
    1:'2',
    length:2
}

4.数值和布尔值的解构赋值

//等号右边是数值或者布尔值，则会先转化为对象，而undefined，或者null无法转化为对象，因此肯定会报错：
let {toString:a} = 1;
let {toString:a} = true;
//a都可以取到一个Number，一个Boolean ， 因为数值和布尔值对象里面都含有toString方法，含有就可以用

 

 

 

 

 

 

 

5.函数参数的解构赋值

//函数得参数可以解构赋值
function add([x,y]){
    return x+y;
}
add([1,2])   //3,其中[1,2]与形参[x,y]就相当于一个解构赋值 [x,y]=[1,2];
//函数参数解构可以有默认值，下面介绍两种不同形式
function x({x=0,y=0}={}){
    return [x,y];
}
x({x:1,y:2});   //[1,2]   第一种参数
x({});    //[0,0]  第二种参数
x();    //[0,0]   第三种参数
//以上为第一种情况，当参数种等号右边传进去得值为第一种得时候，判断对象为非undefined则执行赋值，当传入的是第二种参数时，判断对象为undefined，此时就会有默认值x = 0， y = 0；
function({x,y}={x:0,y:0}){
    return [x,y];
}
x({x:3,y:8});   //[3,8] 
x({})  //[undefined，undefined];  当传入为undefined，
//综上所属，实际上时函数参数来得到默认值，而不是变量x，y。当有undefined时会触发默认值

 

 

 

 

 

 

 

6.重要的用途都有哪些

//1.交换变量的值
let x = 1;
let y = 2;
[x,y] = [y,x];
//2.从函数返回多值
function sss(){
    return [1,2,3];
}
let [a,b,c] =sss();  //当然也可以返回一个对象，
//3.函数参数定义，这个就不多说了
//4.提取JSON数据
let jsonDate = {
    id:1,
    status:'OK',
    data:[888,888]
}
let {id,status,number} = jsonData;
//5.函数参数的默认值
//6.遍历Map解构
//任何部署了Iterator接口的对象都可以用for...of循环遍历。Map解构原生支持Iterator接口，配和变量值取值就很方便
var map = new Map();
map.set('a','b');
​
for(let [key,value] of map){
    console.log(key + "is" + value);
}
//该部分如果涉及到那些不了解的部分可以先自行查阅，后面我也会一一学习map与Iter接口。
//7.输入模块的指定方法
const{SourceMapConsumer,SourceNode} = require("source-map");
//以上基本都是有数组，值传递的点，这些点注意可以使用解构赋值，会更加的方便，在学习复习后面的知识的时候，都会穿插举例子，越学越明白

 

 

 

 

 

 

 

 

7.涉及到的括号问题

//这里就涉及到解构赋值的问题了，解构赋值虽然很方便，但是解析起来并不是很容易，对于具体的种类需要遇到等号的时候才可以得到答案，出现[]，{}都可以理解，但是出现了()又怎么办呢？ES6的解释就是，那就别用()了,哈哈，有问题，就跳过问题，不就没问题了？我直呼好家伙！当然肯定尽量不使用()。
//1.不能使用()的情况
//(1)变量的声明
let [(a)] = [1];   //肯定报错
let {x:(c)} = {}   //报错
let {(x):c} = {}   //报错
let (o:({p:p}))={o:{p:2}};   //报错
//声明变量绝对不可以用()
//(2)函数的参数，也属于变量声明肯定不可以加()，这里就不举例子了，把上面的等号左边的变量或者对象直接放到函数小括号内就是了
//(3)赋值语句
({p:a}) = {p:42};  //报错
({p:(d)}) = [5];  //报错
[({p:a}),{x:c}] = [{},{}];  //报错
//把代码模式放到括号里，把一部分放到括号里都会导致报错
​
//2.可以使用的情况
//只有一种赋值语句非模式部分可以使用()
[(b)] = [3];  //第一种数组
({p:(d)}) ={})   //非模式部分可以使用括号
//首先，可以使用的原因，都是赋值语句，不是声明语句，括号里都不属于模式的一部分，第一种数组的模式是b值对应的数组的第一个成员，而括号里的是数组第一个成员对应的值。

 

 

 

 

 

 

今天的学习，就到这里，大家可能看到有些东西在哪里见过，当然我也不是无敌的，我自己原创一个内容，我肯定也是学习别人的知识，然后自己做个笔记方便日后复习，同时记录一下今天的学习内容，一天一点进步，一大堆的文字，没有什么图片，不精彩啊。但是，知识的学习就是这样，你想搞懂这个情况，肯定要阅读大量的文字，这也是一个过程，当你真正的体会到理解到知识的时候，就也有一种成就感吧，小小的喜悦。当然，我一个字一个字写了这么多，总结了记下了这些笔记，虽然在别人眼里可能很简单，没必要，但是一步一步我也会涉及到深层知识，就想Vue一样，渐进式的由浅入深，加油吧少年，奥里给！！！


来源：https://www.cnblogs.com/w0112y/p/js_jiegoufuzhi.html