频道栏目
首页 > 资讯 > HTML/CSS > 正文

ECMAScript6标准之对象Object扩展方法及新特性

16-12-22        来源:[db:作者]  
收藏   我要投稿

ES6对于Object也扩增了几个方法
不过最重要的是
ES6扩展了一些语法
比如说允许直接写入变量和函数,作为对象的属性和方法
使我们的对象更加简洁
下面我就来详细说明一下

语法扩展

简写对象属性

let name = 'payen';
let obj = {
    name,
    age: 19
}
console.log(obj);
//{"name":"payen","age":19}

从这个例子可以看出省略属性值的属性
它的值就是变量对应的值


比如说我的函数想要返回一个对象
对象的属性与参数同名
那么现在我们就可以这样写

let a = 1,
    b = 2;
function foo(a, b){
    return {a, b};
}
console.log(foo(a, b));
//{a: 1, b: 2}

这个函数就等价于

function foo(a, b){
    return {a: a, b: b};
}

简写对象方法

现在除了属性可以简写,方法也可以简写了
看这里

let person = {
    say(){
        console.log("hello world~");
    }
}
person.say(); //hello world~

没错这也可以输出
它就是下面这种形式的简写

let person = {
    say: function(){
        console.log("hello world~");
    }
}

把“:”和“function”去掉就可以了

添加对象属性

let person = {};

在ES6之前我们要想向对象中添加属性
我们只能这么写,利用标识符

person.name = 'payen';

但是强大的ES6允许我们使用表达式作为属性

person['a'+'g'+'e'] = 19;

我们还可以这样用

let attr1 = 'name',
    attr2 = 'age',
    attr3 = 'sex';
let person = {
    [attr1]: 'payen',
    [attr2]: 19,
    [attr3]: 'male'
}
console.log(person);
//{name: "payen", age: 19, sex: "male"}

使用“[ ]”可以让变量所代表的值作为对象的属性

方法扩展

同值相等Object.is()

这个静态方法用于比较两个值是否严格相等
大家可能要问了,严格相等使用“===”不就得了
不是的
这个方法是 真·严格相等
“===”与“==”都是有缺点的
“==”发生类型转换大家都知道
而“===”

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

ES6提出了“Same-value equality”(同值相等)算法
用来解决这个问题
Object.is()就是部署这个算法的新方法

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

对象合并Object.assign()

这个方法用于合并对象,注意还是浅拷贝

let obj = {
    name1: 'foo'
};
let obj1 = {
    name2: 'bar'
};
let obj2 = {
    name3: 'baz'
};
Object.assign(obj,obj1,obj2);
console.log(obj);
//{name1: "foo", name2: "bar", name3: "baz"}

obj1和obj2中的键和值均被拷贝到了obj对象中
当然了,被拷贝的对象内部是不变的
参数没有限制
第一个参数就是被拷入的对象


还有一点要注意,如果出现了同名属性
这个方法的处理是覆盖

let target = {
    name: 'a'
};
let source = {
    name: 'b'
};
Object.assign(target, source);
console.log(target);
//{name: "b"}

==主页传送门==

相关TAG标签
上一篇:总结:JavaScript中两个值进行比较需要遵循的原则
下一篇:利用面向对象的思路在canvas中为图片添加飘雪效果
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站