介绍
JS 常用对象方法
# Object.keys()
把对象里面的属性名/键 储存为一个字符串数组
- Object.keys(obj) (opens new window) —— 返回一个包含该对象所有的键的数组。
- 不会修改原对象内容 会返回一个字符串数组 会忽略 symbol 属性
- 常用于 forEach 循环遍历替换 原属性名
let user = {
myName: 'John',
age: 30,
}
console.log(Object.values(user)) // [ 'John', 30 ]
# Object.values()
把对象里面的值 储存为一个字符串数组
- Object.values(obj) (opens new window) —— 返回一个包含该对象所有的值的数组。
- 不会修改原对象内容 会返回一个字符串数组 会忽略 symbol 属性
- 可以配合
...
展开运算符 展开对象中的值
let user = {
myName: 'John',
age: 30,
}
const { myName, age } = user // 通过赋值的方式解构对象
console.log(...Object.values(user)) // 通过...运算符解构对象 ["John", 30]
# Object.entries()
把对象的键和值都取出来 储存为一个字符串数组
- Object.entries(obj) (opens new window) —— 返回一个包含该对象所有 [key, value] 键值对的数组。
- 不会修改原对象内容 会返回一个字符串数组 会忽略 symbol 属性
let user = {
myName: 'John',
age: 30,
}
console.log(Object.entries(user)) // [ [ 'myName', 'John' ], [ 'age', 30 ] ]
# Object.keys()
清空对象所有数据(格式化)
- 常用于对象数据的清空 重置数据
es6导出方法
// 表单清空 obj表单的数据域
export default function resetForm (obj) {
// 清空数据域
Object.keys(obj).forEach(key => {
obj[key] = ''
})
}
vue入口文件注册使用
main.js
// 清空表单
import resetForm from '@/src/utils/resrtForm'
Vue.prototype.$resetForm = resetForm
vue页面调用重置方法
// this.addDeptModel为处理的对象
this.$resetForm(this.addDeptModel)
# Object.keys()
element ui 清空表单数据
原理和清空一样
常用于对象数据的清空 重置数据
es6导出方法
// 表单清空
// formName: 表单的ref属性 obj表单的数据域
export default function resetForm (formName, obj) {
// 清空表单
if (this.$refs[formName]) {
this.$refs[formName].resetFields()
}
// 清空数据域
Object.keys(obj).forEach(key => {
obj[key] = ''
})
}
vue入口文件注册使用
main.js
// 清空表单
import resetForm from '@/src/utils/resrtForm'
Vue.prototype.$resetForm = resetForm
vue页面调用重置方法
// this.addDeptModel为处理的对象
this.$resetForm('addDeptForm', this.addDeptModel)
# Object.keys()
快速复制 不存在的key不复制
- 适合拷贝对象 并且只拷贝你生成过的key 不生成的不拷贝
数据类型
// 要拷贝的对象
addDeptModel: {
editType: '',
id: '',
pid: '',
parentName: '',
manager: '',
},
// 拷贝到的对象
DeptModel: {
editType: '',
id: '',
pid: '',
}, // 这个时候只拷贝存在的key 其他的key不拷贝
es6导出方法
// 对象的快速复制 不存在的key不复制
export default async function objCoppy (obj1, obj2) {
Object.keys(obj2).forEach(key => {
obj2[key] = obj1[key]
})
}
vue入口文件注册使用
main.js
// 数据的快速复制
import objCoppy from '../src/utils/objCoppy'
Vue.prototype.$objCoppy = objCoppy
vue页面调用拷贝方法
this.$resetForm(this.addDeptModel, this.DeptModel) // 旧的在前 新的在后
# Object.assign()
合并对象中的属性
适用于合并两个对象 并且指定保留那个对象(合并储存的对象)
不会修改合并储存对象里面的原数据 只是继续添加数据
object.assign()
有n个参数 但是参数1是 指定储存合并的对象- 参数1是 指定储存合并的对象( 自己可以拥有原数据 并不会覆盖原数据 )
- 参数2 需要合并的对象
- 参数3 需要合并的对象
.....
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
使用例子
// 合并储存的对象
const target = {
a: 1
};
// 需要合并的对象1
const source1 = {
b: 2
};
// 需要合并的对象2
const source2 = {
c: 3
}
// 进行对象合并
Object.assign(target, source1, source2)
console.log(target) // {a: 1, b: 2, c: 3}
# Object.hasOwnProperty()
对象中判断指定键(属性名)是否存在
- 我们想判断一个字段是是否在对象中存在 需要用到hasOwnProperty() (opens new window)方法检测是否有指定的键
<span v-if="data.hasOwnProperty('children')" />
- 这样就可以判断
data
对象中 是否包含children
键(属性名)
其他例子
const object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// expected output: true
console.log(object1.hasOwnProperty('toString'));
// expected output: false
# 进阶
- 如果你开启了eslint 直接使用hasOwnProperty() (opens new window) 会提示报错
- 这个错误的解释是
- 对象可以具有属性,这些属性可以将
Object.prototype
的内建函数隐藏,可能导致意外行为或拒绝服务安全漏洞。例如,web 服务器解析来自客户机的 JSON 输入并直接在结果对象上调用hasOwnProperty
是不安全的,因为恶意客户机可能发送一个JSON值,如{"hasOwnProperty": 1}
,并导致服务器崩溃。
- 对象可以具有属性,这些属性可以将
- 解决方案
- 使用
Object.prototype
调用这些方法
- 使用
// 报错写法
childNodes[j].hasOwnProperty('children')
// 正确规范写法
Object.prototype.hasOwnProperty.call(childNodes[j], 'children')
# Object.hasOwn()
判断对象或者类指定的键(key)是否存在
- 上面的判断方式 在严格模式中 是不能直接使用的 因为它存在一些安全问题
ES2022
提供了新的判断方式Object.hasOwn()
可直接使用 并且支持对象和class
类
// 判断class类
class Car {
color = 'green';
age = 2;
}
const car = new Car();
console.log(car.hasOwnProperty('age')); // true
console.log(car.hasOwnProperty('name')); // false
// 判断对象
const obj = {
color: '你好',
age: 12
}
console.log(obj.hasOwnProperty('age')) // true
console.log(obj.hasOwnProperty('name')) // false