美文网首页
ES6--对象扩展

ES6--对象扩展

作者: bjhu电net | 来源:发表于2017-09-21 12:50 被阅读0次

简洁表示法

{
    //简洁表示法
    let o=1;
    let k=2;
    let es5={
        o:o,
        k:k
    }
    let es6={
        o,k
    }
    console.log(es5,es6)
    //{o: 1, k: 2} {o: 1, k: 2}

    let es5_m={
        hello:function(){
            console.log("hello")
        }
    }
    let es6_m={
        hello(){
            console.log('world')
        }
    }
    console.log(es5_m.hello(),es6_m.hello())
    //hello world

}

在对象中如果有函数,es6中采用简洁表示,a(c){},如果在es6中定义一个函数,那么采用箭头函数let a=(c)=>{}

属性表达式

{
    //属性表达式
    let a='b';
    let es5_o={
        a:'c'
    }
    let es6_o={
        [a]:'c'//[a]的值是b
    }
    console.log(es5_o,es6_o[a])
    //{a: "c"} {b: "c"}
}

在属性表达式中,es6可以采用变量的方式去定义key值,es5中的key值只能是固定的,在对象调用key值的时候,es6如果想采用key值,那么采取中括号的方式[],.的方式不能得到变量。

方法的name属性

函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

新增api

Object.is()
用来判断两个对象是否相等,在es5中NaN和NaN不相等,用这个方法相等。

{
    //新增api
    console.log(Object.is('abc','abc'))
    //true
    console.log(Object.is([1],[1]))
    //false数组是引用类型,地址不一样,is()的功能和三个等号功能差不多
}

Object.assign()
方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
简单的来说就是,在有指针的情况下,浅拷贝只是增加了一个指针指向已经存在的内存,而深拷贝就是增加一个指针并且申请一个新的内存,使这个增加的指针指向这个新的内存,采用深拷贝的情况下,释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误!

Object.assign(target, ...sources)

{
    console.log(Object.assign({a:"a"},{b:"b"}))
    //{a: "a", b: "b"}只能是浅拷贝,即引用地址不会改变。
}
function test() {
  let a = { b: {c:4} , d: { e: {f:1}} }
  let g = Object.assign({},a)
  let h = JSON.parse(JSON.stringify(a));
  console.log(g.d) // { e: { f: 1 } }
  g.d.e = 32
  console.log('g.d.e set to 32.') // g.d.e set to 32.
  console.log(g) // { b: { c: 4 }, d: { e: 32 } }
  console.log(a) // { b: { c: 4 }, d: { e: 32 } }
  console.log(h) // { b: { c: 4 }, d: { e: { f: 1 } } }
  h.d.e = 54
  console.log('h.d.e set to 54.') // h.d.e set to 54.
  console.log(g) // { b: { c: 4 }, d: { e: 32 } }
  console.log(a) // { b: { c: 4 }, d: { e: 32 } }
  console.log(h) // { b: { c: 4 }, d: { e: 54 } }
}
test();

Object.entries()

{
    let test={k:123,o:456};
    for(let [key,value] of Object.entries(test)){
        console.log(key,value)
    }
}

proto属性,Object.setPrototypeOf(),Object.getPrototypeOf()

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

// 格式
Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

super关键字

this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象

const proto = {
  foo: 'hello'
};

const obj = {
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

上面代码中,对象obj的find方法之中,通过super.foo引用了原型对象proto的foo属性。

注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

扩展运算符,支持不好

{
    //扩展运算符
    let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:"ccc"};
    c={
        c:"ddd",
        d:"ccc"
    }
}

相关文章

  • ES6--对象扩展

    简洁表示法 在对象中如果有函数,es6中采用简洁表示,a(c){},如果在es6中定义一个函数,那么采用箭头函数l...

  • ES6--对象的扩展

    属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 上面代码表明,ES6允...

  • es6--扩展对象的方法

    es6允许直接写入变量和函数,作为对象的属性和方法 对象提供扩展对象的方法 is assign is:表示两个值是...

  • ES6--(4)扩展的对象功能

    对象类别 普通对象:拥有 JS 对象所有默认的内部行为。 奇异对象:其内部行为在某些方面有别于默认行为。 标准对象...

  • ES6--函数扩展

    函数新增特性 函数默认值,rest参数,扩展运算符,箭头函数,this绑定,尾调用 函数参数的默认值 rest参数...

  • es6--数值扩展

    在es6中,二进制用0b表示,例如'0b1022221';八进制用0o表示;不区分大小写。 一些数值方法 Numb...

  • ES6--数组扩展

    1.Array.of() Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型...

  • 深入理解ES6--解构

    深入理解ES6--解构

  • ES6--函数的扩展

    函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 上面代码检查函数l...

  • ES6--数组的扩展

    Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-lik...

网友评论

      本文标题:ES6--对象扩展

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