JavaScript实现深拷贝

深拷贝

//编写一个深度克隆函数
function deepClone(obj) {
    // 1. 如果传过来的obj不是对象或者为空，则返回
    if (typeof obj !== 'object' || obj == null) return obj;

    // 2. 判断传过来的obj是否为数组
    let newObj = (obj instanceof Array) ? [] : {};

    // 3. 通过for in循环访问对象属性
    for(let key in obj){
        // 4. hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中
        //是否具有指定的属性（也就是，是否有指定的键）。
        if (obj.hasOwnProperty(key)) {
            // 5. 判断对象属性类型
            // 5.1 是否是日期
            if (obj[key] instanceof Date) {
                newObj[key] = new Date(obj[key].getTime());
            }else if(obj[key] instanceof RegExp){
                // 5.2 是否是正则表达式
                newObj[key] = new RegExp(obj[key]);
            }else if((typeof obj[key] === 'object') && obj[key].nodeType === 1){
                // 5.3 判断 DOM 元素节点
                let domEle = document.getElementsByTagName(obj[key].nodeName)[0];
                newObj[key] = domEle.cloneNode(true);
            }else{
                // 5.4 是否是对象
                newObj[key] = (typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
            }
        }
    }
    return newObj;
}

const objA = {
    name: 'jack',
    birthday: new Date(),
    pattern: /jack/g,
    body: document.body,
    others: [123,'coding', new Date(), /abc/gim,]
};

const objB = deepClone(objA);
//objB.name = '李霞';
console.log(objA === objB); // 打印 false
console.log(objA, objB); // 对象内容一样

• 判断某个对象是否是DOM对象
  • 根据dom对象的特性来判断，首先要判断是否是对象，其次在判断是否有nodeType，tagName等属性
  • nodeName：指定节点的节点名称
    • 如果节点是元素节点，则 nodeName 属性返回标签名。
    • 入股节点是属性节点，则 nodeName属性返回属性的名称。
    • 对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。
  • getElementsByTagName(): 方法可返回带有指定标签名的对象的集合。