对象字面量全解释

一、对象字面理解

对象字面量是JavaScript中创建对象的一种方式，可以在一个代码块中创建或初始化一个对象，对象字面量通常由大括号包围，并且由零个或多个键值对组成。

对象字面量可以用来创建简单的对象或者自定义对象，可以通过它来构建JSON格式数据。

二、对象字面量表示法

对象字面量的基本组成方式为键值对，它由一组用逗号分隔的键值对构成。键是一个字符串，而值可以是任何一个JavaScript表达式，可以是函数、对象或者任何其他表达式。对象字面量键和值之间使用冒号`:`来分隔，多个键值对之间使用逗号`,`分隔。

let person = {
  name: 'Tom',
  age: 20
};

对象字面量表示法还支持对象属性的访问器（getter和setter），下面的例子展示了这个写法。

let person = {
  _name: 'Tom',
  get name() {
    return this._name;
  },
  set name(val) {
    this._name = val;
  }
};

三、对象字面量是什么意思

字面量表示常量的值，我们通过字面量定义的值是固定的，不能被重复定义或更改。因此，对象字面量仅用于创建对象，而不是对对象属性进行修改。

同一个JavaScript文件中多个对象字面量，则它们也是独立的，不会相互干扰，可以使用对任何一个对象字面量进行访问和操作，这样就实现了代码的模块化和封装。

四、对象字面量创建

创建对象字面量的方式有两种：一种是使用对象字面值直接创建，另一种是使用工厂方法创建。

1、使用对象字面值直接创建

let student = {
  name: 'Jerry',
  age: 18,
  gender: 'Male',
  score: [98, 100, 88],
  showScore: function() {
    console.log(this.score);
  }
};

2、使用工厂方法创建

function createStudent(name, age, gender, score) {
  return {
    name: name,
    age: age,
    gender: gender,
    score: score,
    showScore: function() {
      console.log(this.score);
    }
  };
}
let student1 = createStudent('Tom', 20, 'Male', [88, 92, 95]);
let student2 = createStudent('Jerry', 18, 'Male', [98, 100, 88]);

五、对象字面量增强

ES6提供了一种更简洁的语法来创建对象字面量，称之为对象字面量增强。使用对象字面量增强的方式，可以不用再书写键和值，只需要书写键即可。

1、简写键名

let name = 'Tom';
let age = 20;
let person = {
  name,
  age
};

2、对象方法简写

let person = {
  name: 'Tom',
  sayName() {
    console.log(this.name);
  }
};

3、计算属性名

let key = 'name';
let person = {
  [key]: 'Tom'
};

六、对象字面量创建对象

常见的创建对象的方法有三种：工厂模式、构造函数模式和Object.create()方法。

1、工厂模式

function createPerson(name, age, gender) {
  return {
    name: name,
    age: age,
    gender: gender
  };
}
let person1 = createPerson('Tom', 20, 'Male');
let person2 = createPerson('Jerry', 18, 'Male');

2、构造函数模式

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
let person1 = new Person('Tom', 20, 'Male');
let person2 = new Person('Jerry', 18, 'Male');

3、Object.create()方法

let person = {
  name: 'Tom',
  age: 20,
  gender: 'Male',
  sayName: function() {
    console.log(this.name);
  }
};
let newPerson = Object.create(person);

七、对象字面量的形式

对象字面量的形式有两种，一种是键值对形式，另一种是函数式。

1、键值对形式

let person = {
  name: 'Tom',
  age: 20,
  gender: 'Male',
  sayName: function() {
    console.log(this.name);
  }
};

2、函数式

let person = function(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayName = function() {
    console.log(this.name);
  };
};

八、对象字面量键值排序

对象字面量创建的键值顺序是按照书写顺序排列的。如果希望按照特定的顺序排列键值，可以将它们按照所期望的顺序排序后再创建字面量。

let person = {
  name: 'Tom',
  gender: 'Male',
  age: 20
};

以上代码的键值顺序为按照字母序排列的”name”、”age”和”gender”。

如果希望按照”gender”、”name”和”age”的顺序排列键值，则需要将它们按照顺序排序后再写入键值对。

let person = {
  gender: 'Male',
  name: 'Tom',
  age: 20
};

九、对象字面量键值排序代码示例

let person = {
  name: 'Tom',
  gender: 'Male',
  age: 20
};

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/183322.html