论坛 › 网页开发 › 分享一种对象赋值的写法

wwwwwllllk 发表于 2022-11-30 23:11:53

分享一种对象赋值的写法

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

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


接下来看下面的写法吧
```
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()

```

极品小猫 发表于 2022-12-1 10:04:36

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

function caoZuo() {
const {name: returnName, b:c=123} = data   //returnName=data.name，caozuo里声明了一个c=123
let b = returnName || name
console.log(b)    // 这个时候b是张三
}
caoZuo()

是这么理解吧？

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

本帖最后由 脚本体验师001 于 2022-12-1 13:56 编辑

weishen极品小猫 发表于 2022-12-1 10:04
是这么理解吧？
这个真奇妙
const {name: returnName} = data
似乎data就是一个变量池，你用哪种方式去取值，似乎不重要
楼主只说了方法，可这深层原理是什么呢？
似乎与习惯性写法不太一样

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

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

脚本体验师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 发表于 2022-12-1 14:44:10

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

```


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

dannianya 发表于 2022-12-1 20:42:12

虽然看不懂到我感觉很nb{:4_92:}

cxxjackie 发表于 2022-12-1 21:18:38

解构赋值吧，我还写过一个更奇葩的：https://scriptcat.org/script-show-page/532/code
      const {onload, onerror, onabort, ontimeout, _mode, ...options} = {
            method: 'get',
            responseType: 'text',
            _status: ,
            _detail: false,
            _nocatch: false,
            ...defaultOptions,
            ...obj,
            url: desc
      };

脚本体验师001 发表于 2022-12-1 21:55:19

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

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

极品小猫 发表于 2022-12-1 22:52:03

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

```


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

极品小猫 发表于 2022-12-1 22:53:58

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

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

查看完整版本: 分享一种对象赋值的写法