解构，一种黑魔法解构是从对象中提取更小元素的过程。赋值是对解构元素的重新赋值。您可能无法在浏览器上实时测试以下代码。推荐在babel官网在线测试代码：在线测试ES6代码URL解构类1、对象解构2、数组解构3、混合解构4、解构参数对象解构对象解构简单Exampleletobj={a:1,b:[1,2]}//对象解构const{a,b}=objconsole.log(a,b)//1[1,2]在函数中使用解构赋值解构是提取元素一个对象或一个数组，而赋值是给元素赋值，解构赋值的作用是给一个对象或数组的元素赋值。在调用test()函数时，我们为参数设置了默认值3。如果我们不重新赋值，我们会打印出3,3，但是将props对象的参数解构并赋值给a和b后，我们会打印结果为{a:1,b:2}letprops={a:1,b:2}functiontest(value){console.log(value)}test({a=3,b=3}=props)//{a:1,b:2}下面的例子定义了两个变量a=3和b=3，现在我们要修改这两个变量的值。我们可以通过解构赋值来实现：定义一个props对象，该对象包含两个属性a和b，然后解构赋值，然后就可以更新变量a和b的值了。letprops={a:1,b:2},a=3,b=3;//解构赋值({a,b}=props)console.log(a,b)//1,2在react中父子组件之间传递参数的过程，也用到了解构赋值。reactdemo在线测试类ParentextendsReact.Component{render(){const{a=3,b=3}=this.propsreturn
{a}-{b}
}}ReactDOM.render(
,document.getElementById('root'));//在浏览器中渲染1-2，默认值为3-3，但是因为传入了新的props,a和b在执行解构分配后更新。嵌套对象解构当对象层次很深时，也可以解构它。letobj={a:{b:{c:5}}}const{a:{b}}=objconsole.log(b.c)//5数组解构数组解构比对象解构更简单，因为数组只有数组字面量,不需要像对象一样使用key属性。数组解构可以有选择地解构元素，用逗号代替不需要解构的元素。letarr=[1,2,3]//解构前2个元素const[a,b]=arrconsole.log(a,b)//12//解构中间元素const[,b,]=arrconsole.log(b)//2解构赋值如果你不明白上面说的对象解构赋值的含义，那么看完下面的数组解构赋值，你可能会有更清晰的理解。在这个例子中，正常情况下，打印a的值是haha，但是当数组arr的第一个元素被解构赋值给a时，a的值就变成了1//初始化一个变量aleta="haha";//定义一个数组letarr=[1,2,3];//解构并赋值a，将arr数组的第一个元素赋值给a,[a]=arr;console.log(a);//1使用解构赋值，也可以交换2个变量的值。让a=1,b=2;[a,b]=[b,a];console.log(a,b);//21嵌套数组解构letarr=[1,[2,3],4];let[a,[,b]]=arr;console.log(a,b)//13//中实际的解构过程，左边的变量和右边的数组元素下标一一对应。vara=arr[0],_arr$=arr[1],b=_arr$[1];不确定元素解构的三个点的解构赋值必须放在所有解构元素的末尾，否则会报错。letarr=[1,2,3,4];let[...a]=arr;console.log(a)//[1,2,3,4]这是克隆arr数组。混合解构混合解构是指将对象和数组混合在一起，毫无困难地执行解构操作。让obj={a:{id:1},b:[2,3]}const{a:{id},b:[...arr]}=obj;安慰。log(id,arr)//id=1,arr=[2,3]解构参数将参数传递给函数时，我们可以解构每个参数。我给option的参数设置了默认值，可以防止没有给option条件传递参数导致的报错。functionAjax(url,options){const{timeout=0,jsonp=true}=optionsconsole.log(url,timeout,jsonp)};Ajax('baidu.com',{timeout:1000,jsonp:false})//"baidu.com"1000false总结本章讲解对象解构赋值和数组解构赋值，以及对象和数组混合时的解构赋值操作。最后一个知识点是解构函数的参数。每一个都很重要，尤其是最后一个。解构参数恐怕你经常用到，但一般找不到。=>返回文章目录
