开发者社区> 天行无忌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript 中优雅处理对象的6个方法

简介: 和其他编程语言一样,JavaScript 有自己的数据类型,如数字、字符串、数组、对象等。而对象在JavaScript中是一种非常重要的数据类型,它们有很多有用的方法,在平常项目开发中可以使用这些方法容易地处理对象。本文介绍6个在项目中用得上的方法,趁此机会加深其使用方法。
+关注继续查看

和其他编程语言一样,JavaScript 有自己的数据类型,如数字、字符串、数组、对象等。而对象在JavaScript中是一种非常重要的数据类型,它们有很多有用的方法,在平常项目开发中可以使用这些方法容易地处理对象。本文介绍6个在项目中用得上的方法,趁此机会加深其使用方法。

1、Object.freeze()

Object.freeze() 方法可以防止对象中的数据被修改,即冻结一个对象,这样不能向这个对象 添加、更新或删除属性。

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};
Object.freeze(author);
author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'Quintion', city: 'Shenzhen', age: 18, validation: true }

如上面的代码,更新属性name、新增属性province、删除属性age,最终对象都没有任何改变。

2、Object.seal()

Object.seal() 方法有点类似于 Object.freeze() 。阻止向对象添加新的属性和删除属性,但允许更改和更新现有属性。

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};
Object.seal(author);
author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'QuintionTang', city: 'Shenzhen', age: 18, validation: true }

从上面代码可以看到,新增属性和删除属性都无效,只有更新属性name生效了。

3、Object.keys()

Object.keys() 方法会返回一个数组,该数组包含参数对象的所有键的名称,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

看看下面的代码:

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};
console.log(Object.keys(author)); // [ 'name', 'city', 'age', 'validation' ]

可以看到上面的代码中打印的结果是一个包含键作为输出的数组。输出的结果可以使用数组的方法进行处理或者迭代。

console.log(Object.keys(author).length); // 4

4、Object.values()

Object.values() Object.keys() 类似,不过Object.values() 是获取对象内素有属性的值,返回值组成的数组。

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};
console.log(Object.values(author)); // [ 'Quintion', 'Shenzhen', 18, true ]

5、Object.create()

Object.create() 基于现有对象的原型__proto__创建一个新对象,先来看下面代码:

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};
const newAuthor = Object.create(author);
console.log(newAuthor); // {}
newAuthor.firstName = "Ronb";
newAuthor.lastName = "Joy";
console.log(newAuthor.fullName()); // Ronb Joy

在上面的代码中,使用object. create()创建一个具有author对象原型的新对象newAuthor。这样在新对象newAuthor中可以像改变author对象所拥有的属性值一样改变相应的属性值,这个看起来是不有点像继承,没错, 使用 Object.create 可以实现类式继承。

6、Object.entries()

Object.entries() 允许获取对象的键和值,返回一个多维数组,其中每一维包含每个键和值,如 [键 , 值]

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};
console.log(Object.entries(author));

输出的结果如下:

[
  [ 'firstName', 'Quintion' ],
  [ 'lastName', 'Tang' ],
  [ 'fullName', [Function: fullName] ]
]

总结

本文对对象常见的6个方法做了简单的介绍,并提供了相应的示例代码,在实际编码处理对象的过程中,使用上面的方法可以让代码变得更加优雅。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 创建对象的七种方式
JavaScript 创建对象的七种方式
27 0
JavaScript创建对象的方式!
  JavaScript创建对象的方式!JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产。接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点。
647 0
JavaScript 创建对象的方式
对象直接量 对象直接量是由若干 名/值 对的映射表,名值对中间用冒号分隔,名值对之间用逗号分隔,整个映射表用花括号括起来。属性名可以是JavaScript标识符也可以是字符串直接量(也可以是空字符串),属性的值可以是任意类型的JavaScript表达式,表达式的值即是改属性的值,该值可以是原始值,也可以是对象值。
674 0
[转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function createCar(sColor) {    // 或者 var car = new Object;    var car = new Object();    // 对象属性    car.
750 0
JavaScript OOP 创建对象的7种方式
我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
775 0
JavaScript OOP 创建对象的7种方式
原文:JavaScript OOP 创建对象的7种方式 我写JS代码,可以说一直都是面向过程的写法,除了一些用来封装数据的对象或者jQuery插件,可以说对原生对象了解的是少之又少。所以我拿着《JavaScript高级程序设计 第3版》恶补了一下,这里坐下总结笔记,属于菜鸟级别,大神请直接无视。
661 0
javascript中创建对象的几种方式
原文:javascript中创建对象的几种方式 javascript中提供了通过Object构造函数或对象字面量方式来创建单个的对象,当我们想要创建很多对象的时候,简单的通过这两种方法就会产生大量的重复。
1020 0
javascript中创建对象的几种方式
前言:          随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的“玩具语言”。 编程在不断的简化,可是“用户体验、性能、兼容性、可扩展......”要求却在不断提高,随之涌现出Prototype、jQuery、ExtJs、Dojo等优秀的框架(类库),大大简化了web开发。
794 0
+关注
天行无忌
技术改变生活、研发构建未来、细节铸造品质!
255
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载