没有js金刚钻 怎么,一步一步,一步斩获大厂offer

手写递归深拷贝,必会的

<script>
    // 定义一个嵌套深的对象,深拷贝
    let obj = {
            name: '张三',
            list: [1, 2, 3]
        }
        //判断是否是基本数据类型,如果是直接return,因为复杂数据类型才会深拷贝
    function deepClone(obj) {
        //判断是否是基本数据类型,nul也是基本数据类型
        if (typeof obj !== 'object' || obj == null) {
            return obj
        }
        //初始化判断是数组还是对象 初始化返回结果
        let result
        if (obj instanceof Array) {
            result = []
        } else {
            result = {}
        }
        //for in 循环,数组和对象有原型,空的也有,没必要去拿obj原型上的方法或属性
        for (let key in obj) {
            //排除原型上的方法或属性 hasOwnProperty判断是否是自己私有属性
            if (obj.hasOwnProperty(key)) {
                result[key] = deepClone(obj[key]) //递归调用
            }
        }
        return result
    }
    console.log(obj); //{name: '张三', list: Array(3)}
    let newObj = deepClone(obj)
    console.log(newObj); //{name: '张三', list: Array(3)}
    // 检测一下深拷贝是否成
    newObj.name = '李四'
    console.log(newObj); //{name: '李四', list: Array(3)}  ok 关机下班
</script>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

  • 简单的东西必会的,抽象的允许你有瑕疵

  • 开始

一、数据类型

1. JavaScript有哪些数据类型,它们的区别?

JavaScript共有八种数据类型,分别是 Number、String、Boolean、Undefined、Null、Object、Symbol、BigInt。

其中 Symbol 和 是ES6 中新增的数据类型:BigInt 是es10新增

  • Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。

  • BigInt 是一种数字类型的数据,它可以表示任意精度格式的整数,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型:

  • 栈:原始数据类型(Number、String、Boolean、Undefined、Null , Symbol, BigInt)

  • 堆:引用数据类型(对象、数组和函数)

两种类型的区别在于存储位置的不同:

  • 原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;

  • 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。

堆和栈的概念存在于数据结构和操作系统内存中,在数据结构中:

  • 在数据结构中,栈中数据的存取方式为先进后出。

  • 堆是一个优先队列,是按优先级来进行排序的,优先级可以按照大小来规定。

在操作系统中,内存被分为栈区和堆区:

  • 栈区内存由编译器自动分配释放,存放函数的参数值,局部变量的值等。其操作方式类似于数据结构中的栈。

  • 堆区内存一般由开发着分配释放,若开发者不释放,程序结束时可能由垃圾回收机制回收。

2. 数据类型检测的方式有哪些

(1)typeof只能正确判断基本数据类型,其中数组、对象、null都会被判断为object,其他判断都正确。

console.log(typeof 2);               // number===》Number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object 因为在浏览器中对象存储是000的二进制数,null也是
console.log(typeof {});              // object

(2)instanceof ------------------------- 被检测 instanceof 类型 (空格隔开)

instanceof只能正确判断引用数据类型,判断原型链中能否找到该类型的原型。而不能判断基本数据类型它返回值是布尔值fasle

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

 

可以看到,instanceof只能正确判断引用数据类型,而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。基本数据类型返回布尔值false,因为它是判断判断原型链中能否找到该类型的原型

 

 

constructor有两个作用,一是判断数据的类型,用法:(被检测).constructor===类型,

但是它不能创建一个对象来改变它的原型,constructor就不能用来判断数据类型了

每一个对象里都有一个prototype,里面有一个 constructor指针,指向构造函数事例本身

(3) constructor 要加()不然会以为是小数,所以加()

 

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

实例化对象的变量通过 constrcutor 对象访问它的构造函数。判断实例化对象是不是构造函数的实例化对象,返回一个布尔值

需要注意,如果创建一个对象来改变它的原型或指针,constructor就不能用来判断数据类型了:

//定义构造函数
function Fn(name,age){
    this.name=name
    this,age=age
};
//将Fn实例化一个变量  
var f = new Fn(); 
//改变原型 对象变成数组
//如果创建一个对象来改变它的原型,`constructor`就不能用来判断数据类型了
Fn.prototype = new Array();
// false 这里应该是true,f是fn的事例实例对象,但是修改了原型导致`constructor`判断不正确
console.log(f.constructor===Fn);  // false 不能正确判断
console.log(f.constructor===Array); // true

//第二个例子
<script>
    // 1 Person 构造函数 
    function Person(name, age) {
        this.age = age;
        this.name = name;
        this.run = function() {
            console.log('我叫' + this.name + '今年' + this.age + '我跑步可快了');
        }
    }
    var obj = new Person('张三', '23'); // 实例化对象 // new 创建对象 传参 
    // console.log(obj);
    // obj.run(); //实例过后才可以调方法和属性

    // 2 Person1 构造函数 
    function Person1(name, age) {
        this.age = age;
        this.name = name;
    }
    //1 篡改原型会导致`constructor`不能正确判断
    // Person1.prototype = Person.prototype
    //     // 再次指回来就可以正确判断
    // Person1.prototype.constructor = Person1

    // 2 篡改指针会导致`constructor`不能正确判断
    Person1.prototype.constructor = Person.prototype.constructor
    var obj = new Person1('李四', '18');
    //这里应该是`true`,obj是Person1的实例化对象
    console.log(obj.constructor === Person1); //false  
    // 篡改指针导致constructor不能准确判断
</script>

(4)Object.prototype.toString.call()

Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型:

var a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));

 

同样是检测对象obj调用toString方法,obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样,这是为什么?

这是因为toString是Object的原型方法,而Array、function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串…),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object原型上的toString方法。

3. 判断数组的方式有哪些

  • 通过Object.prototype.toString.call()做判断

Object.prototype.toString.call(obj).slice(8,-1) === 'Array';
  • 通过原型链做判断
obj.__proto__ === Array.prototype;

 

 

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彩色之外

你的打赏是我创作的氮气加速动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值