ES6 对象的扩展

属性的简洁表示法

我们知道对象是由键值对组成的，在 ES6 中允许在对象的大括号内直接写入变量和函数，此时属性名是变量名，属性值是变量值。

示例：

例如我们定义两个变量 name 和 age，将这两个变量赋值给对象 person ：

const name = "xkd";
const age = 3;
const person = {name: name,age: age}
console.log(person);

可以简写为：

const person = {name, age};   // 简写

然后我们输出 person 对象，输出内容如下所示：

{ name: 'xkd', age: 3 }

方法名简写

除了属性，方法也可以简写，例如我们看下面这段代码：

const content = {
    show:function(){
      console.log("你好，侠课岛!");
    }
};
content.show();  // 输出：你好，侠课岛!

我们可以简写成：

const content = {
    show() {
      console.log("你好，侠课岛!");
    }
};
content.show();  // 输出：你好，侠课岛!

这种写法用于函数的返回值，将会非常方便。

function show() {
    const a = 10;
    const b = 20;
    return {a, b};
}
console.log(show());  // 输出：{ a: 10, b: 20 }

属性名表达式

ES6 允许用表达式作为属性名，但是要注意一定要将表达式放在方括号内。

示例：

例如下面这段代码：

const obj = {};
obj.obj = 123;  

console.log(obj);  
// 输出：{ abc: 123 }

上述代码中我们直接用标识符作为属性名，如果我们想要使用表达式作为属性名，则需要将表达式放在方括号之内，例如：

const obj = {};
obj['a' + 'bc'] = 123;  // 等同于：obj[abc] = 123;

console.log(obj);  
// 输出：{ abc: 123 }

其中 ['a' + 'bc'] 就是一个表达式，作为 obj 对象的键值。

除了将表达式用作属性，表达式也可以用作函数名，同样使用中括号 [] 包围，例如：

const obj = {
    ["sho"+"w"](){
      console.log("你好，侠课岛！");
     }
}
obj.show();     
// 输出：你好，侠课岛！

函数的name属性

函数的 name 属性，可以用于返回函数的函数名，对象方法也是函数，因此也有 name 属性。

示例：

获取 xkd 对象中 show() 函数的函数名：

const xkd = {
    show() {
        console.log('你好，侠课岛！');
    },
};
console.log(xkd.show.name); // 获取函数的函数名

// 输出：show

如果对象的方法使用了取值函数getter 和存值函数 setter，则 name 属性不在这两个方法上面，而是该方法的属性的描述对象的 get 和 set 属性上面，返回值是方法名前加上 get 和 set 。

示例：

例如下面这个例子：

const xkd = {
    get show() {},
    set show(x) {}
};
const descriptor = Object.getOwnPropertyDescriptor(xkd, 'show');
  
console.log(descriptor.get.name);  // 输出：get show
console.log(descriptor.set.name);  // 输出：set show

对象的拓展运算符

对象的拓展运算符 ... 可以用于取出参数对象中所有可遍历属性，然后拷贝到当前对象之中。

复制对象

在 ES6 中我们可以通过扩展运算符来复制对象。

示例：

例如将对象 person 中的可遍历属性拷贝到对象 new_person 中：

let person = { name: 'xkd', hobby: 'swimming'};
let new_person = { ...person };
console.log(new_person); 
// 输出：{ name: 'xkd', hobby: 'swimming' }

合并对象

对象的拓展运算符还可以用于合并对象。

示例：

例如我们合并对象 obj1 和 obj2：

let obj = { a: 1, b: 2};
let obj1 = { a: 1, b: 2};
let obj2 = { c: 3, d: 4};
let obj3 = { ...obj1, ...obj2};
console.log(obj3);  
// 输出：{ a: 1, b: 2, c: 3, d: 4 }

自定义属性

当自定义的属性和拓展运算符对象里面属性的相同的时候，有两种情况：

  • 第一种，自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被自定义属性覆盖。
示例：
let obj1 = {name: "xkd", age: 18};
let obj2 = { ...obj1, name: "summer", age: 20};
console.log(obj2); 
// 输出：{ name: 'summer', age: 20 }

上述代码中，可以看到，obj2 对象中自定义的属性覆盖了扩展运算符对象中的属性。

  • 第二种，自定义的属性在拓展运算符对象前面，则自定义属性被拓展运算符对象覆盖。
示例：
let obj1 = {name: "xkd", age: 18};
let obj2 = { name: "summer", age: 20, ...obj1};
console.log(obj2); 
// 输出：{ name: 'xkd', age: 18 }

上述代码中，obj1 中的属性覆盖了 obj2 中的自定义属性。

如果扩展运算符后面是一个空对象，则没有任何效果也不会报错。

示例：
let obj = {...{}, name: 'xkd', age: 19};
console.log(obj);  
// 输出：{ name: 'xkd', age: 19 }

如果扩展运算符后面不是对象，则会自动将其转为对象。

示例：
let obj = {...1, ...null, ...undefined, ...true};
console.log(obj); // {}

其中 ...1 就等同于 {...Object(1)}， ...null 等同于 {...Object(null)} 、undefined、true 也是如此。而由于这些对象没有自身属性，所以返回一个空对象。

对象属性的遍历

ES6 中一共提供了 5 种遍历对象属性的方法，我们来看一下。

  • for...in：遍历对象自身的和继承的可枚举属性，不含 Symbol。
示例：
let obj = {one:100, two:200, three:300};
for ( n in obj) {
    console.log(n);
}

输出内容如下所示：

one
two
three
  • Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol）的键名。
示例：
let obj = {one:100, two:200, three:300};
console.log(Object.keys(obj)); 
// 输出：[ 'one', 'two', 'three' ]
  • Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有（不可枚举属性）属性（不含Symbol）的键名。
示例：
let obj = {one:100, two:200, three:300};
console.log(Object.getOwnPropertyNames(obj)); 
// 输出：[ 'one', 'two', 'three' ]
  • Object.getOwnPropertySymbols(obj)：返回一个数组，对象自身的所有 Symbol属性的键名。
示例：
let obj = {one:100, two:200, three:300, [Symbol()]:400};
console.log(Object.getOwnPropertySymbols(obj)); 
// 输出：[ Symbol() ]
  • Reflect.ownKeys：返回一个数组，包含对象自身的所有键名。
示例：
let obj = {one:100, two:200, three:300, [Symbol()]:400};
console.log(Reflect.ownKeys(obj)); 
// 输出：[ 'one', 'two', 'three', Symbol() ]

可枚举性（enumerable）

对象的每一个属性都有一个描述对象，用来控制该属性的行为。

Object.getOwnpropertyDescriptor 方法可以获取该属性的描述对象， 返回所有自身属性(非继承属性)的描述对象。

描述对象的 enumerable 属性，称为可枚举性，如果该属性为 false，则表示某些操作会忽略当前属性。 下面是可能会忽略属性为 false 的四种操作情况：

  • for...in：只遍历对象自身的和继承的可枚举的属性。
  • Object.keys()：返回对象自身的所有可枚举的属性和键名。
  • JSON.stringify()：只转换对象自身的可枚举的属性。
  • Object.assign()：忽略 enumerable为false的属性，只拷贝对象自身的可枚举的属性。
示例：

对象可枚举属性合并，后面的属性会覆盖前面的属性，隐式转换。

let obj = { xkd: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'xkd'));

// 输出：{ value: 123, writable: true, enumerable: true, configurable: true }

super关键字

this 关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字 super，指向当前对象的原型对象。

示例：
const proto = {
    xkd: 'New'
};
const obj = {
    xkd: 'version',
    change() {
        return super.xkd;
    }
};
obj.__proto__ = proto;
console.log(obj.change());  // 输出：New

对象 obj 在 change 方法之中，通过 super.xkd 引用了原型对象 proto 的 xkd 属性。

解构赋值

解构不仅可以用于数组同时还可以用于对象，对象的解构和数组的不同之处在于：数组的元素是按次序排列的，变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名才能正确取值。

示例：
let { x, y, ...z } = {x: 1, y: 2, a: 100, b: 200, c:300};
console.log(x);  // 输出：1
console.log(y);  // 输出：2
console.log(z);  // 输出：{ a: 100, b: 200, c: 300 }

对象新增方法

Object.is方法

Object.is 方法用来比较两个值是否严格相等，类似于 ===，返回一个布尔值，相等则返回 true，不相等则返回 false。

示例：
console.log(Object.is("q","q"));     // 输出：true
console.log(Object.is(1,1));         // 输出：true
console.log(Object.is([1],[1]));     // 输出：false
console.log(Object.is({q:1},{q:1})); // 输出：false

object.assign方法

object.assign() 用于将源对象的所有可枚举属性复制到目标对象中。第一个参数是目标对象，后面的参数都是源对象。

示例：
let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3};
Object.assign(obj1, obj2, obj3)
console.log(obj1); 
// 输出：{ a: 1, b: 2, c: 3 }

如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性：

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3, a:100};
Object.assign(obj1, obj2, obj3)
console.log(obj1); 
// 输出：{ a: 100, b: 2, c: 3 }

如果该函数只有一个参数，当参数为对象时，直接返回该对象。当参数不是对象时，会先将参数转为对象然后返回：

console.log(Object.assign(3));     // 输出：[Number: 3]
console.log(Object.assign({a:1})); // 输出：{ a: 1 }

链接：https://www.9xkd.com/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270