对象字面量增强

对象字面量是什么 ？

对象字面量就是对象的一种写法，对象一般有两种写法

通过实例化构造函数来生成对象

// 实例化构造函数生成对象
const student = new Object();
student.username = "清心";
student.age = 18;
student.code = function () {};

对象字面量方式创建对象

// 对象字面量
const student = {
  username: "清心",
  age: 18,
  code: function () {},
};

属性的简洁表示法 - 增强

当对象属性的键名和变量或常量名一样的时候，可以只写一个

let username = "清心";
let age = 18;
const obj = {
  username: username,
  age: age,
};
console.log(obj); // {username: '清心', age: 18}

// 以下简写形式，当属性名和变量名相同时，可以只写一个
const obj = {
  username, // 相当于 username: username
  age, // 相当于  age: age
};
console.log(obj); // {username: '清心', age: 18}

这种简写用于函数的返回值会非常方便

function getCurrentDate() {
  var nowDate = new Date();
  var year = nowDate.getFullYear();
  var month = nowDate.getMonth() + 1;
  var date = nowDate.getDate();

  return { year, month, date }; // 属性的简写形式
}
console.log(getCurrentDate()); // {year: 2023, month: 1, date: 5}

方法的简洁表示法-增强

const obj = {
  say: function (a, b) {},
};

// 简写
const obj = {
  say(a, b) {},
};

const student = {
  name: "清心",
  code: function () {
    console.log(`${this.name}正在写代码`);
  },
};
student.code(); // 清心正在写代码

// 以下是简写形式，可以省略方法名后面的:和function关键字
const student = {
  name: "清心",
  code() {
    console.log(`${this.name}正在写代码`);
  },
};
student.code("清心"); // 清心正在写代码

ES6 支持的最完美的 get 和 set 函数的简写形式

const obj = {
  _sex: "男",
  // get函数的简写
  get sex() {
    return this._sex;
  },
  // set 函数的简写
  set sex(value) {
    this._sex = value;
  },
};
console.log(obj.sex);
console.log((obj.sex = "女"));
console.log(obj);

方括号语法 - 增强

• 在 ES6 中允许字面量定义对象时使用[]方括号的方式来定义属性名
• 方括号中可以放的内容和模板字符串中的注入${}中可以放的内容一样，可以放 值 或 通过计算可以得到值的（表达式） 都可以

const property = "username";
const foo = () => "age";

// 对象字面量
const student = {
  [property]: "icoding",
  [foo()]: 18,
  // ["sex"]: "male",
  ["s" + "ex"]: "female",
};
console.log(student); // {username: 'icoding', age: 18, sex: 'female'}

• 在获取属性时，当属性名不是合法标识符时，就只能采用方括号表示法。
• 在获取属性时，如果使用变量或者常量保存属性名时，就只能采用方括号表示法

const obj = {
  age: 18,
  "123username": "icoding",
};
// 123username 不是合法标识符，所以只能用方括号方式来获取
console.log(obj["123username"]);
// 定义一个常量property，值为age
const property = "age";
// 当属性为变量或常量时，必须通过方括号语法，即：obj[property]，使用property保存的值age，所以等价于obj.age这种写法
console.log(obj[property]); // 18
// 当属性为变量或常量时，如果通过点语法，会将property看做字符串，表示访问obj对象下的property属性，而不是访问obj下的age属性，而obj对象中没有property属性，所以返回结果为undefined
console.log(obj.property); // undefined

方括号语法和点语法的区别

• 点语法是方括号语法的特殊形式。也就是说：如果不使用点语法，只使用方括号来给对象字面量添加属性或方法没有任何问题。
• 但，有些特殊情况我们是可以使用点语法的，而点语法用起来更简单。所以，能用点语法时，我们会优先使用点语法。

// 对象字面量
const student = {};

// 使用点语法给对象字面量添加属性
student.age = 18; // 等价于 student["age"] = 18;
console.log(student); // {age: 18}

// 使用方括号给对象字面量添加属性
student["username"] = "icoding"; // 等价于 student.username='icoding'
console.log(student); // {age: 18, username: 'icoding'}