数据操作实例

发表于 |

一.数据解构

使用解构从数组和对象提取值并赋值给独特的变量
应用场景 接口返回大JSON时 能快速分割数据 简化及美化代码 它不香嘛

数组解构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[a, b, c] = [1, 2, 3]

=> a = 1
=> b = 2
=> c = 3

[a, ...b] = [1, 2, 3]

=> a = 1
=> b = [2, 3]

如果你想忽略某几位
[a,,,f] = [1,2,3,4,5,6]
=> a = 1
=> f = 4

对象解构

1
2
3
4
5
6
{a, b, c} = {a:1, b:2, c:3}
=> a = 1  b = 2 c = 3
------- 当你的参数 跟后台返回的Key值不一样时
({a: this.myKey} = {a:2})

=> this.myKey = 2

function解构

1
2
3
4
5
6
7
8
9
function abc ({aaa, bbb, ...ccc}) {
  console.log(aaa, bbb, ccc)
}
abc({aaa:2, bbb:3, ccc:4, ddd: 5})

=> aaa = 2
=> bbb = 3
=> ccc = {ccc: 4, ddd: 5}
=> arguments[0].length = 4

二.字符串模板

使字符串的拼接 更加简洁 美观
应用场景 拼接多个字段的字符串 或者分行 或在vue HTML中拼接字符串

1
2
3
var _name = '何鹏', _age = '18'
`我叫${_name}, 我今年${_age}岁了~`
=> "我叫何鹏, 我今年18岁了~"  PS(我觉得没啥毛病)

三.默认参数

当你在业务中发现 一套逻辑可以在多个场景使用 但可能存在个别差异 你可以复用方法 并将并不是所有不同的方法参数设默认值

1
2
3
4
5
6
7
function obj(_name = '何鹏', _age = '18') {
  console.log(`我叫${_name}, 我今年${_age}岁了~`)
}
obj()
=> "我叫何鹏, 我今年18岁了~"
obj('陆美味', '48')
=> "我叫陆美味, 我今年48岁了~"

四.延展操作符

数组之间合并 或者数据之间合并 可快速使用

1
2
3
4
5
6
7
8
9
var a = [1, 2], b = [3, 4]
var c = [...a, ...b]
a.push(...b)
=> c = [1, 2, 3, 4]
=> a = [1, 2, 3, 4]
当然 对象也可以延展
var d = {obj1: 2, obj2: 3}
var f = {obj3: 2, ...d}
=> f = {obj3: 2, obj1: 2, obj2: 3}

五.Promise await

在项目中 很常用的 接口回调，或依赖于异步数据执行的函数
其实很简单 按照正常写法执行即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Prom() {
  return new Promise(resolve => {
    setTimeout(()=> {
      resolve('我完成了')
    }, 3000)
  })
}
await Prom().then(res => {
  console.log(res)
  <!-- do soming -->
})
console.log('我等他完成')
<!-- do soming -->
=> Promise {<pending>}
=> 我完成了
=> 我等他完成

六.for in

当我们需要所有可以枚举的属性时 使用此方法 symbol不可以被枚举

1
2
3
4
5
6
7
8
9
10
11
let SYMBOL = Symbol()
var a = {obj: 1, obj2: 2, [Symbol(hhh)]: 3, [SYMBOL]: '前端小菜鸡'}
for (let key in a) {
  console.log(key, a[key])
}
=> obj 1
=> obj2 2
=> a[SYMBOL] = '前端小菜鸡'
=> a['hhh'] = undefined

Symbol 就不多做陈述了 毕竟在真是项目中 用的地方不多~