js 中的数组,对象,传参解构;访问器属性get,set操作 ---- 0401

1. 实例演示数组,对象,传参解构;

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

1. 数组解构

  1. // 变量声明并赋值时的解构
  2. let foo = ['one', 'two', 'three'];
  3. let [one, two, three] = foo;
  4. console.log(one, two, three);
  5. // 变量先声明后赋值时的解构,通过解构分离变量的声明,可以为一个变量赋值。
  6. let a, b;
  7. [a, b] = [1, 2, 3];
  8. console.log(a, b);
  9. // 为了防止从数组中取出一个值为undefined的对象,可以在表达式左边的数组中为任意对象预设默认值。
  10. [a, b, c = 'js'] = [1, 2];
  11. console.log(a, b, c);
  12. // 当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。
  13. [a, b, ...c] = [1, 2, 3, 4, 5, 6];
  14. console.log(a, b, ...c);
  15. // 使用"," ,忽略某些返回值
  16. [, , , a, ,] = [1, 2, 3, 4, 5, 6];
  17. console.log(a);

2. 对象解构

  1. // 基本赋值
  2. let item = { id: 10, name: '手机' };
  3. let { id, name } = item;
  4. // 无声明赋值
  5. // 注意:赋值语句周围的圆括号 ( ... ) 在使用对象字面量无声明解构赋值时是必须的。
  6. var a, b;
  7. ({ a, b } = { a: 1, b: 2 });

3. 参数解构

  1. // 数组传参
  2. let sum = ([a, b]) => a + b;
  3. console.log(sum([30, 50]));
  4. // 对象传参
  5. let getUser = ({ name, email }) => [name, email];
  6. console.log(getUser({ name: '朱老师', email: 'admin@php.cn' }));

2. 实例演示访问器属性的 get,set 操作

  • 访问属性:将一个方法伪装/包装成一个属性
  • get: 是读取,也叫读操作
  • set: 访问器属性的写操作
  1. // 对象成员: 属性, 方法
  2. // 属性: 类似于变量
  3. // 方法: 类似于函数
  4. const product = {
  5. // 属性
  6. data: [
  7. { id: 1, name: '电脑', price: 5000, num: 5 },
  8. { id: 2, name: '手机', price: 4000, num: 15 },
  9. { id: 3, name: '相机', price: 1400, num: 10 },
  10. ],
  11. // 计算总金额
  12. // 方法: es6的方法的简化,将冒号和function可以删除
  13. getAmounts() {
  14. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  15. },
  16. // 访问器属性: 将一个方法伪装/包装成一个属性
  17. // get: 是读取,也叫读操作
  18. get total() {
  19. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  20. },
  21. // set: 访问器属性的写操作
  22. set setPrice(price) {
  23. this.data[1].price = price;
  24. },
  25. };
  26. console.log('总金额 = %d 元 ', product.getAmounts());
  27. // 不想用方法,想以属性的方式来获取总金额
  28. console.log('总金额 = %d 元 ', product.total);
  29. console.log(product.data[1].price);
  30. product.setPrice = 8000;
  31. console.log(product.data[1].price);