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

  • Post author:
  • Post category:其他


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;
}
复制代码

总结

原始类型和对象类型的区别,总结起来就是:

类型 原始类型 对象类型
不可改变 可以改变
属性和方法 不能添加 能添加
存储值 地址(指针)
比较 值的比较 地址的比较

转载于:https://juejin.im/post/5cb04499f265da037b610056