JavaScript对象扩展(Object.is(), assign(), 对象遍历keys, es6原型介绍)

转载 2018年04月17日 16:45:13

对象创建新方法

ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 
上面代码表明,ES6允许在对象之中,只写属性名,不写属性值。这时,属性值等于属性名所代表的变量。

//例1:
    var foo = 'bar';
    var baz1 = {foo};
    console.log(baz1);// Object {foo: "bar"};
    var baz2 = {foo:'bar2'};
    console.log(baz2)// Object {foo: "bar2"}

//例2:
    function f1(x,y) {
        return {x,y}  ;
    }    
    function f2(x,y) {
        return {x:x,y:y};
    }    
    console.log(f1(1,2));// Object {x: 1, y: 2}
    console.log(f2(1,2));// Object {x: 1, y: 2}

//例3:
    //下面这两个对象是相同的
    var o1 = {
        method() {//ES6可以这样直接写一个函数
            return 'hello!';
        }
    }
    var o2 = {
        method: function () {
            return 'hello!'
        }
    }
    console.log(o1.method());//hello
    console.log(o2.method());//hello
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

Object.is()

ES5比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。 
JavaScript缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。 
ES6提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

//例: 
    console.log(+0 === -0);//true
    console.log(NaN === NaN);//false
    console.log(Object.is(+0, -0));//false
    console.log(Object.is(NaN,NaN));//true
  • 1
  • 2
  • 3
  • 4
  • 5

Object.assign(); 对象拷贝(浅拷贝)

//例

    var target = {a:1};
    var source1 = {b:2};
    var source2 = {c:3};
    Object.assign(target,source1,source2);
    console.log(target);//Object {a: 1, b: 2, c: 3}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

注意: 对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。

//例
    var target = { a: { b: 'c', d: 'e' } };
    var source = { a: { b: 'hello' } };
    Object.assign(target, source);
    console.log(target);// { a: { b: 'hello' } };
  • 1
  • 2
  • 3
  • 4
  • 5

对象遍历 Object.keys Object.values Object.entries

    //ES5引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
    //Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
    //Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
    var obj = { foo: "bar", baz: 42 };
    Object.keys(obj)
    // ["foo", "baz"]

    var obj = { foo: "bar", baz: 42 };
    Object.values(obj)
    // ["bar", 42]    


    var obj = { foo: 'bar', baz: 42 };
    Object.entries(obj)
    // [ ["foo", "bar"], ["baz", 42] ]二维数组
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Object.setPrototypeOf(),Object.getPrototypeOf()

_ _ proto _ _属性(前后各两个下划线),用来读取或设置当前对象的prototype对象

该属性没有写入 ES6 的正文,而是写入了附录,原因是_ _ proto _ _前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6。标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。

//例:
var obj = {
    a:1
}
var obj2 = {
    b:2
}
obj1.__proto__ = obj2;
console.log(obj1.b);// 2

等同于下面这种方法.

Object.setPrototypeOf(obj1, obj2);
console.log(obj1.b);// 2


console.log(Object.getPrototypeOf(obj1));//Object b

本文转载自:

C_Kite

https://blog.csdn.net/c_kite/article/details/72598904
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

es6 javascript对象方法Object.assign()

1  基本用法Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。var target = { a: 1 }; var so...
  • qq_30100043
  • qq_30100043
  • 2016-12-01 16:42:34
  • 29997

es6 javascript对象的扩展运算符

目前, ES7 有一个提案,将 Rest 解构赋值 / 扩展运算符( ... )引入对象。 Babel 转码器已经支持这项功能。( 1 ) Rest 解构赋值对象的 Rest 解构赋值用于从一个对象取...
  • qq_30100043
  • qq_30100043
  • 2016-12-01 18:30:55
  • 4664

es6 javascript属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。( 1 ) for...infor...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。( 2 ) Object.keys(obj)...
  • qq_30100043
  • qq_30100043
  • 2016-12-01 17:10:33
  • 2471

自学-ES6篇-对象的扩展

1、属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 var foo = 'bar'; var baz = {foo}; baz // {foo: "bar...
  • wh814071912
  • wh814071912
  • 2016-10-07 20:11:10
  • 7416

es6 javascript对象Object.values() , Object.entries()

1 Object.keys()ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。var obj = { foo...
  • qq_30100043
  • qq_30100043
  • 2016-12-01 18:07:30
  • 14763

ES6---全新的对象object

在JavaScript中,对象是一个很重要的概念,开发过程中,我们肯定离不开对象的。ES6追求高效、简洁,这次标准制定也为对象带来了很大的福利……●ES6中对象属性://////es5中定义对象属性要...
  • Wbiokr
  • Wbiokr
  • 2017-03-27 22:14:15
  • 1900

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

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

【笔记】【MDN】JavaScript指南 > 语法和数据类型

【笔记】JavaScript指南 > 语法和数据类型声明
  • sinat_22014829
  • sinat_22014829
  • 2017-07-13 18:54:15
  • 121

通过原型扩展对象

原型对象 系统默认自动为js函数生成空的原型(prototype)对象。如果某个函数是类的构造函数,那么它的原型对象可以被用来对类进行扩展。 当给构造函数的prototype属性赋值时,...
  • u011535387
  • u011535387
  • 2016-03-25 17:06:44
  • 273

20、ES6 属性的遍历 一共有 5 种方法可以遍历对象的属性

属性的遍历 ES6 一共有 5 种方法可以遍历对象的属性。 (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。 (2)Object....
  • qq_36685875
  • qq_36685875
  • 2017-12-24 18:42:00
  • 2112
收藏助手
不良信息举报
您举报文章:JavaScript对象扩展(Object.is(), assign(), 对象遍历keys, es6原型介绍)
举报原因:
原因补充:

(最多只允许输入30个字)