JS基础知识点——原始类型和对象类型的区别

最新推荐文章于 2022-11-29 00:26:34 发布

weixin_34129145

最新推荐文章于 2022-11-29 00:26:34 发布

阅读量1.3k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cb04499f265da037b610056

版权

js类型

JavaScript语言规定了7种语言类型，他们分别是：

1.Number（数字）
2.Boolean（布尔值）
3.String（字符串）
4.Null （空）
5.Undefined （未定义）
6.Symbol （es6新增，表示独一无二的值）
7.Object（对象）

其中，除了Object是对象类型，其他的都是原始（基本）类型。下面我们来总结一下基本（原始）数据类型和对象数据类型的区别

基本数据类型和对象数据类型的区别

1.基本数据类型的值不可改变，对象数据类型的值可以改变
任何方法都无法改变基本数据类型的值，比如：

let name = 'wanglin';
name.slice(0,2)     // wa
console.log(name);  // wanglin
name.toUpperCase(); // WANGLIN
console.log(name);  // wanglin
复制代码

在上例中我们定义了一个变量name并将一个字符串类型的值"wanglin"赋值给了name，可以看到，调用slice方法和toUpperCase方法时，返回的是一个新的字符串，跟原来的变量name没有关系，而name的值始终没有改变。那么下面这种情况呢？

let name = 'wanglin';
name = 'wanglin1'
console.log(name);   // wanglin1
复制代码

看到这里，可能有些读者会认为，name的值不是改变了吗？但其实并不是这样的，这里的name只是一个指针，你所理解的改变只是name指针的指向从wanglin改为了wanglin1，但真正的值wanglin和wanglin1是不会改变的。我们说的基础类型的值不会改变，是指wanglin或wanglin1不变，而不是name不变。

对象类型的值可以改变，比如：

let person = {
    name:'wanglin'
}
person.name = 'wangmumu';   // 改变对象的属性值
person.age = 22;            // 新增一个属性
console.log(person);        // {name: "wangmumu", age: 22}
复制代码

2.基本数据类型存储的是值，对象数据类型存储的是地址（指针）

我们先来看一个例子

let a = 1;
let b = a;
b = 2;
console.log(a);   // 1,a的值不会因b的值的改变而受到影响

let c = [];
let d = c;
d.push(1);
console.log(c)   // [1],c的值因d的值的改变而受到影响了
复制代码

可以看到，当我们将一个值赋值给另一个变量时，如果是基本类型，则这个变量不会因另一个变量值的变化而受影响。但如果是对象类型，则会受到影响。其根本原因是，基本数据类型存储的是值，对象数据类型存储的是地址。

假设上例中的c的地址是#001，当我们将c赋值给d时，其实是把c的地址，也就是#001赋值给了d，这时d的地址和c一样都是#001，改变d的同时，c也会受到影响了。

如果我们实际开发中不想受到这个问题的困扰，可以使用浅拷贝来解决这个问题。当然，一旦提到浅拷贝，就会发现浅拷贝的各种问题，这时就要考虑使用深拷贝了。

3.基本数据类型的比较是值的比较，对象数据类型的比较是地址的比较
例如：

let a = 1,b = 1;
console.log( a == b );  // true

let c = [],d = [];
console.log( c == d );  // false
复制代码

可以看到，如果是对象类型，即使是完全相同的值，比较的时候也是false，是因为他们的地址是不同的。由此我们引发出一个思考，如果想比较两个对象类型的值是否相同，我们该怎么办呢？

这里提出一种思路解决，就是封装一个函数来判断两个对象的值是否相等，函数的参数就是这两个对象本身，在函数里把这两个对象的值遍历用来逐一比较。

function isObjEqual(o1,o2){
    let props1 = Object.getOwnPropertyNames(o1);
    let props2 = Object.getOwnPropertyNames(o2);
    if (props1.length != props2.length) {
        return false;
    }
    for (let i = 0,max = props1.length; i < max; i++) {
        let propName = props1[i];
        if (o1[propName] !== o2[propName]) {
            return false;
        }
    }
    return true;
}
复制代码