ES6-03-解构赋值

解构赋值:

        语法:变量修饰符  数据模型=数据源

        步骤:解析数据源 然后按照数据模型进行取值  再赋值给变量

        意义:声明变量的高级写法

        解构 :按照数据模型取出数据源中的数据

        赋值:然后赋值给模型变量

<script>
        let obj={a:100,b:"hello",c:[10,203,0]}
		let {a,b,c}=obj
		// 隐式操作: let a=obj.a; let b=obj.b; let c=obj.c
		console.log(a)
		console.log(b)
		console.log(c)
</script>

按照解构赋值的步骤来看:先解析数据源,再在数据源里找是否有数据模型中的变量,如果有就赋值,如果没有就是undefined。 

<script>
        // 例一:
        //  var [a,b,c]=arr1;
		//隐式操作: var a=arr[0]; var b=arr[1]; var c=arr[2]
        // 如果没有数据源会报错

        // 例二:
        // var [name,{age}]=arr2;
		//隐式操作: var name=arr[0]  var age=arr[1].age
        // 如果没有数据源会报错

        // 例三:想要count第一次打印10,第二次打印2000
        function useState(num){
	    	function fn(arg){
			//去让外界的count变量改变为arg 暂时用代码实现不了(技术有所欠缺)
			}
			return [num,fn]
		}
	    var [count,setCount]=useState(10)
		// var count=[][0]
		// var setCount=[][1]
		// console.log(count,setCount)
	    console.log(count)//10
		setCount(2000)
		console.log(count)//2000
</script>

<script>
        // 例四:
        var arr=[{age:30}]
		function fn () {
			let arr[0].age=90;//错误  let形成暂时性死区,arr没有定义
			let [{age}]=80;//
		}
</script>
<script>
        // 例五:
        let obj={age:20}
	    let {age,name1}=obj
		console.log(age,name1)//20 undefined
</script>

分析:根据解构的步骤,在数据源中找不到name1,所以name1就是未定义。

<script>
        // 例六:
        let arr1=[{age1:20},{name1:"karen"}]
		let [{age1,name1}]=arr1
		//var name1=arr[0].name1
		console.log(age1,name1)//20 undefined

        //例七:
        let arr2=[{age2:20},{name2:"karen"}]
		let [{age2,name2="jack"}]=arr2
		//var name1=arr[0].name1
		console.log(age2,name2)//20 jack
</script>

分析:例六的解构赋值是arr1[0]中取值,而arr1[0]={age1:20},里面只有age1属性,没有name1属性。例七是相当于直接给name2赋值。

<script>
        // 例九:
        let obj={a:undefined}
		let {a=10}=obj
		//隐式操作:let a=10;  a=obj.a; 
		console.log(a)//10
</script>

分析:按照隐式操作来说应该是undefined,但是这里可以根据就近原则或者权重来看a的值最后为10。

<script>
        // 例十:这是一个多重嵌套,要看明白 
        // (此处没有写数据源,会报错,只是举个例子)
        let [{age,its:[a,{b}]}]=data
		// 隐式操作:let its=data[0].its
		// let a=its[0]
		// let b=its[1].b
		console.log(its)
</script>

注意解构赋值要写数据源,不然会报错。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值