js的常见操作，持续更新中...

电玩女神 2022-12-01 11:43 166阅读 0赞

#### 写在前面 ####

如果下面没有您需要的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'
    }

1.  判断两个对象是否相等

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

1.  删除数组某几个元素 替换新的元素

//删除数组
    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']

1.  删除数组第一个元素

let arr6 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
    console.info(arr6.shift()) 
    //name1 ⚠️返回的是被删除的元素
    console.info(arr6) 
    //[ 'name2', 'name3', 'name4', 'name5', 'name6' ]

1.  删除数组最后一个元素

let arr7 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
    console.info(arr7.pop()) 
    //name6 ⚠️返回的是被删除的元素
    console.info(arr7) 
    //[ 'name1', 'name2', 'name3', 'name4', 'name5' ]

1.  从数组第一位新增元素

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' ]

1.  从数组最后新加一个元素

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']

1.  数组反序

let arr10 = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6']
    console.info(arr10.reverse()) 
    //[ 'name6', 'name5', 'name4', 'name3', 'name2', 'name1' ]

1.  数组连接

let arr11 = ['name4', 'name5', 'name6']
    let arr12 = ['name1', 'name2', 'name3']
    console.info(arr11.concat(arr12))
    //[ 'name4', 'name5', 'name6', 'name1', 'name2', 'name3' ]

1.  判断是不是数组

let arr13 = ['name1', 'name2', 'name3']
    console.info(Array.isArray(arr13))
    //true

1.  截取数组

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属性

1.  类似这样的格式：  
    ps : [vue官方文档][vue]  
    ![在这里插入图片描述][20200826165731832.png_pic_center]
2.  转为这样的格式：  
    ![在这里插入图片描述][20200826165814394.png_pic_center]

JSON.parse(JSON.stringify(arr)) //⚠️结果如上图 原生js不会出现，这个是vue操作的副本

#### 更新：09-01 ####

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

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

![在这里插入图片描述][20200901094214669.png_pic_center]

> 这个时候用户选择了搜索的时候，请求的格式是这样的：  
> 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 ####

1.  格式化对象为二维数组

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

1.  二维数组格式化为对象

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

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

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

1.  禁用鼠标右键的所有操作

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

1.  获取数组的最后几项

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]

[vue]: https://cn.vuejs.org/v2/api/#Vue-observable
[20200826165731832.png_pic_center]: /images/20221123/8222bde3f1e84a408b609be4b2b0db55.png
[20200826165814394.png_pic_center]: /images/20221123/81d579587c86477ea006ce54a451faeb.png
[20200901094214669.png_pic_center]: /images/20221123/e612c1865c884055917d6ed15e153a58.png