JS操作对象

对象操作

创建对象

1. 字面量创建

let obj = {
  name: 'zs',
  age: '20',
}

2. 构造函数创建

let obj = new Object() // 创建一个空对象

设置属性

obj.name = 'zs' // 点语法设置属性
obj['age'] = 20 // 数组关联语法设置属性
// [注意]数组关联语法中使用变量名需要加引号，不加引号会当作变量来解析

查询属性

obj.age // 点语法查询属性
obj['age'] // 数组关联语法查询属性

点语法和数组关联语法的区别

点语法只能使用属性名
数组关联语法可以传入属性名，也可以传入一个变量代替属性名
数组关联语法更加灵活：当查询的属性不固定时，需要使用变量代理属性名，通过给变量赋值来动态查询对象属性 7

属性分类

obj = {
  name: 'zs',
  age: 20,
  person: {
    eye: 2,
    mouth: 1,
  },
}

1. 自有属性 name,age 为自有属性
2. 继承属性 toString 为继承自 Object 的继承属性
3. 可枚举属性 name,age,person 是可枚举属性（可以用 for in 循环遍历出来）
4. 不可枚举属性 toSrting 是不可枚举属性（toString 属性是 Object 的内置属性，一般内置属性都是不可枚举的）

属性类型检测

"x" in obj 检测自有属性和继承属性

'name' in obj // true
'toString' in obj // true

obj.hasOwnProperty('') 检测自有属性

obj.hasOwnProperty('name') // true
obj.hasOwnProperty('toSrting') // false

obj.propertyIsEnumerable('') 检测自有且可枚举的属性

obj.propertyIsEnumerable('name') // true
obj.propertyIsEnumerable('toString') // false

扩展对象方法

1. Object.assign()方法
   接收多个对象作为参数，第一个对象是目标对象，该方法会将第二个及后续的对象合并到目标对象，并返回目标对象
   目标对象会被修改，第二个及后续的对象不会被修改
   注意：如果多个对象包含相同属性，后面的对象的属性值会覆盖前面对象的属性值
2. ...扩展运算符
   {...obj1,...obj2,...obj3} 该表达式将三个对象的属性和属性值复制到一个新的对象中，原对象不会被改变
   注意：如果多个对象包含相同属性，后面的对象的属性值会覆盖前面对象的属性值

序列化对象（将对象转为字符串）

1. 对象转为字符串

obj = { name: 'aaa', age: 11 }
jsonString = JSON.stringify(obj)
console.log(jsonString) // '{"name":"aaa","age":11}'

2. 字符串转为对象

obj2 = JSON.parse(jsonString)
console.log(obj2) // {name: 'aaa', age: 11}

对象的 toString 方法

对象默认会继承 Object 的 toString 方法，得到的字符串不会包含对象的具体信息

obj = { name: 'aaa', age: 11 }
objstr = obj.toString()
console.log(objstr) // '[object Object]'

很多类都会自己定义 toString 方法,如 Number 类的 toString 方法会返回数字的字符串格式

num = 11.22 // 11.22
num.toString() // '11.22'

自定义 object toString()方法

// 自定义toString方法
let person = {
  name: 'zs',
  age: 20,
  date: new Date(),
  say: function () {
    console.log('我是zs')
  },
  toString: function () {
    let objAtt = Object.keys(this)
    objAtt = objAtt.map((item) => '"' + item + '"' + ':"' + this[item] + '"')
    let objStr = objAtt.join(',')
    objStr = '{' + objStr + '}'
    return objStr
  },
}
// JSON.stringify 对象转字符串
let jsonStr = JSON.stringify(person)
console.log(jsonStr) // {"name":"zs","age":20,"date":"2022-04-02T03:06:24.848Z"}
// 自定义同String方法 对象转字符串
let objToString = person.toString()
console.log(objToString)
// {"name":"zs","age":"20","date":"Sat Apr 02 2022 11:06:24 GMT+0800 (中国标准时间)","say":"function (){
//         console.log('我是zs')
//     }","toString":"function(){
//         let objAtt=Object.keys(this)
//         objAtt = objAtt.map(item=>'"'+item+'"'+':"'+this[item]+'"')
//         let objStr=objAtt.join(',')
//         objStr='{'+objStr+'}'
//         return objStr
//     }"}

对象的 toLocalString()

对象转为本地化字符串
Object 本身的 toLocalString()方法与 toSting()方法相同
Date 和 Number 类定义了自己的 toLocalString()方法

obj = { name: 'aaa', age: 11 }
obj.toLocaleString() // '[object Object]'
date = new Date()
date.toLocaleString() // '2022/4/2 10:03:31'
date.toLocaleDateString() // '2022/4/2'
date.toLocaleTimeString() // '10:03:31'

对象的 valueOf()方法

对象转为非字符串的原始值（通常为数值）
可以理解为 toString()方法返回字符串，valueOf()方法返回数字值
一些内置类定义了自己的 valueOf()方法，Data 的 valueOf()方法会将时间字符串转为时间戳

obj = { name: 'aaa', age: 11 }
obj.valueOf() // {name: 'aaa', age: 11}
date = new Date() // Sat Apr 02 2022 10:03:31 GMT+0800 (中国标准时间)
date.valueOf() // 1648865011905

对象的 toJSON 方法

Object 本身并没有定义 toJSON 方法
Date 类定义了自己的 toJSON 方法

new Date() // Sat Apr 02 2022 11:18:46 GMT+0800 (中国标准时间)
date.toJSON() // '2022-04-02T02:03:31.905Z'

对象简写形式

当属性名和属性值相同时，可以只写其中一个

let aaa = 'aaa',
  bbb = 111
obj = { aaa: aaa, bbb: bbb }
// ===
obj = { aaa, bbb } // 对象简写形式

计算属性名

当我们需要属性名是动态可变的时候，需要将属性名保存在一个变量里，将变量作为对象的属性名

let arrName = 'name'
let count = 11
function computedName() {
  let date = new Date()
  return date.getTime()
}
let obj = {
  // []中可以是变量，计算属性，表达式
  [arrName]: 'zs',
  [computedName()]: '时间戳',
  [arrName + 'you']: '你的名字',
  [count + 1]: '数字',
}
console.log(obj) // { '12': '数字', name: 'zs', '1648874845536': '时间戳', nameyou: '你的名字' }

操作对象的方法

let person = {
  name: 'zs',
  age: 20,
  date: new Date(),
  say: function () {
    console.log('我是zs')
  },
  toString: function () {
    // 自定义对象的toString方法
    let objAtt = Object.keys(this)
    objAtt = objAtt.map((item) => '"' + item + '"' + ':"' + this[item] + '"')
    let objStr = objAtt.join(',')
    objStr = '{' + objStr + '}'
    return objStr
  },
}
let obj = {
  gender: '男',
  hobby: '足球',
}

Object.assign()

以将所有可枚举的属性从一个或多个对象合并到目标对象上。

const res1=Object.assign(person,obj)
console.log(res1)
console.log(person)
运行结果：
res1 and person
{
  name: 'zs',
  age: 20,
  date: 2022-04-06T04:02:19.150Z,
  say: [Function: say],
  toString: [Function: toString],
  gender: '男',
  hobby: '足球'
}

Object.keys()

返回包含对象自身可枚举的所有属性组成的数组。

const res2=Object.keys(person)
console.log(res2)
运行结果：
[ 'name', 'age', 'date', 'say', 'toString' ]

Object.values()

返回包含对象自身所有可枚举属性的值组成的数组，值的顺序与使用 for...in 循环的顺序相同。

const res3=Object.values(person)
console.log(res3)
运行结果：
[
  'zs',
  20,
  2022-04-06T04:03:24.770Z,
  [Function: say],
  [Function: toString]
]

Object.entries()

将对象的属性和值 (键和值) 用数组的形式表现出来。即返回包含对象自身可枚举属性的键值对组成的数组

const res=Object.entries(person)
console.log(res)
运行结果：
[
  [ 'name', 'zs' ],
  [ 'age', 20 ],
  [ 'date', 2022-04-06T04:11:09.938Z ],
  [ 'say', [Function: say] ],
  [ 'toString', [Function: toString] ]
]

Object.fromEntries()

相当于 Object.entries() 方法的逆操作，将键值对形式的数组转换成对象

const res=Object.entries(person)
const res1=Object.fromEntries(res)
console.log(res1)
运行结果:
{
  name: 'zs',
  age: 20,
  date: 2022-04-06T04:59:17.322Z,
  say: [Function: say],
  toString: [Function: toString]
}