ES6和ES8之对象的新特性及新增⽅法

介绍ES6提供的新的特性及对象⽅法
扩展运算符的使⽤:
(1)复制对象
(2)给对象设置默认值
(3)合并对象

属性初始化的简写

对象⽅法的简写

可计算的属性名

新增⽅法:
Object.is
Object.assign
Object.keys
Object.values
Object.entries

{
    //对象中扩展运算符的使用

    //复制对象   这里需要安装扩展运算符插件  cnpm install babel-plugin-transform-object-rest-spread
    const obj = { name: 'Nick', video: 'es6'}
    const initObj = { color: 'red'}
    let vodeoObj = { ...obj }
    console.log(vodeoObj)

    //设置对象默认值
    let obj2 = { ...obj , name: 'jeck'}
    console.log(obj2)

    //合并对象
    let obj3 = { ...obj, ...initObj}
    console.log(obj3)

    //坑点
    //简单类型的时候,使用扩展运算符是没问题的,但是如果扩展运算符展开对象以后,还是对象的话,我们复制的只是一个指针

}

{
    //属性初始化的简写 和 对象⽅法的简写
    let name = '小明'
    let age = 18
    let es5Obj = {
        name: name,
        age: age,
        sayHello:function(){
            console.log('this is es5Obj')
        }
    }
    let es6Obj ={
        name,
        age,
        sayHello(){
            console.log('this is es6Obj')
        }
    }

    console.log('es5',es5Obj)
    console.log('es6',es6Obj)
    es5Obj.sayHello()
    es6Obj.sayHello()
}

{
    //可计算的属性名
    let key = 'name'
    let es5Obj = {}
    es5Obj[key] = 'Tom'

    let es6Obj = {
        [key]:'jeck'
    }

    console.log(es5Obj , es6Obj)
}

{
    //新增⽅法
    
    //Object.is() 和 '==='
    let result = Object.is(NaN,NaN)
    console.log(result)
    console.log(NaN===NaN)


    //Object.assign()
    const preson = { name:'小米', age:'18', info:{ height:'180cm'}}
    let preson2 = {}
    Object.assign(preson2,preson)
    //console.log(preson2)
    preson.info.height = '170cm'
    console.log(preson2)
    //这里的全复制   复制的是指针


    //Array.from 类数组对象 有length 可遍历
    const str = 'hello'
    const strList = Array.from(str)
    console.log(strList)


    //Object.keys()  Object.values()  Object.entries()
    const json = { name:'Nick', video:'ES6', date:2019 }
    let obj = {}
    // for ( const key of Object.keys(json)){
    //     obj[key] = json[key]
    // }
    // console.log(obj)

    for (const value of Object.values(json)){
        obj = value
        console.log(obj)
    }


}

效果图:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值