js的值型別和參考型別

在ES6中js的資料型別分為兩種，分別是值型別和參考型別，

常見的值型別：undefined，Boolean，number，String，symbol；
常見的參考型別：Object，Array，null（特殊的參考型別，指標指向空地址），function（特殊的參考型別，但沒有存盤資料，所以沒有拷貝、復制函式這一說）；

它們的區別

存盤位置不同,值型別直接存盤在堆疊中，而參考型別的值在堆中，并把存盤地址存到堆疊中；
將一個值型別的變數賦值給另一個變數時，改變其中一個的值，另一個并不會發生改變；
```
let a = 2020
let b = a
b = 2021
console.log(a) // 結果：2020
console.log(b) // 結果：2021
```

將一個參考型別的變數賦值給另一個變數時，只要改變了其中一個兩個就都會發生改變；

const a = {
name: '小明',
age: 15
}
const b = a
b.age = 20
console.log(a.age) // 結果：20
console.log(b.age) // 結果：20

typeof運算子

說到資料型別就不得不說一下typeof運算子，它可以用來判斷js變數的型別，那么它能夠判斷哪些型別呢？

能夠識別所有值型別
能夠判斷是否是參考型別（不可再細分，會把Array也認為是object）

能夠識別出函式
也就是說typeof運算子能夠識別出7種型別，分別是：undefined，Boolean，number，String，symbol，object，function

let a
console.log(typeof a) // 結果: undefined
const b = 100
console.log(typeof b) // 結果: number
const c = '小明'
console.log(typeof c) // 結果: string
const d = {
    name: '小紅'
}
console.log(typeof d) // 結果: object
const e = ['a', 'b']
console.log(typeof e) // 結果: object
const f = Symbol('foo')
console.log(typeof f) // 結果: symbol

深拷貝和淺拷貝

在上面講值型別和參考型別的區別時，就提到了將一個值型別的變數賦值給另一個變數時，改變其中一個的值，另一個也會發生改變，這種叫做淺拷貝；

什么是淺拷貝?

淺拷貝就是將變數所指向的參考地址直接賦值給另外一個變數，也就是說他們訪問的是同一份資源，所以兩個變數會相互影響，

什么是深拷貝？

在大多數專案中，我們需要的是兩個變數，并不會相互影響，所以需要用到深拷貝；
深拷貝會重新創建一個欄位和值相同的新的資料，并把其參考地址放回給我們定義的變數，

	function deepClone (obj) {
    if (typeof obj != 'object' || obj == null) {
        // 如果是值型別或者為 null
        return obj;
    }
    let result;
    // 判斷是陣列還是物件, 對應不同的初始化結果
    if (obj instanceof Array) {
        result = [];
    } else {
        result = {};
    }
    // 回圈遍歷物件的屬性或者陣列的元素,并進行遞回深度拷貝
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key])
        }
    }
    return result;
}

const testObj = {
    name: '小明',
    age: 10,
    address: ['北京','上海'],
    score: {
        math: 89,
        english: 91
    }
}
const a2 = deepClone(testObj);
a2.score.math = 100

console.log('testObj的math',testObj.score.math)  //  結果：testObj的math 89
console.log('a2的math',a2.score.math)  //  結果：a2的math 100

我們發現在改變了第二個變數后第一個并沒有發生變化，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246568.html

標籤：其他

上一篇：2021年1月8日訂閱朋友的問題與解決方案匯總【淘寶、天貓超市飛天茅臺1499搶購】

下一篇：PC端和移動端自適應問題解決方法