对于解构赋值的好处
<h4>思考解构赋值有什么好处呢</h4>
<ul>
<li>对于数组</li>
<li>
<h2>对于对象
文章转自：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a></h2>
</li>
</ul>
<h4>解构数组</h4>
<ul>
<li>变量声明并且赋值解构</li>
</ul>
<pre><code class="language-javascript">var foo = ['one','two','three'];
var [one,two,three] = foo ; //左边变量，右边赋值
console.log(one) //'one'
consoel.log(two) // 'two'
console.log(three)//'three'</code></pre>
<ul>
<li>变量先声明后赋值时的解构
通过解构分离变量的声明，可以为一个变量赋值</li>
</ul>
<pre><code class="language-javascript">var foo = ['one','two','three'];
var one,two,three;
[one,two,three] = foo;
console.log(one) //'one'
console.log(two) // 'two'
console.log(three)//'three'</code></pre>
<ul>
<li>默认值
为了防止从数组中取到一个值为undefined的对象，可以为这个对象设置默认值 </li>
</ul>
<pre><code class="language-javascript">var a,b;
[a= 5,b=6] = [1];
console.log(a); //1
console.log(b);//6</code></pre>
<ul>
<li>变量交换
在一个解构赋值的表达式中可以交换两个变量的值</li>
</ul>
<pre><code class="language-javascript">var a = 1;
var b = 3;
[a,b] = [b,a];
console.log(a);//3
console.log(b);//1</code></pre>
<ul>
<li>解析一个函数返回的数组
从一个函数返回一个数组是十分常见的情况.。解构使得处理返回值为数组时更加方便。</li>
</ul>
<p>在下面例子中，[1, 2] 作为函数的 f() 的输出值，可以使用解构用一句话完成解析。</p>
<pre><code class="language-javascript">function f(){
return [1,2];
}
var a,b;
[a,b] = f();
console.log(a);//1
conaole.log(b);//2</code></pre>
<ul>
<li>将剩余数组赋值给一个变量
当解构一个数组时，可以使用剩余模式，将剩余的部分赋值给一个变量</li>
</ul>
<pre><code class="language-javascript">var [a,...b] = [1,2,3];
console.log(a);//1
console.log(b);//[2,3]</code></pre>
<h3>解构对象</h3>
<ul>
<li>基本赋值</li>
</ul>
<pre><code class="language-javascript">var a = {p:1,d:2}
var {p,d} = a;
console.log(p)
console.log(d)</code></pre>
<ul>
<li>无声明赋值
通过解构可以无需声明来赋值一个变量。</li>
</ul>
<pre><code class="language-javascript">var a,b;
({a,b} = {a:1,b:2});</code></pre>
<ul>
<li>给新的变量名赋值</li>
</ul>
<pre><code class="language-javascript">var o = {p:42,q:true};
var {p:foo,q:bar} = o;
console.log(foo);//42
console.log(bar);//true</code></pre>
<ul>
<li>默认值
变量可以先赋予默认值。当要提取的对象没有对应的属相，变量就会赋予默认值</li>
</ul>
<pre><code class="language-javascript">var {a = 10,b=5} = {a:3};
console.log(a);//3
console.log(b);//5</code></pre>
<ul>
<li>给新的变量命名并提供默认值
一个属性可以是1）从一个对象解构，并分配给一个不同名称的变量，2）分配一个默认值，以防未解构的值是undefined。</li>
</ul>
<pre><code class="language-javascript">var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5</code></pre>
<h3>解构赋值对于函数的用处</h3>
<pre><code class="language-javascript">//对象解构赋值
let prams = {
name:'judy',
age:'18',
x:'',
y:2
}
let {name,age,x=1,y} = prams;
console.log(prams)
function People(prams){
console.log(name); //'judy'
console.log(age);//'18'
console.log(x);//1
console.log(y);//2
}
People();</code></pre>