1103 实例演示对象与数组的解构赋值 2. 实例演示访问器属性,并描述与普通属性之间的区别与联系

对象与数组的解构赋值

// ! 1. 数组
let [uname, email] = ['杨过', '123@qq.com']
console.log(uname, email)
// 更新
// 在 [],{},()之前的分号不能省略
;[uname, email] = ['小龙女', '1456@qq.com']
console.log(uname, email)
console.log('--------------')
// 1. 值数量 < 变量数量, 默认值
;[uname, email, gender = '女'] = ['潘金莲', '789@qq.com']
console.log(uname, email, gender)
// 2. 值数量 > 变量数量, ...rest
;[uname, ...arr] = ['潘金莲', '789@qq.com', '女']
console.log(uname, arr)
console.log(uname, ...arr)
console.log('--------------')
//? 应用场景: 交接二个数
let x = 10
let y = 20
console.log(`x = ${x}, y = ${y}`)
;[y, x] = [x, y]
console.log(`x = ${x}, y = ${y}`)
console.log('=================')
// ! 2. 对象解构
// ? 变量名 === 属性名
let { num, price } = { num: 2, price: 5000 }
console.log(num, price)
// [],{},()之前分号不能省略
// {}不能出现在等号左边(左值),所以加上括号()转成表达式
;({ num, price } = { num: 5, price: 6000 })
console.log(num, price)
// 命名冲突: 别名
let { pname, price: uniPrice } = { pname: '手机', price: 8000 }
// 访问用别名
console.log(pname, uniPrice)
console.log('-----------------')

访问器属性,并描述与普通属性之间的区别与联系

let course = {
  lesson: {
    name: 'ES6',
    score: 60,
  },
  // 读取接口
  getScore() {
    return {
      name: this.lesson.name,
      course: this.lesson.score,
    }
  },
  // 设置接口
  setScore(score) {
    if (score >= 0 && score <= 100) {
      this.lesson.score = score
    } else {
      console.log('成绩必须在1-100分之间')
    }
  },
}
console.log(course.lesson.score)
console.log(course.getScore())
course.setScore(69)
console.log(course.getScore())
console.log('-------------------')
// ? 用户习惯
// console.log(course.score);
// course.score = 90
// ? 使用"访问器属性" 就可以实现
course = {
  lesson: {
    name: 'ES6',
    score: 60,
  },
  score: 99,
  // getScore ===> get score
  // 普通方法 ===> 访问器属性
  // 如果使用访问器属性, get必须要有, set 可选
  get score() {
    return {
      name: this.lesson.name,
      course: this.lesson.score,
    }
  },
  // 将一个方法,伪装成"属性"
  set score(score) {
    if (score >= 0 && score <= 100) {
      this.lesson.score = score
    } else {
      console.log('成绩必须在1-100分之间')
    }
  },
}
// 经过包装和伪造, 现在就可以像访问属性一个访问一个方法了
// course.score === course.get score()
console.log(course.score)
course.score = 50
console.log(course.score)
// ! 访问器属性 > 同名属性