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

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

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

1. 数组解构

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

2. 对象解构

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

3. 参数解构

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

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

• 访问属性：将一个方法伪装/包装成一个属性
• get: 是读取,也叫读操作
• set: 访问器属性的写操作

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