对象的新增方法----ES6重刷10

在这里我会写些自己认为ES6此书中常用的对象方法及注意事项

一、Object.assign(target, source)
作用：将所有可枚举属性的值从一个或多个源对象【source】复制到目标对象【target】。
target：可以是对象也可以是数组
source：可以是对象、数组、字符串【允许多个】

基本用法

const obj1 = {
  a: 'a',
}
const obj2 = {
  b: 'b',
}
// 情况一
console.log(Object.assign({}, {...obj1, ...obj2} )) // {a: "a", b: "b"} source可以为一个
console.log(Object.assign({}, obj1, obj2 )) // {a: "a", b: "b"} source也可以为多个
// 情况二
console.log(Object.assign({}, ['a'] )) // {0: "a"}
// 情况三
console.log(Object.assign({}, 'a' )) // {0: "a"}
// 情况四
console.log(Object.assign([], obj1, obj2)) // [a: "a", b: "b"]类map数据结构
// 情况五
console.log(Object.assign([], ['a'])) // ["a"]
// 情况六
console.log(Object.assign([], 'a')) // ["a"]

注意事项
1、在作用于数组或则对象的拷贝复制时
数据源source中，若其内部子元素或则属性值为基本类型时，Object.assign()的拷贝为深拷贝；若其内部存在引用类型的子元素或则属性值时，Object.assign()的拷贝为浅拷贝。

let obj = {
  a: 'a',
  b: 'b',
  c: {
    foo: 'foo',
  },
}
let arr = ['a', 'b', ['c', 'd']]
const copyObj = Object.assign({}, obj)
const copyArr = Object.assign([], arr)
obj.c.foo = 'onchange'
arr[2] = Object.assign(arr[2], ['3', '4'])
console.log(copyObj) // {a: "a", b: "b", c: {foo: "onchange"}}
console.log(copyArr) // ["a", "b", ["3", "4"]]

2、source的赋值存在替换规则

let obj = {
  a: 'a',
  b: 'b',
}
let arr = ['a', 'b']
const copyObj = Object.assign({a: 'A', b: 'B'}, obj)
const copyArr = Object.assign([1, 2], arr)
console.log(copyObj) // {a: "a", b: "b"}
console.log(copyArr) // ["a", "b"]

适用场景
1、为对象添加属性

Object.assign({}, {newAttr: 'newAttr'})

2、为对象添加方法

Object.assign({}, {method() {} })

3、克隆对象或则数组【注意：其上述的注意事项一】

let obj = {
  a: 'a',
  b: 'b',
}
let arr = ['a', 'b']
const copyObj = Object.assign({}, obj)
const copyArr = Object.assign([], arr)
console.log(copyObj) // {a: "a", b: "b"}
console.log(copyArr) // ["a", "b"]

4、合并多个对象【建议使用扩展运算符进行合并，只是单纯的个人喜好】

Object.assign({}, obj1, obj2)

二、Object.defineProperty(objectName, attrName, config…)
作用：重新定义某个属性的属性特性
适用场景：为对象的某些特定属性修改原先的属性特性，比如可枚举性，可重写性，可配置性
注意事项：所对应的attrName的configurable必须为true，否则报错

三、Object.prototype.hasOwnProperty(attrName)
作用：判断目标对象是否具有此属性名，返回值为boolean型
适用场景：检测目标对象是否具有此属性名

const obj = {
  a: 'a',
  b: 'b',
}
console.log(obj.hasOwnProperty('a')) // true

四、Object.is(arg1, arg2)
作用：比较两个值（对象）是否严格相等，返回值为boolean型
适用场景：判断两个值是否严格相等，包括可以比较NAN与NAN，+0与-0

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

五、Object.keys()、Object.values()、Object.entries()、Object.fromEntries()
捆绑原因：因为这四个是对对象的键值对配套的操作方法
Object.keys()：以数组形式返回键名
Object.values()：以数组形式返回键值
Object.entries()：以map形式返回键值对
Object.fromEntries()：将map形式数据转化为对象

const { keys, values, entries, fromEntries } = Object
const obj = {
  a: 'value_a',
  b: 'value_b',
}
const mapStruct = entries(obj)
console.log(keys(obj)) // ["a", "b"]
console.log(values(obj)) // ["value_a", "value_b"]
console.log(mapStruct) // [["a", "value_a"], ["b", "value_b"]] map数据结构
console.log(fromEntries(mapStruct)) // {a: "value_a", b: "value_b"}

详细mdn文档