对象标识符_ 增强的对象语法_ 对象解构

313 阅读3分钟

对象标识符_ 增强的对象语法_ 对象解构

1.对象标识及相等判定

​ === 全等这个符号在ES6里面堪称无敌。但是在ES6之前有些特殊情况 === 也无能为力。有些是符合 === 预期的

eg:

// === 符合预期
console.log(true === 1);
console.log({} === {});
console.log("2" === 2);
// false
// false
// false
// 这些情况在不同 JavaScript 引擎中表现不同,但仍被认为相等
console.log(+0 === -0);
console.log(+0 === 0);
console.log(-0 === 0);
// true
// true
// true
// 确定isNaN的相等性 必须使用isNaN
console.log(NaN === NaN);
console.log(isNaN(NaN));
// false
// true

​ 为了改善情况,ES6新增了Object.is(),这个方法和 === 很像。这个方法接收两个参数。

​ eg:

// Object.is()方法
console.log(Object.is(true,1));
console.log(Object.is({},{}));
console.log(Object.is("2", 2));
console.log(Object.is(NaN, NaN));
// false
// false
// false
// true

​ 感觉这个方法有点像 === isNaN等判断方法的集合。就是长了点。。这里就是提一下,表明有这个东西。用的话,现在用的很少我。

2.增强的对象语法

​ 写代码最怕啥,反正我最怕写长代码了。。。虽然有代码提升,但还是感觉难受,为此ES6,定义了许多操作对象极其有用的语法糖,极大的方便了书写。

2.1属性值简写

​ 简单来说,就是当对象中的 属性名和变量名一样的时候,我们可以只写属性名,连冒号都不用写。

eg:

// 1. 属性值简写
let name = "Matt";
// let person ={
//     name:name,
// }
// console.log(person);
let person ={
    name
};
console.log(person);

2.2 可计算属性

​ 在引入可计算属性之前,如果想使用变量的值作为属性,那么必须先声明对象,然后使用中括号语 法来添加属性。换句话说,不能在对象字面量中直接动态命名属性。

eg:

const nameKey = 'name'; 
const ageKey = 'age';
const jobKey = 'job'; 
let person = {}; 
person[nameKey] = 'Matt'; 
person[ageKey] = 27; 
person[jobKey] = 'Software engineer';
console.log(person);

​ 有了计算属性,就可以在对象字面量中完成动态属性的赋值

eg:

// 动态属性赋值
const nameKey = 'name'; 
const ageKey = 'age'; 
const jobKey = 'job'; 
let person = { 
 [nameKey]: 'Matt', 
 [ageKey]: 27, 
 [jobKey]: 'Software engineer' 
}; 
console.log(person);

2.3 简写方法名

​ 以前我们在对象字面量中定义方法 通常需要写一个方法名,冒号,再引用一个匿名函数。

eg:

let person ={
    sayName: function(){
        console.log("Hello");
    }
}
person.sayName();

这样写还是有点麻烦,新的简写方式则更为直接,方法名(形参列表){ }。学过其它语言的话,一看就明白了。

eg:

let person ={
    sayName(){
        console.log("Hello");
    }
}
person.sayName();

3.对象解构

​ 对象解构就是使用与对象匹配的解构来实现对象属性的赋值。首先我们来看看不使用对象解构。

eg:

// 不使用对象解构
let person = {
    name: 'Matt',
    age: 27
};
let personName = person.name,
    personAge = person.age;
console.log(personName); // Matt 
console.log(personAge); // 27 

使用对象解构

eg:

// 使用对象解构
let person = {
    name: 'Matt',
    age: 27
};
let { name: personName, age: personAge } = person;
console.log(personName); // Matt 
console.log(personAge); // 27 

在此基础上。我们还可以更进一步简化

eg:

let person = {
    name: 'Matt',
    age: 27
};
let { name, age } = person;
console.log(name); // Matt 
console.log(age); // 27 

​ 也可以再解构赋值的同时定义默认值,这适用于当引用的属性不存在的情况

eg:

let person = {
    name: 'Matt',
    age: 27
};
let { name, job = 'Software engineer' } = person;
console.log(name); // Matt 
console.log(job); // Software engineer