Object

作者: 第八共同体 | 来源:发表于2018-01-05 12:25 被阅读0次

    注:内容来自阮一峰老师的书 ECMAScript 6 入门

    1.属性的简洁表示

    const foo = 'bar';
    const baz = {foo};
    baz // {foo: "bar"}
    
    // 等同于
    const baz = {foo: foo};
    

    上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。
    除了属性简写,方法也可以简写。

    const o = {
      method() {
        return "Hello!";
      }
    };
    
    // 等同于
    
    const o = {
      method: function() {
        return "Hello!";
      }
    };
    

    注意,简洁写法的属性名总是字符串.
    如果某个方法的值是一个 Generator 函数,前面需要加上星号。

    const obj = {
      * m() {
        yield 'hello world';
      }
    };
    

    2.属性名表达式

    JavaScript 定义对象的属性,有两种方法。


    image.png

    注意,属性名表达式与简洁表示法,不能同时使用,会报错。属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object],这一点要特别小心。


    image.png

    3.方法的 name 属性

    函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。
    如果对象的方法使用了取值函数(getter)和存值函数(setter),则name属性不是在该方法上面,而是该方法的属性的描述对象的get和set属性上面,返回值是方法名前加上get和set。

    const obj = {
      get foo() {},
      set foo(x) {}
    };
    
    obj.foo.name
    // TypeError: Cannot read property 'name' of undefined
    
    const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
    
    descriptor.get.name // "get foo"
    descriptor.set.name // "set foo
    

    有两种特殊情况:bind方法创造的函数,name属性返回bound加上原函数的名字;Function构造函数创造的函数,name属性返回anonymous。如果对象的方法是一个 Symbol 值,那么name属性返回的是这个 Symbol 值的描述。

    4.Object.is()

    ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。

    ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

    Object.is('foo', 'foo')
    // true
    Object.is({}, {})
    // false
    

    不同之处只有两个:一是+0不等于-0,二是NaN等于自身。

    5.Object.assign()

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
    Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
    注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
    如果只有一个参数,Object.assign会直接返回该参数.
    如果该参数不是对象,则会先转成对象,然后返回。由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错.
    其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。这是因为只有字符串的包装对象,会产生可枚举属性。
    Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false),属性名为 Symbol 值的属性,也会被Object.assign拷贝.

    注意

    • 1.Object.assign方法实行的是浅拷贝,而不是深拷贝。
    • 2.对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。
    • 3.Object.assign可以用来处理数组,但是会把数组视为对象。
    • 4.Object.assign只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制

    用途:

    • 1.为对象添加属性
    • 2.为对象添加方法
    • 3.克隆对象
    • 4.合并多个对象
    • 5.为属性指定默认值

    6.属性的可枚举性和遍历

    ES6 一共有 5 种方法可以遍历对象的属性。
    (1)for...in
    for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
    (2)Object.keys(obj)
    Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
    (3)Object.getOwnPropertyNames(obj)
    Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
    (4)Object.getOwnPropertySymbols(obj)
    Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。
    (5)Reflect.ownKeys(obj)
    Reflect.ownKeys返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

    7.__proto__Object.setPrototypeOf() / Object.getPrototypeOf()

    __proto__属性(前后各两个下划线),用来读取或设置当前对象的prototype对象。
    Object.setPrototypeOf方法的作用与proto相同,用来设置一个对象的prototype对象,返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。/用于读取一个对象的原型对象。

    8.super 关键字

    我们知道,this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象。注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

    9.Object.keys(),Object.values(),Object.entries()

    ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。
    Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
    Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

    10.对象的扩展运算符

    对象的解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    x // 1
    y // 2
    z // { a: 3, b: 4 }
    

    由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。解构赋值必须是最后一个参数,否则会报错。
    注意,解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
    另外,扩展运算符的解构赋值,不能复制继承自原型对象的属性。

    11.Null 传导运算符

    编程中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在。比如,要读取message.body.user.firstName,安全的写法是写成下面这样。
    const firstName = message?.body?.user?.firstName || 'default';
    上面代码有三个?.运算符,只要其中一个返回null或undefined,就不再往下运算,而是返回undefined。

    相关文章

      网友评论

          本文标题:Object

          本文链接:https://www.haomeiwen.com/subject/yagjnxtx.html