Web前端入门第 61 问：JavaScript 各种对象定义与对象取值方法

技术分享 10个月前 (05-31) 0 999+

曾经有人说 JS 语言中万物皆对象，虽然这种说法不一定完全准确，但也有一定的道理。原因是 JS 的语法看起来所有的数据类型都像是一个对象，包括原始类型。

const a = 1.234; console.log(a.toString()); console.log(a.valueOf()); console.log(a.toFixed(2)); console.log(Number.prototype); // 查看所有 Number 类型的原型链方法属性  const b = '前端路引'; console.log(b.length); console.log(b.substring(2)); console.log(b.padEnd(10, '*')); // 后填充 * 字符 console.log(String.prototype); // 查看所有 String 类型的原型链方法属性  const c = true; console.log(c.toString()); console.log(Boolean.prototype); // 查看所有 Boolean 类型的原型链方法属性

以上展示了 Number、String、Boolean 三种原始类型的方法。a.xxx() 这种写法就表示 xxx 是 a 的方法。

一般定义在对象上的 函数 都称之为 对象方法，使用语法： xxx.yyy()。对象除了方法还有 对象属性，使用语法： xxx.yyy。

方法和属性的区别是：方法是函数，属性是值。

举个例子：

const obj = {   name: '前端路引', // 对象属性   age: 1, // 对象属性   sayHi() { // 对象方法     console.log(`我是${this.name}，我今年${this.age}岁`);   } }

以上是一个 JS 的对象字面量定义方式，除了最常用的对象字面量，还可以像 Array 一样，使用构造函数来定义对象，也可以使用 Class 自定义对象。

对象定义

JS 的对象定义可比数组的花样多多了，下面来一一展示。

对象字面量

JS 的对象值与数组一样，无任何限制，可以是任意值，包括函数、数组、对象、undefined、null、NaN 等。

const dynamicKey = 'dynamicKey'; const fnKey = () => {};  const obj1 = {   name: '前端路引',    age: 1,   'favorite-color': 'blue', // 含特殊字符的键需用引号包裹   [Symbol('id')]: 123, // Symbol 作为键   [dynamicKey]: 'value', // 使用动态变量作为属性名   [fnKey]: '使用函数作为键名称',   greet() { // 方法简写（ES6+）     console.log('Hello!');   },   say: function () { // 函数     console.log('Hi!');   } };

构造函数

虽然此方法使用较少，但这种方式也可以用来定义一个对象。以下代码与上面的对象字面量定义的对象一样：

const dynamicKey = 'dynamicKey'; const fnKey = () => {};  const obj2 = new Object(); obj2.name = '前端路引'; obj2.age = 1; obj2['favorite-color'] = 'blue'; obj2[Symbol('id')] = 123; obj2[dynamicKey] = 'value'; obj2[fnKey] = '使用函数作为键名称'; obj2.greet = function () {   console.log('Hello!'); } obj2.say = function () {   console.log('Hi!'); }

Object.create()

使用对象的静态方法 Object.create() 来创建对象。

静态方法和对象原型链方法的区别是：静态方法属于对象本身，对象原型链上的方法属于对象实例。

看例子：

const obj3 = Object.create({ // 使用静态方法创建对象   name: '前端路引', }) obj3.toString() // 调用原型链方法，也称为实例方法

Object.create 多用于继承一个对象，扩展原有对象的功能：

const obj4 = {   name: '前端路引', } const obj5 = Object.create(obj4); obj5.age = 1; obj5['favorite-color'] = 'blue';

自定义构造函数

除了使用 JS 提供的内置构造函数，还可以自定义构造函数来创建一个对象。比如：

function WeChat () {   this.name = '前端路引';   this.age = 1;   this['favorite-color'] = 'blue'; } const obj6 = new WeChat();

function 关键字可不止用于函数定义，还能用来自定义构造函数，这是在 ES6 出现之前自定义类最常用的方式。

Class

为了消除语法歧义，ES6 引入了 Class 定义类，再通过 new 关键字创建实例对象，这种方式完全像是 function 的语法糖。

class WeChat {   constructor() {     this.name = '前端路引';     this.age = 1;     this['favorite-color'] = 'blue';   }   say() {     console.log('Hi!');   } } const obj7 = new WeChat();

对象取值

对象的取值方法也多得眼花缭乱，下面一一展示。

点语法

常规属性可以使用 . 取值，比如：

const obj1 = {   name: '前端路引',    age: 1,   'favorite-color': 'blue',   say() {     console.log('Hi!');   } } console.log(obj1.name); // 获取属性值 console.log(obj1.say()); // 调用方法

方括号取值

. 语法有个问题，比如上面对象中 favorite-color 属性，如果直接使用 obj1.favorite-color，会报错，因为 - 会被当做减号处理，导致报错 ReferenceError: color is not defined。

这时候可以把对象当做数组来处理，使用方括号 [] 取值，比如：

const obj1 = {   name: '前端路引',    age: 1,   'favorite-color': 'blue',   say() {     console.log('Hi!');   } } console.log(obj1['favorite-color']); // 获取属性值 console.log(obj1['say']()); // 调用方法

使用方括号取值时，如果属性名是动态的，可以使用变量来取值，比如：

const dynamicKey = 'dynamicKey';  const obj1 = {   [dynamicKey]: '前端路引', } console.log(obj1[dynamicKey]);

解构赋值

作为 ES6 引入的新特性，此写法如果不了解，那么代码可能都看不懂。

const obj1 = {   name: '前端路引',    age: 1, }  const { name, age, up = '微信公众号' } = obj1; console.log(name, age); // 解构赋值，可以添加默认值，如果找不到属性，则使用默认值 console.log(up);

Object 静态方法

Object 自身还提供了一些静态方法，用于获取数组的键值。

const obj1 = {   name: '前端路引',    age: 1, } const keys = Object.keys(obj1);    // 返回所有可枚举属性名数组 const values = Object.values(obj1);// 返回所有值数组 const entries = Object.entries(obj1); // 返回键值对数组 console.log(keys); // ['name', 'age'] console.log(values); // ['前端路引', 1] console.log(entries); // 二维数组  [['name', '前端路引'], ['age', 1]]

Getter / Setter 方法

使用 get 方法，可以设置对象的计算属性，用于拦截对象的取值，比如：

const obj1 = {   firstName: '微信公众号：',   lastName: '前端路引',   get name() {     return `${this.firstName}：${this.lastName}`; // 微信公众号：：前端路引   },   set name(value) {     [this.firstName, this.lastName] = value.split('：');   } } console.log(obj1.name); // 微信公众号：前端路引 obj1.name = '前端路引：微信公众号'; console.log(obj1.name); // 前端路引：微信公众号

原型链访问

如果取的属性对象本身不存在，则会顺着原型链查找，直到找到为止，比如：

const obj1 = {   name: '前端路引',    age: 1, } console.log(obj1.toString()); // toString 方法不在对象本身，是 Object 原型链上的方法，也可以使用取值语法访问

可选链

ES2020 引入了可选链，用于解决对象取值时，如果属性不存在，会报错的问题，比如：

const obj1 = {   name: '前端路引',    age: 1, } // 如果直接取值，将会报错 TypeError: Cannot read properties of undefined (reading 'city') console.log(obj1.address.city); // 使用可选链，如果属性不存在，则返回 undefined，不会报错 console.log(obj1?.address?.city);