ES6 对象增强

佚名 6年前 (2019-04-14) 随笔 1364人围观抢沙发百度已收录

　　对象字面量语法扩展：

　　1, 属性初始化语法简写：给一个属性赋一个变量值，如果变量名和属性名相同，可以省略变量名和冒号，直接写属性名，js引擎在执行代码的时候，自动查找和属性命名相同的变量并赋值。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

let x = 1, y = 2;
let object = { 
　　x, // 属性名是x，变量名也是x, 两者一致，可以简写
　　y 
};
console.log(object.x); //output "1"

　　2, 更为简洁的方法属性定义：ES5的时候，把一个函数赋值给属性的时候，函数必须是一个完整的函数定义

let object = {
    myFunction: function(){
        console.log("Hello World")  
    }  
}

　　但是在ES6中，可以把:function 这一部分去掉了，写法如下

let object = {
    myFunction(){
        console.log("Hello World")  
    }  
}

　　语法确实简洁多了，不过要注意一个特殊情况，只有给属性赋值的是匿名函数的时候，才可以使用简洁语法，如果赋值的是一个有名字的函数，那么就不能使用匿名函数了。如下情况就不能

let object = {
    myFunction: function hello(){
        console.log("Hello World")  
    }  
}

　　函数hello 赋值给属性myFunction, 你可能会问，为什么要给函数取一个hello 名字，最常见的一种情况是递归，自己调用自己，如果没有名字，怎么调用？还有就是程序debugger 的时候，有函数名字可以直接定位， you don't know js 的作者就强烈建议书写有名字的函数。

　　3, 计算属性名：ES5 的时候，对象字面量中的属性都是事先定义好的，不能使用变量，从而在程序运行的时候动态生成属性，但在ES6中，这种情况改变了，对象字面量中可以存在动态生成的属性，不过语法就要稍微变一下了，需要把动态属性用[] 包括起来，这样在程序运行的时候可以对[] 中的内容进行计算

let object = {
　　["first" + "Name"]: "Eden",
};

//extract
console.log(object["first" + "Name"]); //Output "Eden"

　　4，对重复属性名的处理：

　　新的方法

　　1, Object.is() 方法: 判断两个数是否相等。你可能有点差异，不是有 == 和 === 来判断相等了吗，怎么还需要判断相等的方法？不用担心，Object.is() 是用来处理极端情况的，比如NaN. NaN 和任何数都不相等，包含它本身，没有办法直接比较，现在就可以调用Object.is() 方法了，他就接受俩个要比较相等的参数。Object.is(NaN, NaN); 还有+0和-0，对于js 引擎来说，他们两个是不相等的，但是用== 和=== 做判断的时候，他们是相等的，为了解决这种问题，就可以使用Object.is(+0, -0)

console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false
 
console.log(Object.is(NaN, NaN)); // false

　　对于Object.is () 来说，你可能发现，我们几乎用不到它，它就是对=== 操作符在某些极端情况下的纠正，所以对于比较，我们还是用== 或===，平常怎么用就怎么用，只有碰到极端情况再用Object.is() 方法。

　　2， Object.assign(): 并不是新的方法，只是对各个框架中的mixin方法进行了标准化，既然各个框架中都实现了这个方法，那直接标准化就可以了。用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(target, ...sources)，target 目标对象，sources：源对象

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }