Javascript 对象：最佳实践
在使用 Javascript 时，我们必须将对象作为 Javascript 的构建块来处理。知道如何有效地使用这些对象可以使您的代码更具可读性、效率和无错误。在此博客中，我们将看到一些在 Javascript 中使用对象的良好实践。让我们开始吧！
技巧 1：使用文字语法创建对象
这似乎是初始化 objects 变量时的一个小变化，但了解这些信息后，您会更好地理解为什么这很重要。
// not recommended
const item = new Object();
// good practice
const item = {};
简单性和可读性：文字语法提供了一种简洁直观的方式来定义对象。与需要使用 new 关键字调用函数的 Object 构造函数相比，它更易于阅读和理解。
一致性：使用文字语法可确保整个项目中代码风格的一致性。大多数开发人员都习惯于看到使用字面量语法定义的对象，从而使代码更加熟悉和易于维护。
性能：与使用 Object 构造函数相比，使用文字语法创建对象更快。文字语法直接创建对象而不调用任何额外的函数或构造函数。
Prototype Chain Preservation : 当使用 Object 构造函数时，新创建的对象不会继承自全局 Object 原型。相比之下，当使用字面量语法时，对象是用完整的正确原型链创建的。
不变性Object.freeze()：当使用文字语法时，使用ES6 的对象扩展语法等技术可以更容易地创建不可变对象({...})，这可以使对象属性成为只读的。这种不变性有助于防止对对象进行意外修改。
避免语法错误：文字语法允许在定义对象时更加灵活，例如使用计算属性名称({[key]: value})、简写属性语法({key})或对象方法({method() {}})。使用 Object 构造函数时，这些功能不可用。
虽然在极少数情况下可能需要使用 Object 构造函数（例如，在创建具有特定原型的对象时），但通常情况下，文字语法提供了一种更简单、更易读且性能更好的方式来在 JavaScript 中创建对象。
技巧 2：使用计算属性名称
function getKey(k) {
return `${k}_key`; //generates key name dynamically
}
// not recommended
const obj = {
id: 1,
name: 'Foo',
};
obj[getKey('enabled')] = true;
// good practice!
const obj = {
id: 1,
name: 'Foo',
[getKey('enabled')]: true, // computed property syntax
};
这将允许在创建对象时一次定义所有属性。
技巧 3：使用对象方法和属性简写
- 使用对象方法简写
// looks ugly
const obj = {
value: 1,
addValue: function (value) {
return this.value + value;
},
};
// looks clean!
const obj = {
value: 1,
addValue(value) {
return this.value + value;
},
};
- 使用属性值速记
const property = 'property';
// looks ugly
const obj = {
property: property,
};
// good practice
const obj = {
property,
};
在对象声明的开头对所有速记属性进行分组。这样可以更容易地查看哪些属性正在使用速记。
技巧 4：为具有无效标识符的属性提供引号
不需要引用对象内部定义的所有属性。这妨碍了可读性和对象看起来笨重。如果您使用任何无效的标识符，例如带有烤肉串的标识符，那么您可以引用该特定属性。
// bulky
const obj = {
'prop1': 1,
'prop2': 2,
'prop-3': 3,
};
// good practice!
const obj = {
prop1: 1,
prop2: 2,
'prop-3': 3,
};
技巧 4：浅/深复制对象以避免对象可变性
很少有技巧和方法允许将对象复制到另一个对象变量以避免改变原始对象。根据需要，我们可以创建原始对象的浅拷贝或深拷贝，或者将原始对象的引用完全存储到另一个对象变量中。
Object.assign()避免以这种方式 使用：
const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign(originalObj, { c: 3 }); // this mutates `originalObj`
delete copiedObj.a; // this will be deleted from the originalObj as well!!!!
- 浅拷贝使用
Object.assign：
const originalObj = { a: 1, b: 2 };
const copiedObj = Object.assign({}, originalObj, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
delete copiedObj.a
console.log(originalObj) // {a: 1, b: 2}
console.log(copiedObj) // {b: 2, c: 3}, 'a' is deleted from copiedObj
- 使用传播对象语法的浅拷贝：
const originalObj = { a: 1, b: 2 };
const copiedObj = {...originalObj, c: 3} // copy => { a: 1, b: 2, c: 3 }
delete copiedObj.a
console.log(originalObj) // {a: 1, b: 2}
console.log(copiedObj) // {b: 2, c: 3}, 'a' is deleted from copiedObj
- 深度复制使用
JSON.parse和JSON.stringify
const originalObj = { a: 1, b: {
b1: 1,
b2: 2
} };
const copiedObj = JSON.parse(JSON.stringify(originalObj)) // copy => { a: 1, b: {b1: 1, b2: 2} }
delete copiedObj.b.b1
console.log(originalObj) // {a: 1, b: {b1: 1, b2: 2}}
console.log(copiedObj) // {a: 1, b: { b2: 2}}
- 点赞
- 收藏
- 关注作者
评论（0）