JavaScript基礎——簡單型別和複雜型別

阿新 • • 發佈：2021-07-05

JavaScript簡單型別和複雜型別

回顧資料型別

簡單資料型別 / 基本資料型別 / 值型別
- Number
- String
- Boolean
- Null
- Undefined
複雜資料型別 / 引用型別
- Object
- 陣列

資料在記憶體中的儲存

JavaScript中沒有堆疊的概念，通過堆疊的方式來理解程式碼的一些執行方式，便於將來學習其他語言。

簡單型別儲存在記憶體中的棧上
複雜型別儲存在記憶體中的堆上

簡單型別在記憶體中儲存

var n1 = 10;
// 1、在棧中開闢一塊記憶體空間，儲存一個數值10
// 2、將 n1 變數的值指向該記憶體空間
var n2 = n1;
// 1、在棧中又開闢一塊記憶體空間
// 2、把 n1 指向的數值10複製一份放進新開闢的記憶體空間中
// 3、將 n2 變數的值指向新開闢的記憶體空間

n1 = 20;
// 變數 n1 的值發生變化， n2 的值不會發生變化

複雜型別在記憶體中儲存

function Object(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log(this.name + ":hello")
    }
}

var o1 = new Object('lisi', 18);
// 1、 在堆上開闢一塊記憶體空間，儲存o1物件
// 2、 在棧上開闢一塊記憶體空間，儲存一個二進位制地址，地址指向堆上的p1物件
// 3、 變數o1指向棧上開闢的記憶體空間（二進位制地址）
var o2 = o1;
// 1、在棧中又開闢一塊記憶體空間
// 2、把o1指向的二進位制地址複製一份放進新開闢的記憶體空間
// 3、將o2指向新開闢的記憶體空間
o1.name = 'zhangsan';
// o1物件的name屬性更改為 zhangsan
console.log(o2.name); // zhangsan
// o2對物件的name屬性也更改為 zhangsan ，因為指向的都是棧上的同一個二進位制地址，二進位制地址指向的是同一個o1物件

簡單型別作為函式的引數

function fn() {
    a = a + 1;
    b = b + 1;
    console.log(a);
    console.log(b);
}

var x = 10;
// 1、在棧中開闢一塊記憶體空間，儲存一個數值10
// 2、將 x 變數的值指向該記憶體空間
var y = 20;
// 1、在棧中開闢一塊記憶體空間，儲存一個數值20
// 2、將 y 變數的值指向該記憶體空間
fn(x, y); // 11 21
// 1、在棧中又分別開闢兩塊記憶體空間
// 2、把 x 和 y 指向的數值10和數值20分別複製一份放進新開闢的兩塊記憶體空間中
// 3、將 a 變數的值 和 b 變數的值分別指向對應的新開闢的記憶體空間
// 4、a的值和b的值經過運算重新變為 11 和 21
console.log(x); // 10
// x 的值還是10
console.log(y); // 20
// y 的值還是20

複雜型別作為函式的引數

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log(this.name + "Hello!");
    }
}

var p = new Person("zhangsan", 18);
function fn(person) {
    person.name = "lisi";
}
fn(p);
console.log(p.name); // lisi

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function () {
        console.log(this.name + "Hello!");
    }
}

var p = new Person("zhangsan", 18);
function fn(person) {
    person.name = "lisi";
    person = new Person("wangwu", 20)
    console.log(person.name) // wangwu
}
fn(p);
console.log(p.name); // lisi

function sort(array) {
    for (var i = 0; i < array.length; i++) {
        var isSort = true;
        for (var j = 0; j < array.length - 1 - i; j++) {
            if (array[j] < array[j + 1]) {
                isSort = false;
                var tmp = array[j];
                array[j] = array[j + 1];
                array[j + 1] = tmp;
            }
        }
        if (isSort) {
           break; 
        }
    }
    // return array; 可以不用寫return返回值，因為陣列是一個複雜資料型別，具有複雜資料型別函式傳參的特性
}

var arr = [10, 51, 81, 2, 5, 9, 57, 58];
sort(arr);
var r = sort(arr);
console.log(r); // undefined 沒有寫return就沒有返回值，所以返回undefined
console.log(arr); // [81, 58, 57, 51, 10, 9, 5, 2]