ES6 对象的扩展

摘要:
注意,当super关键字表示原型对象时,它只能在对象的方法中使用。如果在其他地方使用,将报告错误。因此,如果源对象的属性值是一个对象,则目标对象副本将获得对象constobj1={a:{b:1}}的引用;constobj2=对象分配;目标1.a.b=2;在obj2.a.b/2上面的代码中,源对象obj1的a属性的值是一个对象,通过复制object.assign获得对象的引用。

一、属性的简洁表示法

ES6 允许直接写入变量和函数,作为对象的属性和方法

let a=1;
let b=2;

let es5={a:a,b:b};
// 等同于
let es6={a,b}; 

上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值

同样的,如果对象是方法,也可以简写:

let es5={
    sayhello:function(){
        console.log('hello');
    }
};
// 等同于
let es6={
    sayhello(){
        console.log('hello');
    }
};

 

二、属性名表达式

ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内

let a='b';

let es5={a:'c'};      // 输出{a:"c"}

let es6={[a]:'c'};    // 输出{b:"c"}

表达式还可以用于定义方法名

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello()  // hi

注意,属性名表达式与简洁表示法,不能同时使用,会报错

let a="my";
let b="name";
let person={
    [a+b],
    b
};    // Uncaught SyntaxError: Unexpected token ,

三、super 关键字

ES6 新增了一个关键字 super,指向当前对象的原型对象

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);

obj.find()   // "hello"

上面代码中,对象 obj.find()方法之中,通过 super.foo 引用了原型对象 proto 的 foo 属性。

注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

JavaScript 引擎内部,super.foo 等同于 Object.getPrototypeOf(this).foo(属性)或 Object.getPrototypeOf(this).foo.call(this)(方法)

 

四、扩展运算符

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中

let z = { a: 3, b: 4 };
let n = { ...z };
n      // { a: 3, b: 4 }

由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组

let foo = { ...['a', 'b', 'c'] };
foo    // {0: "a", 1: "b", 2: "c"}

如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象

{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

五、对象的新增方法

1、Object.is()

ES6 中 Object.is() 用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致,但前者会自动转换数据类型,所以其 NaN 等于自身,+0等于-0,而后者不等

'foo' === 'foo'         // true
Object.is('foo', 'foo') // true

{} === {}               // false
Object.is({}, {})       // false

+0 === -0               // true
Object.is(+0, -0)       // false

NaN === NaN             // false
Object.is(NaN, NaN)     // true

 

2、Object.assign()

用于对象的合并,将源对象的所有可枚举属性复制到目标对象,其中第一个参数是目标对象,后面的参数都是源对象

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target
// {a:1, b:2, c:3}

如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);

target // {a:1, b:2, c:3}

如果只有一个参数,Object.assign 会直接返回该参数

const obj = {a: 1};
Object.assign(obj) === obj // true

如果该参数不是对象,则会先转成对象,然后返回

typeof Object.assign(2)    // "object"

由于 undefined 和 null 无法转成对象,所以如果它们作为参数,就会报错

Object.assign(undefined)   // 报错
Object.assign(null)        // 报错

如果非对象参数出现在源对象的位置,这些参数都会转成对象,若无法转成对象则会跳过。所以当 undefined 和 null 不在首参数时不会报错

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj      // true

Object.assign 方法实行的是浅拷贝,而非深拷贝。所以如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

上面代码中,源对象 obj1 a属性的值是一个对象,Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面

 

3、Object.keys()

返回一个数组,成员是参数对象自身的所有可遍历属性的键名

var obj = { name: 'Leophen', age: 22 };
Object.keys(obj)    // ["name", "age"]

 

4、Object.values()

返回一个数组,成员是参数对象自身的所有可遍历属性的键值

var obj = { name: 'Leophen', age: 22 };
Object.values(obj)     //  ["Leophen", 22]

 

5、Object.entries()

返回一个数组,成员是参数对象自身的所有可遍历属性的键值对数组

var obj = { name: 'Leophen', age: 22 };
Object.entries(obj)    //  [ ["name", "Leophen"], ["age", 22] ]

 

6、Object.fromEntries()

Object.entries()的逆操作,用于将一个键值对数组转为对象

Object.fromEntries([ ["name", "Leophen"], ["age", 22] ])
//  { name: 'Leophen', age: 22 }

 

7、Object.setPrototypeOf()

作用与__proto__相同,用来设置一个对象的 prototype 对象,返回参数对象本身

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

举个例子

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40

上面代码将 proto 对象设为 obj 对象的原型,所以从 obj 对象可以读取 proto 对象的属性。

 

8、Object.getPrototypeOf()

该方法与 Object.setPrototypeOf 方法配套,用于读取一个对象的原型对象

const obj1 = {a: 1};
const obj = Object.create(obj1);

console.log(obj.__proto__ === Object.getPrototypeOf(obj));    // true

 

免责声明:文章转载自《ES6 对象的扩展》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇quartus 使用技巧[设置上拉、生成网表等]element动态校验下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

javabean与map互转

/*** 将一个 JavaBean 对象转化为一个 Map* @param bean 要转化的JavaBean 对象* @return 转化出来的 Map 对象* @throws Exception */ public static Map convertBean(Object bean){Map returnMap = new HashMap(); if...

YOLOv1

标题:《You Only Look Once: Unified, Real-Time Object Detection》 时间:2015 出版源:CVPR 2016 主要链接: arXiv:http://arxiv.org/abs/1506.02640 github(Official):https://github.com/pjreddie/darkne...

通过jpa getResultList 获取查询到的内容

String sql = "select * from spatial_event "; Query query =em.createNativeQuery(sql); //query.setParameter(1, email); //query.setParameter(2, id); List...

Java将任意类型的Object对象转换为相应的实体对象

通过com.fastxml.jackson的ObjectMapper对象进行转换: ObjectMapper objectMapper = new ObjectMapper();   objectMapper.convertValue(Object fromValue, Class<T> toValueType);...

[导入]C#实现WinForm窗口最小化到系统托盘

C#编写最小化时隐藏为任务栏图标的 Window appllication.   1.设置WinForm窗体属性showinTask=false 2.加notifyicon控件notifyIcon1,为控件notifyIcon1的属性Icon添加一个icon图标。 3.添加窗体最小化事件(首先需要添加事件引用): this.SizeChanged...

[C++]智能指针的实现与使用

智能指针 智能指针是当我们在使用对象时,有时会把对象的内存分配在堆上忘记释放,导致内存泄露,并且当多个指针共享同一个对象的内存时,容易出现重复释放内存,导致错误。 我们针对所需要共享的对象,手动完成一个智能指针类来代替该类别的指针,自动帮我们释放内存,共享内存。以一个共享Object类的对象数据来说明两个版本的共享指针的实现。 class Object...