数组解构

  // let arr = [1,2,3];
        // let a = arr[0];
        // let b = arr[1];
        // let c = arr[2];
        // console.log(a,b,c);
        //数组解构
        //等号左边是右边的模板，必需长得一样
        // let [a, b, c] = [1, 2, 3];
        // console.log(a, b, c);
        // [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);

对象解构

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

参数解构

// 数组传参
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' }));

访问器属性的读写操作

// 对象成员: 属性, 方法
      // 属性: 类似于变量
      // 方法: 类似于函数
      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);

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

对象解构

参数解构

访问器属性的读写操作

更多相关文章

随机推荐