发布网友 发布时间:2022-04-22 10:27
共2个回答
懂视网 时间:2022-04-22 14:48
在ES6之前想要为变量赋值,只能指定其值,如下:
let a = 1; let b = 2
而在ES6中可以写成这样,如下:
let [a,b] = [1,2] // a = 1, b = 2
值得注意的是,等式两边的值要对等,这样左边的变量才会被赋上右边对应的值,如果不对等左边的值将会出现undefined,如下写法:
let [foo,[[bar],baz]] = [1,[[2],3]] foo // 1 bar // 2 baz // 3 注意:只有左右两边的 格式一定要对等,数量可以不对等。 let [a,b,c] = [1,2] a = 1, b = 2, c = undefined let [a,,c] = [1,2,3] a = 1, c = 3 let [a, ...b] = [1,2,3] a = 1, b = [2,3] let [a] = [] let [b,a] = [1] a = undefined
还有一种情况,等号左边为数组,但是等号右边为其他值,将会报错。如下:
let [a] = 1; let [a] = false; let [a] = NaN; let [a] = undefined; let [a] = null; let [a] = {}; 以上都会报错
但是如果左边为数组,右边为字符串,将会取字符串的第一个下标的值
let [a] = '121321' a = '1' let [a] = 'adgasg' a = 'a'
对于Set结构,同样可以使用数组的解构赋值。
let [x,y,z] = new Set([1,2,3]) x = 1, y = 2, z = 3
let [a = 3] = [] // a:3 let [a = 3,b] = [,4] // a:3 b:4 let [a = 3,b] = [5,4] // a:5 b:4特殊
let [a = 3] = [undefined] // a:3 let [a = 3] = [null] // a:null
Tips: 在es6中使用严格相等运算符,在结构赋值中如果需要默认值生效,则应对等的值为undefined的时候才会采用默认值,否则还是使用赋值。上面中null 不严格等于undefined++
如果默认值的赋值为一个表达式,只有当等号右边的赋值没有值为undefined的时候,才会取表达式中的值,如下:
function demo(){ console.log('demo') } let [a = demo()] = [] // a: demo let [a = demo()] = [1] // a : 1
let {a,b} = {a:'23',b:'3'} let {a,b} = {b:'3',a:'23'} // 上面两个的值 都是 a: 23 b: 3 let {a,b} = {a:'3',c:'d'} //a: 3 b: undefined
对象的解构赋值还有将某一个现有对象的方法赋值到一个新的变量,如下:
let {sin,cos} = Math // Math 中的sin cos 方法将赋值给变量 sin cos let {log} = console // log(2) === console.log(2)
如果等号左边的变量名不能和等号右边的对象的属性名一致,则必须写成如下格式:
let {a:b} = {a:'ss'} // b:ss //a是属性名,b才是实际赋值的变量名
对象的解构赋值一样是可以嵌套解构的,如下:
第一种: let obj = { p:[ 'Hello', {y:'world'} ] } let {p:[x,{y}]} = obj // x: Hello, y: world 这边的p只是属性不是变量,如果p想赋值可以写成: let {p,:[x,{y}]} = obj 第二种: const a = { loc: { t :1, b :{ c:1, d:2 } } } let {loc:{t,b:{c,d}}} = a 或者 let {loc,loc:{t,b,b:{c,d}}} = a
let o = {}, arr = [] ({foo:o.prop,bar: arr[0]} = {foo:123,bar:true}) //o: 123, arr = [true]
如果解构模式 是嵌套的对象,如果子对象所在的父属性不存在,则会报错,如下:
let {foo:{bar}} = {baz:'baz'} //报错
let {x = 3} = {} // x: 3 let {x,y = 5} = {x : 1} // x: 1, y: 5 let {x: y = 5} = {} // y = 5 let {x: y = 5} = {x : 4} // y = 4 let {x: y = 'hhhh'} = {} //y = 'hhhh' Tips:以上左边 x为属性名,y为变量 let {x = 5} = {x: undefined} // x: 5 let {x = 4} = {x: null} // x: null 同数组一样遵循 严格等于 只有右边为undefined的时候默认值才会生效
注意点:
1)不能将已声明的变量用于解构赋值,因为已经是一个代码块。
let [a,b] = 'ha' // a = h , b = a 同时可以获得字符串的长度: let {length:len} = '12121' // len = 5
let {t:s} = 123 let {t: s} = true
function add([x,y]){ return x+y } add([3,5]) // 8 [[3,5],[6,7]].map(([a,b]) => a + b) //8 , 13 function m({x=3, y=4} = {}){ return [x,y] } m({x:33,y:8}) // [33,8] m({x:32}) // [32,4] m({}) // [3,4] m() // [3,4] function m({x,y} = {x=0,y=0}){ return [x,y] } m({x:33,y:8}) // [33,8] // 代替右边的 x:0, y:0 所以是传值 33 8 m({x:32}) // [32,undefined] //因为传值替代右边的赋值,但是只有x没有y //所以y是取 左边y的默认值,因为你没有赋值 为undefined m({}) // [undefined,undefined] // 取左边x,y的默认值,因为没有赋值 为undefined m() // [0,0] // 没有传值,使用本身的赋值 都是0
热心网友 时间:2022-04-22 11:56
我的理解是:{x = 0, y = 0} = {}是es6(ECMAscript2015)新增加的变量的解构赋值,因为右边是空的{},所以x和y会取到默认值0,具体是什么意思你可以自己去学习一下,一两句话说不清,推荐阮一峰的ES6入门教程。我这边用chrome调试的话,不传参数没有报错,返回[0,0],你可以试试用较高版本的chrome调试一下看看。追问大佬 我的意思是追答“{x=0,y=0}={}”是一个完整的解构赋值语句,而“{x=0,y=0}”不是。我是看不懂像你说的function move({x = 0, y = 0}) {return [x, y];}这种写法的意义何在,当然无意义也并不意味着会报错,从报错的信息来看,我们可以逆向推倒,我是这么理解的:在函数声明的时候,js解析器还是会把“{x=0,y=0}”理解成一个结构赋值的语句,而在函数调用阶段,发现这个结构赋值语句是不完整的(没有等号和一个可被遍历的对象),所以报错了。