博客列表 >JavaScript:实例ES6演示数组,对象,传参解构; 实例演示访问器属性的get,set操作

JavaScript:实例ES6演示数组,对象,传参解构; 实例演示访问器属性的get,set操作

JiaJieChen
JiaJieChen原创
2021年04月06日 13:33:55735浏览

实例演示数组,对象,传参解构; 实例演示访问器属性的get,set操作

1.数组解构

①基本数组解构方式

②ES6数组解构方式

大家可以看到ES6的数组解构方式变得很简洁,没有之前版本的解构反思那么多行代码,新ES6解构添加了两个[][]方括号,等号左右边[][]里面的内容数量必须一致。

2.对象解构

①基本对象解构方式

②ES6对象解构方式

大家可以看到,ES6对象解构方式和数组解构方式差不多类似,但是再等号的左边{}一定要用()包住否则会报错,全部用()也可以的。

3.参数解构

①数组参数解构

②对象参数解构

大家可以看到,再入参的时候填写的参值是等号右边的内容,而再创建素组或者对象的时候等于是等号左边的内容。这样记忆就非常的清楚了。

代码块

  1. <script>
  2. // 数组解构
  3. // 基本数组解构方式
  4. // let arr = [(name = "姓名"), (age = "年龄"), (gender = "性别")];
  5. // a = arr[0];
  6. // b = arr[1];
  7. // c = arr[2];
  8. // console.table(a, b, c);
  9. // 新版es6 数组解构方式 等号左右边[][]里面的内容数量必须一致
  10. // let [a, b, c] = [(name = "姓名"), (age = "年龄"), (gender = "性别")];
  11. // console.log(a, b, c);
  12. // 对象解构
  13. //基本对象解构方式
  14. // let obj = { money: 5888, name: "电脑" };
  15. // let money = obj.money;
  16. // let name = obj.name;
  17. // console.log(money, name);
  18. // 新版es6 对象解构方式 再左边的=好{}外一定要加上()否则会报错,或者全部用括号包住也行。
  19. // ({ money, name } = { money: 9999, name: "苹果电脑" });
  20. // console.log(money, name);
  21. //参数解构
  22. // 数组参数解构
  23. // let arr = ([a, b, c]) => (a + b) * c;
  24. // 再[]里入参数
  25. // console.log(arr([5, 5, 10]));
  26. let obj = ({ money, name }) => [money, name];
  27. console.log(obj({ money: 4999, name: "手机" }));
  28. </script>

4.访问器属性的get,set操作

属性 含义
get 访问器属性的读取,也叫读操作
set 访问器属性的写,也叫操作

①get访问器

②set访问器

大家可以看到,get访问器可以写方法访问变量对象数组里面的值,也可以求和,set访问器可以修改变量对象数组里面的值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>访问器属性</title>
  8. </head>
  9. <body>
  10. <script>
  11. const hobby = {
  12. // 对象成员:属性
  13. data: [
  14. { id: 1, name: "旅游", money: 10000 },
  15. { id: 2, name: "玩游戏", money: 5000 },
  16. { id: 3, name: "零食", money: 2000 },
  17. ],
  18. // 对象成员:方法
  19. // get:读取访问器
  20. get total() {
  21. return this.data.reduce((t, c) => (t += c.money), 0);
  22. },
  23. // set:写访问器
  24. set setHobby(money) {
  25. this.data[2].money = money;
  26. },
  27. };
  28. console.log("总金额 = %d 元 ", hobby.total);
  29. hobby.setHobby = 1000;
  30. console.log(hobby.data[2].money);
  31. </script>
  32. </body>
  33. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议