乐趣区

关于es6:ES6对象的扩展

jiezi

属性的简洁表示法

咱们晓得对象是由键值对组成的，在 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/

退出移动版