學習記錄 -- 知識點

weixin_34370347發表於2018-03-23

1.js陣列賦值問題：值傳遞還是引用傳遞？

var a = [1, 2, 3]
var b = a // 該操作後，b直接指向陣列物件，不是b指向a，a再指向陣列。
a = [3, 4, 5]
複製程式碼

Q：請問b的值是多少？ 【b = [1, 2, 3]】

大多數人會這麼想，由於陣列是引用型別，因此認為答案是[3, 4, 5] ,其實我們可以把陣列[3, 4, 5]看做是陣列c，那麼當a=c其實a已經不再指向原來的陣列物件了 

var a = [1, 2, 3]
var b = a
a.pop()
複製程式碼

Q：請問b的值是多少？ 【b = [1, 2]】

2.js中的深拷貝和淺拷貝

首先我們先來回顧一下js資料型別：
值型別：數字、字串、布林、undefined、null
引用型別：陣列、物件、函式

引用型別和值型別的區別：

  • 引用型別可以對其新增屬性、方法；
    值型別不可以；
  • 引用型別的複製是將其儲存變數的值複製一份，但兩個變數所指向的地址是一樣的，所以會出現其一改變，其二也跟著改變；
    值型別是複製就是在變數物件上建立一個新的值，兩個值改變不會相互影響；
  • 引用型別用instanceof() ;
    值型別用typeof();
var a = 1
var b = {};
var c = [];
a.name = 'mm';
b.name = 'Adela';

a.name // undefined
b.name // "Adela"

typeof(a) // "number"
typeof(b) // "object"
typeof(c) // "object"
b instanceof Object // true
c instanceof Array // true
複製程式碼

深拷貝方法：
① 陣列： slice、concat、ES6擴充套件運算子實現陣列的深拷貝

var arr1 = [1, 2, 3, 4]
var arr2 = arr1.slice(0)
arr2.pop() // 4
arr1 // [1, 2, 3, 4]
arr2 // [1, 2, 3]
複製程式碼
var arr1 = [1, 2, 3, 4]
var arr2 = arr1.concat()
arr2.pop() // 4
arr1 // [1, 2, 3, 4]
arr2 // [1, 2, 3]
複製程式碼
var arr1 = [1, 2, 3, 4]
var [...arr2] = arr1
arr2.pop() // 4
arr1 // [1, 2, 3, 4]
arr2 // [1, 2, 3]
複製程式碼

② 物件：JSON.parse(JSON.stringify(obj1)、ES6擴充套件運算子實現陣列的深拷貝
JSON.parse(str): parse用於從一個字串中解析出json物件
JSON.stringify(obj):stringify()用於從一個物件解析出字串

var obj1 = {
  name: 'Adela',
  age: '18',
}
var obj2 = JSON.parse(JSON.stringify(obj1))
obj1.name = 'mm'
obj1 // {name: "mm", age: "18"}
obj2 // {name: "Adela", age: "18"}
複製程式碼
var obj1 = {
  name: 'Adela',
  age: '18',
}
var {...obj2} = obj1
obj1.name = 'mm'
obj1 // {name: "mm", age: "18"}
obj2 // {name: "Adela", age: "18"}
複製程式碼

3.JavaScript作用域瞭解嗎？有多少種？

作用域：是指你程式碼的上下文環境，js作用域包括全域性作用域、函式作用域、塊作用域（ps:這是ES6新增的）

4.說說 async 和 await

async是非同步的簡寫，而await可以認為是async wait 的簡寫。
async 用於申明一個 function 是非同步的，而 await 用於等待一個非同步方法執行完成。

sync 會將其後的函式（函式表示式或 Lambda）的返回值封裝成一個Promise 物件，而 await 會等待這個 Promise 完成，並將其resolve的結果返回出來。

async/await 的優勢在於處理 then 鏈

// 假設一個業務，分多個步驟完成，每個步驟都是非同步的，而且依賴於上一個步驟的結果
async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time2);
    const result = await step3(time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();
複製程式碼

Async 函式的錯誤處理

當 async 函式中只要一個 await 出現 reject 狀態，則後面的 await 都不會被執行。解決辦法：可以新增 try/catch

let a;
async function correct() {
    try {
        await Promise.reject('error')
    } catch (error) {
        console.log(error)
    }
    a = await 1
    return a
}
複製程式碼

術語
1.語法糖（Syntactic Sugar），也稱糖衣語法，指在計算機語言中新增的某種語法，這種語法對語言本身功能來說沒有什麼影響，只是為了方便程式設計師的開發，提高開發效率。說白了，語法糖就是對現有語法的一個封裝。

相關文章