let的解构赋值_ES6 解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量，MDN关于解构赋值的链接如下

解构赋值​developer.mozilla.org

1.简单的结构

1-1.不用解构赋值的方法的代码

let config={
  method:'m',
  url:'u',
  data:'d'
}

 let method=config.method
 let url=config.url
 let data=config.data
 
 console.log(method,url,data)

输入的结果是

1-2.使用解构赋值的方法的代码

let config={
  method:'m',
  url:'u',
  data:'d'
}

//  let method=config.method
//  let url=config.url
//  let data=config.data
  let {method,url,data}=config
 console.log(method,url,data)

输出的结果还是跟前面的一样

稍微注意点就是let method=config.method，前面的method必须要和后面的method一样。如果修改为method1，就不一样，这样就不符合解构赋值的方法，就产生错误

2.作为函数实参

2-1.不用解构赋值的方法的代码

let config={
  method:'m',
  url:'u',
  data:'d'
}

 function fn(x){
   console.log(x)
 }
fn({method:'m',url:'u',data:'d'})

输出结果

2-2.使用解构赋值的方法的代码

let config={
  method:'m',
  url:'u',
  data:'d'
}

//  let method=config.method
//  let url=config.url
//  let data=config.data
  let {method,url,data}=config
//  console.log(method,url,data)
 
 function fn(x){
   console.log(x)
 }
fn({method,url,data})
// fn({method:'m',url:'u',data:'d'})

输出结果一样

3.对象里面还有对象

3-1.不用解构赋值的方法的代码

let response={
  config:{
  method:'m',
  url:'u',
  data:'d'
 }
}

let config=response.config
let method=config.method
let url=config.url
let data=config.data

console.log(method,url,data)

输出的结果

3-2.使用解构赋值的方法的代码

let response={
  config:{
  method:'m',
  url:'u',
  data:'d'
 }
}

// let config=response.config
// let method=config.method
// let url=config.url
// let data=config.data
// let {method,url,data}=config
// let {config}=response
let {config:{method,url,data}}=response//这个是没有声明config

console.log(method,url,data)//这里不能输出config，但是可以输出method或url或data

输出的结果一样

需要注意一点，因为这里是没有声明config，所以这里打印config会报错

本文为本人的原创文章，著作权归本人所有，转载务必注明来源