乐趣区

关于javascript:ES6六-Object

jiezi

Object

  • Object 属性能够简写吗？

    • 申明一个 object，key 和 value 一样能够省略
    • 下面的 key 必须是字符串，如果 key 外面要加动静变量（计算属性名）
    • 办法的简写
    • ES6 能够增加异步函数

  • 怎么把一个对象复制到另一个对象中？—— Object.assign()

    • 如果 source 和 target 有雷同属性
    • 如果 target 不是对象
    • 如何应用？
    • 解决什么问题？
    • 有点缺点？
  • 对象扩大办法 —— Object.is()
  • ES6-ES10 学习幅员

Object 属性能够简写吗？

申明一个 object，key 和 value 一样能够省略

//ES5 申明一个变量
let x = 1
let y = 3
let obj = {
    x: x,
    y: y
}

//ES6
let obj = {
    x,
    y
}

下面的 key 必须是字符串，如果 key 外面要加动静变量（计算属性名）

//ES5
let x = 1
let y = 3
let obj = {x: x}
obj[y] = 5
console.log(obj)
//{3: 5, x: 1}

//ES6
let x = 1
let y = 3
let z = 2
let obj = {
    x: x
    [y]: 6,
    [z + y]: 8
}
console.log(obj)
//{3: 6, x: 1, 5: 8}

办法的简写

//ES5
let obj = {
    x: 1,
    hello: function () {console.log('hello')
    }
}

//ES6
let obj = {
    x: 1,
    hello () { // 简写
        console.log('hello')
    }
}
obj.hello()

ES6 能够增加异步函数

let obj = {
    x: 1,
    * hello () { // 等同于 function * functionName() {}
        console.log('hello')
    }
}
obj.hello() //（输入为空）

怎么把一个对象复制到另一个对象中？—— Object.assign()

Object.assign(target, …sources)<br/>

<br/>
target 是指标对象 必选 <br/>
sources 是源对象 非必选 <br/>
此办法用域将所有可枚举属性的值从一个或多个源对象复制到指标对象，它将返回指标对象 (浅复制) <br/>

如果 source 和 target 有雷同属性

如果是 0 个源对象，则间接返回指标对象，如果对象有雷同的属性，那么源对象的属性会笼罩掉指标对象中的属性

const source1 = {
  a: 123,
  b: 123
}

const target = {
  a: 456,
  c: 456
}

const result = Object.assign(target, source1)
console.log(target)
// {a: 123, c: 456, b: 123}
console.log(target === result)
// true

如果 target 不是对象

如果 target 不是对象，则主动转换为对象

let t = Object.assign(2)
// Number {2}
let s = Object.assign(2, {a: 2})
// Number {2, a: 2}

如何应用？

如何将上面的 source 对象拷贝到 target 对象中呢？

const target = {}
const source = {b: 4, c: 5}

// ES5 把 souce 遍历一下，把外面的数据一一拷贝到 target 中
// 尽管原理简略，然而实际操作进去还是比拟麻烦的
// ES6
Object.assign(target, source)
console.log(source, 'source')

解决什么问题？

拷贝之后，如果要批改外面 name 的值，外界也会跟着批改

function func(obj) {
  obj.name = 'func obj'
  console.log(obj) // {name: 'func obj'}
}

const obj = {name: 'global obj'}

func(obj)
console.log(obj) // {name: 'func obj'}

防止这种状况，应用 assign 复制到一个新对象下面

function func(obj) {const funcObj = Object.assign({}, obj)
  funcObj.name = 'func obj'
  console.log(funcObj)  // {name: 'func obj'}
}

const obj = {name: 'global obj'}

func(obj)
console.log(obj) //   {name: 'global obj'}

有点缺点？

下面那个办法是有缺点的:<br/>
当赋值援用类型的值的时候，间接替换地址而不论外面的值

const target = {
    a: {
        b: {
            c: {d: 4}
        }
    },
    e: 5,
    f: 6,
    h: 10
}
const source = {
    a: {
        b: {
            c: {d: 1}
        }
    },
    e: 2,
    f: 3
}
Object.assign(target, source)
console.log(target)
/*
{
    a: {
        b: {
            c: {d: 1}
        }
    },
    e: 2,
    f: 3
}
*/
// 如果 target 是空对象或者和 source 对象严格格局雷同时进行了替换感觉没啥问题，然而下面的式子能够看进去，Object.assign 进行的是浅拷贝，当复制的是援用类型，那么会将地址整体进行替换。所以 h 并没有保留。

解决形式 ——> Object.assign + 递归

对象扩大办法 —— Object.is()

ES5 之前咱们判断两个变量相等应用的是 == 和===，两个等号在运算的时候，会先转换数据类型，所以会遇到 0 == false 为 true 的状况，而三等号除了比拟数值，还会比拟类型。

然而上面三个等号，也会呈现一些状况，应用 is 办法能够失去正确的后果。不过个别状况还是倡议应用三个等号。

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

学习幅员

退出移动版