博客列表 >对象与数组的解构赋值以及访问器属性与普通属性的区别与联

对象与数组的解构赋值以及访问器属性与普通属性的区别与联

手机用户1594223549
手机用户1594223549原创
2022年11月07日 00:04:04312浏览

一.对象与数组的解构赋值

1.输出结果

2.代码部分

  1. // ! 对象与数组的解构赋值
  2. // 结构语法
  3. // * 模板 = 集合(数组,对象)
  4. // ? 1.数组结构
  5. let [nname, wage] = ['张三', '15000']
  6. console.log(nname, wage)
  7. // 更新
  8. // 在 [],{},()之前的分号不能省略
  9. ;[nname, wage] = ['李四', '20000']
  10. console.log(nname, wage)
  11. console.log('---------------')
  12. // 1. 值数量 < 变量数量, 默认值
  13. ;[mname, wage, gender = '男'] = ['王五', '15000']
  14. console.log(nname, wage, gender)
  15. // 2. 值数量 > 变量数量, ...rest
  16. ;[nname, ...arr] = ['马六', '20000', '男']
  17. console.log(nname, arr)
  18. console.log(nname, ...arr)
  19. console.log('--------------')
  20. // ? 1.对象结构
  21. // 变量名 === 属性名
  22. // 左边是模版,右边是对象
  23. let { age1, wage1 } = { age1: 24, wage1: 9000}
  24. console.log(age1, wage1)
  25. // [],{},()之前分号不能省略
  26. // 命名冲突: 别名
  27. // {}不能出现在等号左边(左值),所以加上括号()转成表达式
  28. ;({ age2, wage2 } = { age2: 30, wage2: 10000 })
  29. console.log(age2, wage2)
  30. console.log('-----------------')
  31. // ! (1) 结构传参
  32. let open = function (id) {
  33. // id 是一个对象
  34. // 格式化打印传参数
  35. return `${id.nname}: ( ${id.wage3} )`
  36. }
  37. let id = {nname: '王强', wage3: 5000}
  38. // 调用
  39. console.log(open(id))
  40. // * 使用对象解构进行简化传参
  41. open = function ({ nname, wage3 }) {
  42. // user 是一个对象
  43. return `${nname}: ( ${wage3} )`
  44. }
  45. id = { nname: '黄六', wage3: 30000 }
  46. console.log(open(id))

二.访问器属性,和普通属性之间的区别与联系

1.输出结果

2.代码部分

  1. // ! 访问器属性,和普通属性之间的区别与联系
  2. // ? 使用"访问器属性"
  3. wage = {
  4. line: {
  5. name: 'darren',
  6. money: 10000,
  7. },
  8. money: 20000,
  9. // getMoney===> get money
  10. // 普通方法 ===> 访问器属性
  11. // 如果使用访问器属性, get必须要有, set 可选
  12. get money () {
  13. return {
  14. name: this.line.name,
  15. money: this.line.money,
  16. }
  17. },
  18. // 将一个方法,伪装成"属性"
  19. set money(money) {
  20. if (money >= 3000 && money <= 30000) {
  21. // 把外部的数据读取过来
  22. this.line.money = money
  23. } else {
  24. console.log('工资必须在3000-10000之间')
  25. }
  26. },
  27. }
  28. // 经过包装和伪造, 现在就可以像访问属性一个访问一个方法了
  29. // wage.money === wage.get money()
  30. console.log(wage.money)
  31. wage.money = 2000
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议