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

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

PHui
PHui原创
2022年11月07日 18:42:49292浏览

对象与数组的解构赋值

  1. console.log("-------1.数组-------");
  2. let [uname, salary] = ["libai", "15000"];
  3. console.log(uname, salary);
  4. [uname, salary] = ["luxun", "15500"];
  5. console.log(uname, salary);
  6. console.log("-------1.值数量 < 变量数量,默认值-------");
  7. [uname, salary, gender = "man"] = ["sushi", "33000"];
  8. console.log(uname, salary, gender);
  9. console.log("-------2.值数量 > 变量数量,...rest------");
  10. [uname, ...arr] = ["zhuxun", "36000", "man"];
  11. console.log(uname, arr);
  12. console.log(uname, ...arr);
  13. console.log("-------应用场景:交换二个数-------");
  14. let x = 10;
  15. let y = 5;
  16. console.log(`x = ${x}, y = ${y}`);
  17. [y, x] = [x, y];
  18. console.log(`x = ${x}, y = ${y}`);
  19. console.log("-------2.对象-------");
  20. // ? 变量名 === 属性名
  21. let { num, price } = { num: 1, price: 5000 };
  22. console.log(num, price);
  23. // {}不能出现在等号左边(左值),所以加上括号()转成表达式
  24. ({ num, price } = { num: 2, price: 6000 });
  25. console.log(num, price);
  26. // 命名冲突: 别名
  27. ({ num, price: uprice } = { num: 3, price: 7000 });
  28. console.log(num, uprice);
  29. console.log("--------// 应用场景1: 克隆对象---------");
  30. let study = { name: "libai", score: 60 };
  31. console.log(study);
  32. // 如果想创建二个不相关的对象,值又完全一样,只能克隆
  33. let { ...obj } = study;
  34. console.log(obj);
  35. console.log(obj === study);
  36. console.log("--------// 应用场景2 : 解构传参---------");
  37. let show = function (user) {
  38. return `${user.num}: ( ${user.price} )`;
  39. };
  40. let user = { num: 3, price: 6000 };
  41. console.log(show(user));
  42. // * 使用对象解构进行简化传参
  43. show = function ({ num, price }) {
  44. return `${num}: ( ${price} )`;
  45. };
  46. user = { num: "5", price: "7000" };
  47. console.log(show(user));

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

  1. let course = {
  2. lesson: {
  3. name: "math",
  4. score: 60,
  5. },
  6. getScore() {
  7. return {
  8. name: this.lesson.name,
  9. course: this.lesson.score,
  10. };
  11. },
  12. setScore(score) {
  13. if (score >= 0 && score <= 100) {
  14. this.lesson.score = score;
  15. } else {
  16. console.log("成绩必须在0-100分之间");
  17. }
  18. },
  19. };
  20. console.log(course.lesson.score);
  21. console.log(course.getScore());
  22. course.setScore(70);
  23. console.log(course.getScore());
  24. console.log('-------使用"访问器属性" 就可以实现-------');
  25. course = {
  26. lesson: {
  27. name: "chinese",
  28. score: 80,
  29. },
  30. score: 85,
  31. // getScore ===> get score
  32. // 普通方法 ===> 访问器属性
  33. // 如果使用访问器属性, get必须要有, set 可选
  34. get score() {
  35. return {
  36. name: this.lesson.name,
  37. course: this.lesson.score,
  38. };
  39. },
  40. set score(score) {
  41. if (score >= 0 && score <= 100) {
  42. this.lesson.score = score;
  43. } else {
  44. console.log("成绩必须在0-100分之间");
  45. }
  46. },
  47. };
  48. console.log(course.score);
  49. course.score = 50;
  50. console.log(course.score);

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议