正经人一辈子都用不到的 JavaScript 方法总结 (二)

简介: 现在有这样一个需求:用一个对象存储某学生的各科成绩,要求每次只能改变科目分数,不能再添加或者删除科目。

1.png


前言


现在有这样一个需求:用一个对象存储某学生的各科成绩,要求每次只能改变科目分数,不能再添加或者删除科目。


分析一下,这个需求其实就是需要创建一个固定属性的对象,其属性不可增删,但属性值可更改。


有些同学可能就这么开始了:


  • 首先,定义一个符合要求的对象:


// 声明成绩存储对象
let reportObj = {};
// 给成绩存储对象添加科目,并设置科目属性不可增删,但科目成绩可修改
Object.defineProperties(reportObj, {
    ChineseMark: {
        enumerable: true,
        writable: true,
        configurable: false,
        value: 60
    },
    EnglishMark: {
        enumerable: true,
        writable: true,
        configurable: false,
        value: 60
    }
});


  • 然后写入成绩:


// 存入科目成绩
reportObj.ChineseMark = 99;
reportObj.EnglishMark = 95;
console.log(reportObj);  // {ChineseMark: 99, EnglishMark: 95}


删除属性来试试:


delete reportObj.ChineseMark;  // false
console.log(reportObj);  // {ChineseMark: 99, EnglishMark: 95}


貌似确实符合条件了,那么再试试增加属性吧:


reportObj.PhysicsMark = 100;
console.log(reportObj);  // {ChineseMark: 99, EnglishMark: 95, PhysicsMark: 100}


咋回事,怎么突然就不太符合要求了呢?Object.defineProperties() 只能精确控制所增添的属性的特质,但如果给对象添加属性的话,它就无力控制了。


今天我们就用简单的接口方法来实现一下这幺蛾子需求  ︿( ̄︶ ̄)︿


Object.seal()


描述


seal 如果作动词,那它的解释就是“密封”:


2.png


见名知意,Object.seal() 方法就是用来“密封”一个对象的,它阻止对象添加新属性,并将对象所有的现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。


作用


通常,一个对象是可扩展的(可以添加新的属性)。


密封一个对象会让这个对象变的不能添加新属性,且所有已有属性会变的不可配置。属性不可配置的效果就是属性变的不可删除,以及一个数据属性不能被重新定义成为访问器属性,或者反之。但属性的值仍然可以修改。


尝试删除一个密封对象的属性或者将某个密封对象的属性从数据属性转换成访问器属性,结果会静默失败或抛出 TypeError(在严格模式 中最常见的,但不唯一)。


const object1 = {
    property1: 42
};
Object.seal(object1);
object1.property1 = 33;
console.log(object1.property1);
// expected output: 33
delete object1.property1; // cannot delete when sealed
console.log(object1.property1);
// expected output: 33


总结起来,Object.seal() 其实就是做了以下事情:


  • 设置Object.preventExtension(),禁止添加新属性(绝对存在)
  • 设置configurable为false,禁止配置(绝对存在)
  • 禁止更改访问器属性(getter和setter)


语法


Object.seal(obj)


参数


参数 obj 代表将要被密封的对象。


返回值


被密封的对象。


实现需求


既然有这么好用的方法,那我们当然要好好利用一番啦,终于可以完美实现文章开头的需求了:


// 声明成绩存储对象及其属性
let reportObj = {   
    ChineseMark: 60,
    EnglishMark: 60
};
// 密封成绩对象
let sealedReportObj = Object.seal(reportObj);
// 更改科目分数
sealedReportObj.ChineseMark = 99;
sealedReportObj.EnglishMark = 97;
console.log(sealedReportObj); // {"ChineseMark": 99, "EnglishMark": 97}


验证一下:


// 增加属性
sealedReportObj.PhysicsMark = 100;
console.log(sealedReportObj); // {"ChineseMark": 99, "EnglishMark": 97}
// 删除属性
delete sealedReportObj.ChineseMark; // false
console.log(sealedReportObj); // {"ChineseMark": 99, "EnglishMark": 97}


可以看到对象的属性确实是增删不了了,算是简单实现了需求吧。


扩展


如果要判断一个对象是否“密封”,我们可以使用 Object.isSealed() 方法:


Object.isSealed(sealedReportObj); // true

Object.freeze()


看到这里,可能很多同学都想起了 Object.freeze() 方法,它的作用是用来冻结一个对象。实际作用就是字面意思:冻结一个对象,使其属性和属性值都不可更改。用来实现这个需求显然是不合适的。


共同点


Object.seal()Object.freeze() 有以下共同点:


  • 作用的对象变得不可扩展,这意味着不能再添加新属性。
  • 作用的对象中的每个元素都变得不可配置,这意味着不能删除属性。
  • 如果在 ‘use strict’ 模式下使用,这两个方法都可能抛出错误。


不同点


Object.seal() 能让你修改属性的值,但 Object.freeze() 不能。


总结


以上就是关于 Object.seal() 方法的一些简单介绍和应用,以及它和 Object.freeze() 的异同点,希望能对大家有所帮助。


参考文档:


Object.seal()

Object.freeze()


~本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!


你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!


知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!




相关文章
|
15天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
130 59
|
9天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
22 2
|
10天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
10 0
JS之concat方法
|
15天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
16天前
|
JavaScript
JS数组合并的常用方法
JS数组合并的常用方法
|
4天前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
4天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
4天前
|
JavaScript 前端开发
用Javascript对二维数组DIY按汉语拼音的排序方法
用Javascript对二维数组DIY按汉语拼音的排序方法
|
6天前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
7天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。