对象字面量

news2024/12/26 23:38:22

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

- - 创建对象字面量的基本语法
  - 示例
  - - 基础示例
    - 计算属性名
    - 属性简写
    - 方法
  - 注意事项

在JavaScript中，对象字面量是一种创建对象的简便方式。对象字面量是由属性名和对应的值组成的键值对集合，这些键值对用逗号分隔，并包含在一对大括号 {} 中。

创建对象字面量的基本语法

const objectName = {
  propertyName1: value1,
  propertyName2: value2,
  // 更多属性...
};

这里有几个关于对象字面量的关键点：

属性名：属性名通常是字符串，但在大多数情况下不需要加引号，除非它们是保留字或包含特殊字符。
属性值：可以是任何有效的JavaScript表达式，包括字符串、数字、布尔值、函数、其他对象等。
方法：在对象字面量中，可以定义方法，即属性值为函数。
计算属性名：可以在属性名前使用方括号 [] 来动态设置属性名。
属性简写：如果属性名与变量名相同，则可以省略属性名后面的冒号和变量名。

示例

下面是一些使用对象字面量的例子：

基础示例

const person = {
  name: 'Alice',
  age: 30,
  isStudent: false,
  hobbies: ['reading', 'coding'],
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

console.log(person.name); // 输出 "Alice"
person.greet(); // 输出 "Hello, my name is Alice"

计算属性名

const key = 'firstName';

const user = {
  [key]: 'Bob',
  lastName: 'Doe'
};

console.log(user.firstName); // 输出 "Bob"
console.log(user.lastName); // 输出 "Doe"

属性简写

const firstName = 'Eve';
const lastName = 'Smith';

const user = {
  firstName,
  lastName,
  greet() {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
  }
};

console.log(user.firstName); // 输出 "Eve"
console.log(user.lastName); // 输出 "Smith"
user.greet(); // 输出 "Hello, my name is Eve Smith"

方法

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020,
  drive() {
    console.log(`Driving the ${this.make} ${this.model}`);
  },
  'honk-horn': function() { // 方法也可以使用函数声明形式
    console.log('Beep beep!');
  }
};

car.drive(); // 输出 "Driving the Toyota Corolla"
car['honk-horn'](); // 输出 "Beep beep!"