【ES6基础】Object的新方法
开篇
Object对象可谓是JS的重要核心内容,在你使用JS的过程中,你会发现自己的工作大部分都是在操作对象,ES6、ES7、ES8引入了不少新的方法,本篇文章笔者将带着大家一起熟悉下重点的新方法。
本篇文章,笔者将从以下几个方面进行介绍:
- 更简洁的语法
- Object.values()
- Object.entries()
- __proto__
- Object.is()
- Object.setPrototypeOf()
- Object.assign()
- Object.getOwnPropertyDescriptors()
本篇文章阅读时间预计6分钟。
01
更简洁的语法
定义属性
我们都知道定义一个对象,必须明确属性名和对应的值,即使属性名和声明的变量名一样(var a = {obj:obj}),ES6及后续版本允许我们用短的代码声明对象,用于将对象的属性分配给与属性同名的变量,以前我们一般会这么声明变量,代码如下:
var x = 1, y = 2;
var object = {
x: x,
y: y
};
console.log(object.x); //output "1”
但是ES6之后,你可以这么做:
let x = 1, y = 2;
let object = { x, y };
console.log(object.x);
定义方法
ES6提供了一种新的语法定义对象的方法,示例代码如下:
let object = {
myFunction(){
console.log("Hello World!!!");
//Output "Hello World!!!"
}
};
object.myFunction();
我们可以看出,省去了声明属性名,属性名即为方法名。
计算属性名
对象属性支持计算属性名。其允许在[]中放入表达式,计算结果可以当做属性名。
let object = {
["first" + "Name"]: "Eden",
};
//extract
console.log(object["first" + "Name"]);
//Output "Eden”
console.log(object);
//Output "{ firstName: 'Eden' }”
02
Object.values()
ES8 引入了Object.values()方法,以数组的形式输出对象所有的值,省去我们手动迭代取出对象每个属性的值,示例代码如下:
const obj = {
book: "Learning ES2017 (ES8)",
author: "前端达人",
publisher: "前端达人",
useful: true
};
console.log(Object.values(obj));
上述代码将会输出:
[ 'Learning ES2017 (ES8)', '前端达人', '前端达人', true ]
03
Object.entries()
Object.entries()可用于将对象转换为键/值对的数组形式。 即一个二维数组,数组的每个元素是一个包含键和值的数组。 示例代码如下:
const obj = {
book: "Learning ES2017 (ES8)",
author: "前端达人",
publisher: "前端达人",
useful: true
};
console.log(Object.entries(obj));
上述代码将会输出:
[ [ 'book', 'Learning ES2017 (ES8)' ],
[ 'author', '前端达人' ],
[ 'publisher', '前端达人' ],
[ 'useful', true ] ]
04
__proto__
proto:是一个对象拥有的内置属性,是JS内部使用寻找原型链的属性。可以理解为它是一个指针,用于指向创建它的函数对象的原型对象prototype(即构造函数的prototype)。
prototype(原型对象):是函数(Function)的一个属性(每个函数都有一个prototype),这个对象包含了此函数的所有实例共享的属性和方法,即:原型对象。
__proto__属性在ES5中没有标准化,但由于它的受欢迎程度,它在以后的版本中被标准化了。我们可以使用Object.getPrototypeOf()方法返回指定对象的原型(获取内部[[Prototype]]属性的值),可以使用Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。
//In ES5
var x = {prop1: 12};
var y = Object.create(x, {prop2:{value: 13}});
console.log(y.prop1); //Output "12"
console.log(y.prop2); //Output "13"
console.log(x); // Output: {prop1: 12}
console.log(y); // Output: {prop2: 13}
console.log(y.__proto__); // Output: {prop1: 12}
//In ES6 onwards
let a = {prop1: 12, __proto__: {prop2: 13}};
console.log(a.prop1); //Output "12"
console.log(a.prop2); //Output "13"
console.log(a); // Output: {prop1: 12}
console.log(a.__proto__); // Output: {prop2: 13}
在ES5示例中,对象y继承对象x,x的属性相对于y来说是隐藏的,我们可以使用__proto__来查找继承自x的属性prop1。ES6及其后,你可以直接将值添加到对象的原型链中。
05
Object.is()
Object.is()方法用于确定两个值是否相等。它类似于===运算符,但Object.is()方法有一些特殊情况和使用“===”的结果是不一致的,如下段代码所示:
console.log(Object.is(0, -0));//false
console.log(0 === -0);//true
console.log(Object.is(NaN, 0/0));//true
console.log(NaN === 0/0);//false
console.log(Object.is(NaN, NaN));//true
console.log(NaN ===NaN);//false
如下图所示,展示了使用==,===和Object.is的结果差异:
06
Object.setPrototypeOf()
Object.setPrototypeOf方法可以为现有对象设置原型,返回一个新对象。Object.setPrototypeOf方法接受两个参数,第一个是现有对象,第二个是原型对象。Object.setPrototypeOf() 是给对象设置原型,是为了obj.proto = .... 这种写法更优雅,有更好的兼容性。如下段代码所示:
let x = {x: 12};
let y = {y: 13};
Object.setPrototypeOf(y, x);
console.log(y.x); //Output "12"
console.log(y.y); //Output "13”
console.log(y);//Output "{ y: 13 }"
console.log(y.__proto__);//Output "{ x: 12 }"
07
Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。如下段代码所示:
let x = {x: 12};
let y = {y: 13, __proto__: x};
let z = {z: 14, get b() {return 2;}, q: {}};
Object.defineProperty(z, "z", {enumerable: false});
let m = {};
Object.assign(m, y, z);
console.log(m.y);//13
console.log(m.z);//undefined
console.log(m.b);//2
console.log(m.x);//undefined
console.log(m.q == z.q);//true
从上述代码输出,我们可以得出Object.assign()方法的一些特点:
- 该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关getter和setter。
- 它只是将源的属性值分配给目标的新属性或现有属性。
- 它不会复制来源的[[prototype]]属性。
- JavaScript属性名称可以是字符串或symbol。Object.assign()这两种都支持。
- Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象。
- 如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将覆盖早先的属性。
- 为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
- Object.assign不会跳过那些值为[null]或[undefined]的源对象。
08
Object.getOwnPropertyDescriptors()
在ES8中JS引入Object.getOwnPropertyDescriptors()方法将返回给定对象的所有属性描述,如下段代码所示:
const details = {
get food1() { return 'tasty'; },
get food2() { return 'bad'; }
};
console.log(Object.getOwnPropertyDescriptors(details));
上述代码将会输出:
{ food1:
{ get: [Function: get food1],
set: undefined,
enumerable: true,
configurable: true },
food2:
{ get: [Function: get food2],
set: undefined,
enumerable: true,
configurable: true } }
这个方法还会用在对象的克隆上,示例代码如下:
const x = { foo: 1, __proto__: { bar: 2 } };
const y = Object.create(
Object.getPrototypeOf(x),
Object.getOwnPropertyDescriptors(x)
);
console.log(y.__proto__); // { bar: 2 }
今天的内容就到这里,我们可以看出ES6关于对象的使用,增加了不少新方法,使用得当,可以让我们的业务代码更加简洁易读,建议大家在实践中多多运用,加深和理解其应用场景。
- SDIBT 1046 Primary Arithmetic
- React多页面应用4(webpack自动化生成多入口页面)
- 第二周神经网络基础2.1 二分分类2.2 logistic回归2.3 logistic 回归损失函数2.4 梯度下降2.5 导数2.14 向量化logistic 回归的输出2.15 Python中的广
- 1031 SDIBT Where's Waldorf?
- poj 2469 Stack 'em Up
- React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)
- POJ 2646 The Trip
- React多页面应用2(处理CSS及图片,引入postCSS,及图片处理等)
- 图的广度优先搜索和深度优先搜索(邻接链表表示)邻接链表广度优先搜索深度优先搜索运行结果
- JOJ 2680 Problem F: Coin Game
- React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)
- JOJ 2676 Problem B
- React项目配置2(自己封装Ajax)
- React项目配置1(如何管理项目公共js方法)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用ROS2机器人操作系统进行多机器人编程技术实践(Multi-Robot Programming Via ROS2 )
- 自动化运维实践 | Ansible playbook重用
- 手把手教你打造高效的 Kubernetes 命令行终端
- docker save load export import的区别
- 使用ABAC控制数据访问
- linux 压力测试工具之ab
- 什么是Python Wheels?为什么要关心它?
- Nginx fastcgi_cache权威指南
- 玩转dockerfile
- redis实战第六篇 手动创建redis cluster
- docker容器入门最佳教程
- redis实战第五篇 jedis 连接 redis sentinel详解
- redis实战第四篇 手动容灾故障转移记录
- 10条很棒的Python一行代码
- 如何在一个Docker中同时运行多个程序进程?