[es6学习笔记]解构

xiaoxiao2021-02-28  36

解构功能日常经常用到:     es5读取变量方式: let option = {     name:'cc',     isCheck:false }; let name=option.name; let check=option.check;     es6解构函数方法: let option = {     name:'cc',     isCheck:false }; let {name,isCheck} = option; 解构函数的使用一定要先赋值初始化。不然会报错。 解构赋值: 同样也可以用解构函数对对象赋值:   let option = {     name:'cc',     isCheck:false, }, name="22", isCheck=true ; //添加小括号让赋值语句转化为一个表达式语句 ({name,isCheck}=option); console.info(name);//cc  原对象里不存在的对象会是一个undefined 为非同名变量赋值: 注意: 须赋值变量 写在最后 let option = {     name:'cc',     isCheck:false }; let {name:peopleName, isCheck:peopleCheck} = option; //直 接前面对象语法就行 和 对象简写类似 也可以添加默认值: let option = {     name:'cc' } ; let {name:peopleName,isCheck:peopleCheck= false} = option; console.info(peopleName); 嵌套对象解构: 嵌套对象自然也可以这样 语法如下:     let option = {    writes:{     see:'see',     sing:'sing' } ,    name:'cc' }; let {writes:{see}} = option; console.info(see);//see console.info(writes);//error 若想取得write的值可以在 定义变量时再次书写 let {writes:{see},writes} = option; 数组解构: 对应顺序就行 let colors=['red','blue','green']; let [one,two]=colors; console.info(one,two);//red blue 也可以只要自己需要的值 let colors=['red','blue','green']; let [ , , three]=colors; console.info(three);//green 数组的结构 也是必须要初始化的操作 解构赋值 : 同样可以作用于上下文 且不用用()包裹 let colors=['red','blue','green'], one, two; let [one,two]=colors; console.info(one,two);//red blue 默认值:      不存在的默认 为undefined       有默认值的为默认值,语法如下     let node = {     type:'see',     name:'aaa' }; let [type,name='cc',isCode=false] = node; console.info(isCode);//false 解构赋值用于交换变量; let a=1,b=2; [a,b]= [b,a] ; 默认值 与 对象语法相同 嵌套也一样 不定元素: let colors=['red','blue','green']; let [red,...otherColor] = colors; console.info(otherColor);//[ 'blue', 'green' ] 克隆数组 : es5: let colors=['red','blue','green']; let colors2=colors.concat(); console.info(colors2);//[ 'red', 'blue', 'green' ] es6: let colors=['red','blue','green']; let colors2=colors.concat(); console.info(...colors2);//[ 'red', 'blue', 'green' ] 混合解构: 数组和对象的结构可以混合进行 解构参数: 可以这样传递形参 function (name,{ isCheck, change }){ }; 解构的参数为必须参数 不传递会报错同样 解构参数能设置默认值 function printTest(name,{ isCheck=false, change }){ console.info(arguments);//{ '0': 'aaa', '1': { change: 'ccc' } } }; printTest('aaa',{change:'ccc'});
转载请注明原文地址: https://www.6miu.com/read-2628516.html

最新回复(0)