分享一种对象赋值的写法

wwwwwllllk

从简单到复杂，可以看下输出的结果和大家想的一样不

先看下为什么undefined报错 (为了防止该报错，我们再接收后台返回的数据的时候就会设置一个默认值(防止后端没有传字段，或者传的是null这种情况，前端报错))

接下来看下面的写法吧

const name = '李四'
const data = {
  name: "张三"
}

function caoZuo() {
  const {name} = data 
  let b = name
  console.log(b)   // 当name: "张三"  输出张三，  name: ""  输出为空
}
caoZuo()

第二种

const name = '李四'
const data = {
}

function caoZuo() {
  const {name} = data  
  let b = name
  console.log(b)  // 输出undefined
}
caoZuo()

// 为了防止出现undefined的情况我们这样写一下

const name = '李四'
const data = {
}

function caoZuo() {
  const {name=''} = data  
  let b = name
  console.log(b)  // 输出空
}
caoZuo()

第三种

const name = '李四'
const data = {
  name: '张三'
}

function caoZuo() {
  const {name: returnName} = data   // 这样写是把data中的name值赋值为returnName
  let b = name
  console.log(b)  // 输出的是李四  returnName为张三
}
caoZuo()

第四种

const name = '李四'
const data = {
}

function caoZuo() {
  const {name: returnName} = data   
  let b = name
  console.log(b,returnName)    // 这个时候b是李四，returnName为undefined
}
caoZuo()

//为了防止returnName出现undefined
const name = '李四'
const data = {
}

function caoZuo() {
  const {name: returnName=''} = data   
  let b = name
  console.log(b,returnName)    // 这个时候b是李四，returnName为空
}
caoZuo()

第五种(肯定有人好奇为什么要这样变量要赋值给另外一个变量)
工作场景：前端全局状态管理中会有一个name变量，然后后端的接口也会返回一个name（如果后端返回name,我就取它返回的name,如果没有返回我就拿全局状态的name）

const name = '李四'
const data = {
}

function caoZuo() {
  const {name: returnName} = data   
  let b = returnName || name
  console.log(b)    // 这个时候b是李四
}
caoZuo()

// 当data有值
const name = '李四'
const data = {
    name: "张三"
}

function caoZuo() {
  const {name: returnName} = data   
  let b = returnName || name
  console.log(b)    // 这个时候b是张三
}
caoZuo()

极品小猫

1. const name = '李四'
   
2. const data = {
   
3.     name: "张三"
   
4. }
   
5. 
   
6. function caoZuo() {
   
7.   const {name: returnName, b:c=123} = data   //returnName=data.name，caozuo里声明了一个c=123
   
8.   let b = returnName || name
   
9.   console.log(b)    // 这个时候b是张三
   
10. }
    
11. caoZuo()

复制代码

是这么理解吧？

脚本体验师001

weishen极品小猫 发表于 2022-12-1 10:04
是这么理解吧？

这个真奇妙
  const {name: returnName} = data  
似乎data就是一个变量池，你用哪种方式去取值，似乎不重要
楼主只说了方法，可这深层原理是什么呢？
似乎与习惯性写法不太一样

为什么会出现一个returnName，这个更难理解了

steven026

脚本体验师001 发表于 2022-12-1 13:31

这个真奇妙
const {name: returnName} = data

似乎data就是一个变量池，你用哪种方式去取值，似乎不重 ...

这是ES6特性解构

const data = {
    name: "张三"
}

data已经声明过了
此时再进行解构
const {name: returnName} = data
等价于
const returnName=data.name

脚本体验师001

steven026 发表于 2022-12-1 14:11
[md]这是ES6特性解构

```

哦，明白了，这些东西都没系统学习过。多谢指点

dannianya

虽然看不懂到我感觉很nb

cxxjackie

解构赋值吧，我还写过一个更奇葩的：https://scriptcat.org/script-show-page/532/code

1.         const {onload, onerror, onabort, ontimeout, _mode, ...options} = {
   
2.             method: 'get',
   
3.             responseType: 'text',
   
4.             _status: [200],
   
5.             _detail: false,
   
6.             _nocatch: false,
   
7.             ...defaultOptions,
   
8.             ...obj,
   
9.             url: desc
   
10.         };

复制代码

脚本体验师001

cxxjackie 发表于 2022-12-1 21:18
解构赋值吧，我还写过一个更奇葩的：https://scriptcat.org/script-show-page/532/code

咿呀，这咿呀，上来一套点点点组合拳，这不要任何加密小白看了都迷糊

极品小猫

steven026 发表于 2022-12-1 14:11

[md]这是ES6特性解构

 const {name: returnName, b:c=123} = data
我想不明白的是这个c变量可以读取，那这个对象里的b要怎么读取呢？
data并没有获得这个对象里的b

极品小猫

cxxjackie 发表于 2022-12-1 21:18
解构赋值吧，我还写过一个更奇葩的：https://scriptcat.org/script-show-page/532/code

太妙了，这样可以大大减少代码工程量