js和object的常见操作,持续更新中...
时间:2022-07-24
本文章向大家介绍js和object的常见操作,持续更新中...,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
PS:
⚠️不是返回值,是提醒注意事项,除⚠️符号之外的均为返回值
- 将string类型的数组,进行格式化为object类型的数组
let str = "[{'env': '测试', 'problem': '允许', 'protocol': 'TCP', 'source_port': '修改的数据源数据', 'purpose': '修改的数据', 'source_ip': '修改的数据源数据', 'dest_port': '修改的数据源数据', 'partner': '修改的数据源数据', 'dest_ip': '修改的数据源数据', 'id': 0}]"
console.info(eval(str))
//返回值
[
{
env: '测试',
problem: '允许',
protocol: 'TCP',
source_port: '修改的数据源数据',
purpose: '修改的数据',
source_ip: '修改的数据源数据',
dest_port: '修改的数据源数据',
partner: '修改的数据源数据',
dest_ip: '修改的数据源数据',
id: 0
}
]
- 获取对象的key和value
let obj = {
env: '测试',
problem: '允许',
protocol: 'TCP',
source_port: '源端口',
purpose: '修改的数据',
source_ip: '源IP',
}
console.info(Object.keys(obj))
//[ 'env', 'problem', 'protocol', 'source_port', 'purpose', 'source_ip' ]
console.info(Object.values(obj))
//[ '测试', '允许', 'TCP', '源端口', '修改的数据', '源IP' ]
- string 改为数组
let str1 = "tom,jim,mary,tony,karry,jerry"
console.info(str1.split(','))
//[ 'tom', 'jim', 'mary', 'tony', 'karry', 'jerry' ]
- 数组转为string
let arr2 = ['tom', 'jim', 'mary', 'tony', 'karry', 'jerry']
console.info(arr2.join()) //默认是, //tom,jim,mary,tony,karry,jerry
console.info(arr2.join('-')) //tom-jim-mary-tony-karry-jerry
console.info(arr2.toString()) // tom,jim,mary,tony,karry,jerry
- 给数组加自定义的key
let arr3 = arr2.map(item => {
return {
name: item
}
})
console.info(arr3)
//返回结果:
[
{ name: 'tom' },
{ name: 'jim' },
{ name: 'mary' },
{ name: 'tony' },
{ name: 'karry' },
{ name: 'jerry' }
]
- 更改对象值为数组元素,将key和值重新进行赋值
let arr1 = {
env: '测试',
problem: '允许',
protocol: 'TCP',
source_port: '源端口',
purpose: '修改的数据',
source_ip: '源IP',
}
let newarr = []
for (item in arr1) {
let obj = {
key: item,
value: arr1[item]
}
newarr.push(obj)
}
console.info(newarr)
//返回结果:
[
{ key: 'env', value: '测试' },
{ key: 'problem', value: '允许' },
{ key: 'protocol', value: 'TCP' },
{ key: 'source_port', value: '源端口' },
{ key: 'purpose', value: '修改的数据' },
{ key: 'source_ip', value: '源IP' }
]
- 使用es6获取数组元素
let arr4 = ['name1', 'name2', 'name3', 'name4']
console.info(...arr4)
//name1 name2 name3 name4
- 连接对象 【常规方法】
let obj3 = {
env: '测试',
problem: '允许',
protocol: 'TCP',
}
let obj4 = {
source_port: '源端口',
purpose: '修改的数据',
source_ip: '源IP',
}
let newobj1 = { id: 0 }
console.info(Object.assign(newobj1, obj3, obj4))
//返回结果:
{
id: 0,
env: '测试',
problem: '允许',
protocol: 'TCP',
source_port: '源端口',
purpose: '修改的数据',
source_ip: '源IP'
}
- 连接对象 【es6方法】
let obj5 = {
env: '测试',
problem: '允许',
protocol: 'TCP',
}
let obj6 = {
source_port: '源端口',
purpose: '修改的数据',
source_ip: '源IP',
}
let obj7 = { id: 0, ...obj5, ...obj6 }
console.info(obj7)
//返回结果:
{
id: 0,
env: '测试',
problem: '允许',
protocol: 'TCP',
source_port: '源端口',
purpose: '修改的数据',
source_ip: '源IP'
}
- 判断两个对象是否相等
let obj8 = { name: 'tom' }
let obj9 = { name: 'tom' }
console.info(obj8 === obj9) //false
console.info(obj8 == obj9) //false
console.info(JSON.stringify(obj8) === JSON.stringify(obj9)) //true
- 删除数组某几个元素 替换新的元素
//删除数组
let arr5 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr5.splice(2, 1, 'name7', 'name8'))
//name3 ⚠️返回的是被删除的元素
console.info(arr5)
//['name1', 'name2','name7', 'name8','name4', 'name5','name6']
- 删除数组第一个元素
let arr6 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr6.shift())
//name1 ⚠️返回的是被删除的元素
console.info(arr6)
//[ 'name2', 'name3', 'name4', 'name5', 'name6' ]
- 删除数组最后一个元素
let arr7 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr7.pop())
//name6 ⚠️返回的是被删除的元素
console.info(arr7)
//[ 'name1', 'name2', 'name3', 'name4', 'name5' ]
- 从数组第一位新增元素
let arr8 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr8.unshift('name0'))
// 7 ⚠️返回的是数组的长度 7
console.info(arr8)
//['name0', 'name1', 'name2', 'name3', 'name4', 'name5', 'name6' ]
- 从数组最后新加一个元素
let arr9 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr9.push('name7'))
//7 ⚠️返回数组的长度 7
console.info(arr9)
['name1', 'name2', 'name3', 'name4', 'name5', 'name6','name7']
- 数组反序
let arr10 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr10.reverse())
//[ 'name6', 'name5', 'name4', 'name3', 'name2', 'name1' ]
- 数组连接
let arr11 = ['name4', 'name5', 'name6']
let arr12 = ['name1', 'name2', 'name3']
console.info(arr11.concat(arr12))
//[ 'name4', 'name5', 'name6', 'name1', 'name2', 'name3' ]
- 判断是不是数组
let arr13 = ['name1', 'name2', 'name3']
console.info(Array.isArray(arr13))
//true
- 截取数组
let arr14 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
console.info(arr14.slice(2, 4))
//name3 name4 ⚠️从第二个开始到第4个,含前不含后 不改变原数组
console.info(arr14)
//[ 'name1', 'name2', 'name3', 'name4', 'name5', 'name6' ]
- 去掉数组的__ob__: Observer属性
- 类似这样的格式: ps : vue官方文档
- 转为这样的格式:
JSON.parse(JSON.stringify(arr)) //⚠️结果如上图 原生js不会出现,这个是vue操作的副本
- 待续…
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端性能和错误监控
- Network在单细胞转录组数据分析中的应用
- PAT (Basic Level) Practice (中文)1024 科学计数法 (20 分)
- PAT (Basic Level) Practice (中文)1053 住房空置率 (20 分)
- 解决vue+axios请求报错POST http: net::ERR_CONNECTION_REFUSED,在封装的请求中统一处理请求异常的问题
- PAT (Basic Level) Practice (中文)1025 反转链表 (25 分)
- Pytest+Allure接口自动化一些学习分享
- 数据结构___马踏棋盘详尽实现+报告+通俗易懂注释
- 使用elasticsearch-dump迁移elasticsearch集群数据
- PAT (Basic Level) Practice (中文)1027 打印沙漏 (20 分)
- PAT (Advanced Level) Practice 1002 A+B for Polynomials (25 分)
- 关于MySQL varchar类型最大值,原来一直都理解错了
- PAT (Basic Level) Practice (中文)1028 人口普查 (20 分)
- 稀疏矩阵计算器(三元组实现矩阵加减乘法)
- PAT (Basic Level) Practice (中文)1029 旧键盘 (20 分)