对象与数组的解构赋值，访问器属性

1103 作业

解构赋值

// ?解构赋值
let arr = [10,200]
let a = arr[0]
let b = arr[1]
console.log(a,b)
console.log('------------')
// * 一，解构语法,数组解构
// ! 模板 = 集合 （数组，对象）
let [uname,email] = ['张三','123456qq.com'];
console.log(uname,email)
// ! 更新 在[],{},()前面的分号不能省略
; [uname,email] = ['李四','56qq.com'];
console.log(uname,email);
console.log('------------');
// ? 1.值的数量<变量数量，传递默认值解决
[uname,email,gender='女'] = ['王五','aasasdqq.com'];
console.log(uname,email,gender);
console.log('------------');
// ? 2.值的数量>变量数量，...rest解决
[uname,...arr] = ['赵六','aasasdqq.com','男'];
// ? 会压缩到数组里面
console.log(uname,arr);
// ? 展开数组打印
console.log(uname,...arr);
console.log('------------');
// ? 应用场景：交换2个数
let x = 10;
let y = 20;
console.log(`x = ${x} , y = ${y}`);
 [y , x] = [x , y]
console.log(`x = ${x} , y = ${y}`)
console.log('------------');
// * 二，解构语法,对象解构
// ? 变量名 === 属性名
let {num , price} = {num:4 , price: 200}
console.log(num , price);
// ? 更新,{}不能出现在左边为左值，所以加上()转为表达式
({num , price} = {num:10 , price: 200})
console.log(num , price);
console.log('------------');
// ? 命名冲突：别名，解决
let {pnum , price:uniPrice} = {pnum:'手机' , price: 2000}
// ? 访问别名
console.log(pnum , uniPrice);
console.log('------------');
// ? 应用场景：克隆对象
let lesson = { name: 'ES6', score: 88 }
console.log(lesson)
// 如果想创建二个不相关的对象,值又完全一样,只能克隆
let { ...obj } = lesson
console.log(obj)
console.log(obj != lesson)
console.log('-----------------')
// ? 应用场景2 : 解构传参
let show = function (user) {
    // user 是一个对象
    return `姓名：${user.uname} , 邮箱：${user.email}`
  }
  let user = { uname: '王五', email: 'dddfdfdf@qq.com' }
  console.log(show(user))
  // * 使用对象解构进行简化传参
show = function ({ uname, email }) {
    // user 是一个对象
    return `姓名：${uname} , 邮箱：${email}`
  }
  user = { uname: '小米', email: '45678@qq.com' }
  console.log(show(user))

效果展示

访问器属性

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(50)
  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)
  // ! 访问器属性 > 同名属性

效果展示