Sikara

js解构赋值

63 js解构赋值

解构赋值的顺序

let p ={
    name:'sikara',
    age:22,
  }
  //对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
  //左:右  左边是对象的同名属性  右是别名，也是最终赋值对象
  // 简写就默认赋值为左边的同名属性
  // let {age:age,name} = p
  // let {age:age,hobby,name:name1} = p
  // console.log(name1,hobby,age)

  //数组的结构赋值：与顺序有关
  let [a,y,b] = [1,2,3]
  console.log(a,b,y)//1 3 2

对象的解构赋值的 默认值

//对象的解构赋值的 默认值
  //默认值想生效的话 对象与之对应的属性值一定是undefined的
  let p2 ={
    name:'sikara',
    age:22,
    test:null
  }
  let {age:age,hobby,name:name1,test = 'sdfs'} = p2
  console.log(name1,hobby,age,test)//test:null

  let {x:z=5} = {}
  console.log(z)//5

  let {x:zz=5} = {x:8}
  console.log(zz)//8

补充：js程序执行过程

  1. 通篇扫描一下错误
  2. 预编译
  3. 解释执行逐行执行
  4. 单线程

注意点

 // 如果你要将一个已经声明的变量用于解构赋值你一定要小心了
  let si;
  ({si} = {si:1})//要加() 否则{}内会看成js表达式
  console.log(si)

  //数组的本质是对象    对数组进行对象属性的解构    
  //[]相当于是访问对象里的属性
    let arr = [4,5,6,7,98]
  let {0:fir,[3]:sss,[arr.length - 1]:last} = arr
  console.log(fir,sss,last)

嵌套对象结构赋值

//嵌套对象结构赋值
  let p3 = {
      single:{
          double:{
              name:'sssasd',
              age:26
          }
      }
  }
  //每个{左:右}可以理解成左边取值，右边赋值
  let {single,single:{double:another}} = p3
  console.log(single,another)

解构赋值应用

//实现值互换
let x1 = 1;
let y1 = 2;
([x1,y1] = [y1,x1])
console.log(x1,y1)

//函数返回值去提取对象里的属性
function exam() {
    // return [1,2,3]
    return {
        x1,y1
    }
}
// let [q,w,e] = exam()
let {x1:aa,y1:bb} = exam()
console.log(aa,bb);

Sikara

© 2025 Sikara