JavaScript中的数组,对象,传参解构,访问器属性

数组解构

  1. // let arr = [1,2,3];
  2. // let a = arr[0];
  3. // let b = arr[1];
  4. // let c = arr[2];
  5. // console.log(a,b,c);
  6. //数组解构
  7. //等号左边是右边的模板,必需长得一样
  8. // let [a, b, c] = [1, 2, 3];
  9. // console.log(a, b, c);
  10. // [a, b, c = 'js'] = [1, 2];
  11. // console.log(a, b, c);
  12. // [a, b, ...c] = [1, 2, 3, 4, 5, 6];
  13. // console.log(a, b, ...c);
  14. [, , , a, ,] = [1, 2, 3, 4, 5, 6];
  15. console.log(a);

对象解构

  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 });

参数解构

  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' }));

访问器属性的读写操作

  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. // 方法:
  13. //es6的方法的简化,将冒号和function可以删除
  14. getAmounts() {
  15. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  16. },
  17. // 访问器属性: 将一个方法伪装/包装成一个属性
  18. // get: 是读取,也叫读操作
  19. get total() {
  20. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  21. },
  22. // set: 访问器属性的写操作
  23. set setPrice(price) {
  24. this.data[1].price = price;
  25. },
  26. };
  27. console.log("总金额 = %d 元 ", product.getAmounts());
  28. // 不想用方法,想以属性的方式来获取总金额
  29. console.log("总金额 = %d 元 ", product.total);
  30. console.log(product.data[1].price);
  31. product.setPrice = 8000;
  32. console.log(product.data[1].price);