ES6基础语法之对象介绍

在ES6中，新的语法规范，对象展开操作符、对象方法、计算属性名以及内置Object属性等，在对象的定义与操作中起到了很大的作用。

对象基础

在ES6中，我们可以通过对象字面量的方式来创建一个对象，如下所示：

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

ES6还引入了一个新的关键字let来定义局部变量，取代了旧的关键字var。

对象中的属性和值采用键值对的形式表示，冒号分隔键和值，每个键值对之间用逗号隔开。

对象展开操作符

定义对象时，我们可以使用对象展开操作符...，将一个对象的属性展开到另外一个对象之中。

例如：

let obj1 = {name: '张三', age: 18};
let obj2 = {sex: '男', ...obj1};

console.log(obj2); // {sex: '男', name: '张三', age: 18}

以上代码将obj1对象中的属性展开到obj2中。

此外，...操作符还可以用于函数调用，将一个数组展开成一个序列。

例如：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

对象方法

在ES6中，可以通过在对象中定义函数来定义对象的方法。

例如：

let obj = {
  name: '张三',
  sayHello() {
    console.log('你好，' + this.name);
  }
};

obj.sayHello(); // 你好，张三

在以上代码中，我们在obj对象中定义了一个名为sayHello的函数，当调用obj.sayHello方法时，控制台会输出你好，张三。

除了上述的函数定义语法形式之外，在ES6中，还可以使用=>来定义函数，这种函数也称为箭头函数，例如：

let obj = {
  name: '张三',
  sayHello: () => {
    console.log('你好，' + this.name);
  }
};

obj.sayHello(); // 你好，undefined

需要注意的是，在箭头函数中，this指针会指向箭头函数外部的this，因此在以上的代码中，this指针指向了全局变量，而不是obj对象。

计算属性名

在ES6中，我们可以使用计算属性名，动态地定义对象的属性名。

例如：

let name = '张三';

let obj = {
  [name]: 'hello'
};

console.log(obj[name]); // hello

以上代码在定义对象obj时，使用了计算属性名的方式，通过变量name来动态地定义了对象的属性名。

内置Object属性

ES6中还提供了许多内置的Object属性，例如Object.keys、Object.values以及Object.entries。

1. Object.keys用于获取对象的所有键名，返回一个数组。

例如：

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

let keys = Object.keys(obj);

console.log(keys); // ['name', 'age', 'sex']

以上代码调用了Object.keys方法，输出了数组['name', 'age', 'sex']。

1. Object.values用于获取对象的所有键值，返回一个数组。

例如：

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

let values = Object.values(obj);

console.log(values); // ['张三', 18, '男']

以上代码调用了Object.values方法，输出了数组['张三', 18, '男']。

1. Object.entries用于获取对象的所有键值对，返回一个数组。

例如：

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

let entries = Object.entries(obj);

console.log(entries); // [['name', '张三'], ['age', 18], ['sex', '男']]

以上代码调用了Object.entries方法，输出了一个包含三个数组的数组，每个子数组包含键值对。

本文链接：http://task.lmcjl.com/news/15727.html