记录JS常用方法

转载

mb5fe94bf10ac65 2021-07-15 11:38:00

一、js的深克隆和浅克隆

在js中有五种基本数据类型和一种复杂类型（引用类型），基本数据类型包括：undefined，null,String,Boolean,Number,引用类型：object(function,array,object),es6还新增了symbol类型，这里暂时只说前六种

对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用（指针），而真正的数据存储在堆内存中

基本数据类型

var a = 3;
var b = a;
b = 5;
console.log(a); // 3
console.log(b); // 5

可以看到的是对于基本类型来说，我们将一个基本类型的值进行赋值，用a变量接收，然后把a赋值给b，改变b的值，a的值并不会改变，两个变量都是使用的独立的数据（内存）

直接赋值属于浅拷贝的一种，下面记录一下深拷贝的方法：

第一种方法：使用递归，完成深克隆

<script>
    function deepClone(target){
        // 首先声明一个变量
        let result;
        // 判断传入的值是不是对象,如果是对象
        if(typeof target === "object" ){
            // 判断是不是数组，是数组使用for in循环递归赋值
            if(Array.isArray(target)){
                result = [] // 是数组，先把result定义为数组
                for(let i in target){
                    //  递归赋值
                    result.push(deepClone(target[i]))
                }
            } else if(target == null) {
                // 如果是null，直接赋值为null
                result = null
            } else if(target.constructor === RegExp){
                // 如果当前值是RegExp对象的话，直接赋值
                result = target
            } else {
                // 否则就是普通对象，使用for in循环，结合递归赋值
                result = {} //  先将result定义为对象
                for(let i in target){
                    result[i] = deepClone(target[i])
                }
            }
        } else {
            // 如果不是对象，就是基本数据类型，直接赋值即可
            result = target
        }
        // 将新值返回
        return result
    }
    let obj1 = {
        a:1,b:2
    }
    let obj2 = obj1
    console.log(obj2.a) // 1
    obj2.a = 10
    console.log(obj1.a) // 10
    let obj3 = deepClone(obj1)
    console.log(obj3.a) // 10
    obj3.a = 20
    console.log(obj1.a) // 10
    console.log(obj3.a) // 20
</script>

2、JSON.parse(JSON.stringify()) 使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的

// 2、JSON.parse(JSON.stringify())
    let arr = [1,2,3,4,5]
    let arr1 = JSON.parse(JSON.stringify(arr))
    console.log(arr1)
    let objs = { a:1,b:2 }
    let objs2 = JSON.parse(JSON.stringify(objs))
    console.log(objs2.a)  // 1
    objs2.a = 20
    console.log(objs.a)  // 1
    console.log(objs2.a)  // 20

3、扩展运算符（对多层嵌套数据无效）

// 3、扩展运算符
    let arrs = [5,4,3,2,1,0]
    let arrs2 = [...arrs]
    console.log(arrs2)  // [5,4,3,2,1,0]
    let obja = {
        a:5,
        b:6
    }
    let obja2 = {...obja}
    console.log(obja2.a) // 5
    obja2.a = 50
    console.log(obja.a) // 5
    console.log(obja2.a) // 50

4、Object.assign(target, source)

    var oba3 = {
        a:2,c:4
    }
    var oba = Object.assign({},oba3)
    console.log(oba.a) // 2
    oba.a = 20
    console.log(oba3.a) // 2
// 不能复制有多层对象的数据 可以看到对于一层对象来说是没有任何问题的，但是如果对象的属性对应的是其它的引用类型的话，还是只拷贝了引用，修改的话还是会有问题

    var oba3 = {
        a:5,
        c:["a","b","m"]
    }
    var oba2 = Object.assign({},oba3)
    console.log(oba2.c) // ["a","b","m"]
    oba2.c[0] = 50
    console.log(oba2.c) // [50,"b","m"]
    console.log(oba3.c) // [50,"b","m"]

浅拷贝：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；

深拷贝：复制并创建一个一模一样的对象，不共享内存，修改新对象，旧对象保持不变，实现深拷贝主要有两种方法

实现深拷贝主要有2种方法
（1）递归
（2）JSON.stringify结合JSON.parse （不可以拷贝 undefined ， function， RegExp 等等类型的）
（3）扩展运算符（对多层嵌套数据无效）

二、取出对象中key跟数组项相同的项

var ars = ["1001", 2002, "3003", "4004", "5005"]
    var ob = {
        a: 10,
        "5005": [1, 2, 3],
        "4004":1
    }
    var newObj = {};
    for (let i in ob) {
        console.log(i)
        if (ars.includes(i)) {
            console.log(i)
            newObj[i] = ob[i]
        }
    }
    console.log(newObj)

记录JS常用方法_数组