js的常见操作，持续更新中...console.console.info(Object.console.info(Obj

写在前面

如果下面没有您需要的js和对象的操作，需求下面留言，备注好您的源数据格式和希望转的格式，我会更新,感谢浏览！有错误及时指正！

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操作的副本

更新：09-01

vue中动态拼接请求数据【get请求】

业务场景：需要做的是一个搜索的功能，一般来说的话，搜索就是直接根据用户输入的信息尽心请求接口就可以了，但是这个场景是两个条件，一个是输入框，一个是下拉框，需要满足当用户输入值以后，必须选择下拉框，将用户选择的下拉框的值当作搜索条件的key，输入的值作为value，我描述的可能不是很明白，举个例子，如下图：

在这里插入图片描述

这个时候用户选择了搜索的时候，请求的格式是这样的：
https://接口地址?id=1234，当选择标题的时候搜索是这样的：https://接口地址?title=1234

/**
实现思路：首先声明一个空对象，将用户选择的下拉框的值作为对象的key值，输入的作为value值
然后将其余的条件（如果还有的话）用一个新的对象连接起来，最后将连接好的对象作为搜索条件即可
*/
let obj = new Object();
obj[this.linkObj.search_fields] = this.linkObj.search
let listObj = {}
Object.assign(listObj, this.listQuery, obj)
//listObj就是最终的搜索条件

更新：10-09

格式化对象为二维数组

const obj = { name: 'tom', gender: 'man' }
console.info(Object.entries(obj))
//[ [ 'name', 'tom' ], [ 'gender', 'man' ] ]

二维数组格式化为对象

const arr = [
    ['name', 'jim'],
    ['gender', 'women']
]
const user = Object.fromEntries(arr);
console.log(user);
//{ name: 'jim', gender: 'women' }

以参数为原型，创建一个新对象实例

const userinfo = {
    name: 'jim',
    age: 18,
    address: 'beijing',
    say() {
        console.info(`我的名字是 ${this.name},我的年龄是 ${this.age}, 我住在 ${this.address}`)
    }
}
const myinfo = Object.create(userinfo)
	myinfo.say() //我的名字是 jim,我的年龄是 18, 我住在 beijing
	myinfo.name = 'tom'
	myinfo.age = 22
	myinfo.address = 'shanghai'
	myinfo.say() //我的名字是 tom,我的年龄是 22, 我住在 shanghai
	console.log(myinfo)//{ name: 'tom', age: 22, address: 'shanghai' }
	console.log(userinfo)
//{ name: 'jim', age: 18, address: 'beijing', say: [Function: say] }

关于这个这里简单的多说一句，Object.create的实现原型是：

    Object.myCreate = function(obj) {
        var F = function() {}
        F.prototype = obj
        return new F()
    }
    const student = {
        name: 'jim',
        gender: 'man',
        address: 'hangzhou'
    }
    const newstu = Object.myCreate(student)
    console.info(newstu) //{}
    newstu.name = 'Tom'
    console.info(newstu) //{ name: 'Tom' }
    console.info(newstu.name) //Tom

禁用鼠标右键的所有操作

//vue项目在app入口文件中div上加，原生的直接在body上
oncontextmenu="return false"

获取数组的最后几项

let arr = [1,2,3,4,5,6,7,8,9]
console.info(arr.slice(-1)) //[9]
console.info(arr.slice(-3)) //[7,8,9]

//
15. 删除数组的虚值(布尔值为false的值)

let arr = [undefined, false, null, 0, '', NaN, 1]
console.info(arr.filter(Boolean)) //[1]