常見的JavaScript“陷阱”

greatwhole 發布于2019-08-23 17:10 / 1245人閱讀

摘要：隨著標準的普及，已經擁有許多新的語法糖，這讓我們編寫可讀的，高質量的代碼變得更加方便，但即使這樣仍然會遇到一些潛在的陷阱。例如集合的最終長度是，由于兩次添加的數組不是同一個。最終會得到大小為的集合，因為字符串是不可變。

隨著ES6標準的普及，JavaScript已經擁有許多新的語法糖，這讓我們編寫可讀的，高質量的代碼變得更加方便，但即使這樣仍然會遇到一些潛在的"陷阱"。

箭頭函數與對象字面量

箭頭函數提供了更簡潔和更短的語法，其中一個可用功能是您可以將函數編寫為具有隱式返回值的lambda表達式。

例如：

const numbers = [1, 2, 3, 4];
numbers.map(function(n) {
  return n * n;
});

可以使用箭頭函數簡化

const numbers = [1, 2, 3, 4];
numbers.map(n => n * n);

但如果我們希望映射到對象，可能并不會像我們期望的那樣。

const numbers = [1, 2, 3, 4];
numbers.map(n => { value: n });

上面的結果并非映射到對象，而是映射到undefined。花括號被解釋為箭頭函數的塊范圍，值語句實際上最終成為標簽，上面的代碼將被Javascript解釋器翻譯成：

const numbers = [1, 2, 3, 4];
numbers.map(function(n) {
  value:
  n
  return;
});

解決方法非常微妙，我們只需要將對象包裝在括號中，將其轉換為表達式而不是塊語句，如下所示：

const numbers = [1, 2, 3, 4];
numbers.map(n => ({ value: n }));

箭頭函數與this指針

箭頭函數沒有自己的this綁定，這意味著它們的this值將this與封閉的詞法范圍的值相同。盡管語法可以說是“更光滑”，但箭頭函數功能并不能適用于所有的情況，比如你可能會遇到：

let calculator = {
  value: 0,
  add: (values) => {
    this.value = values.reduce((a, v) => a + v, this.value);
  },
};
calculator.add([1, 2, 3]);  
console.log(calculator.value);  // 0

我們期望這里的this綁定的是計算器對象，但它實際上會導致this未定義或指向全局對象。而常規函數是有一個this綁定，當在一個對象上調用時，它將指向該對象，因此在添加對象方法時仍然應該使用常規函數。

let calculator = {
  value: 0,
  add(values) {
    this.value = values.reduce((a, v) => a + v, this.value);
  },
};
calculator.add([10, 10]);
console.log(calculator.value);  // 20

由于箭頭函數沒有this綁定，因此使用Function.prototype.call，Function.prototype.bind和Function.prototype.apply也不能給它綁定上下文對象。

比如下面的代碼我們嘗試使用Function.prototype.call為箭頭函數綁定計算器對象，但實際上綁定的是全局對象。

const adder = {
  add: (values) => {
    this.value = values.reduce((a, v) => a + v, this.value);
  },
};
let calculator = {
  value: 0
};
adder.add.call(calculator, [1, 2, 3]);
console.log(calculator.value);  // 0

自動插入分號

雖然自動插入分號（ASI）不是一個新功能，但它是JavaScript中最奇怪的功能之一，因此值得一提。

請看下面的代碼：

return
{
  value: 42
}

有人可能認為它將返回對象，但它實際上將返回undefined，因為分號插入發生，使其成為一個空的return語句，后跟一個block語句和一個label語句。

最終的代碼會被解釋成：

return;
{
  value: 42
};

所以即使不得已使用分號，也不要在括號、模板字符串和普通字符串前使用換行。

淺集合

ES6中的集合不允許重復的元素，當元素是基本數據類型時，會比較值是否相等；當元素是引用數據類型時，會比較引用對象是否是同一個。

例如：

let set = new Set();
set.add([1, 2, 3]);
set.add([1, 2, 3]);
console.log(set.size);  // 2

集合的最終長度是2，由于兩次添加的數組不是同一個。

let set = new Set();
set.add([1, 2, 3].join(","));
set.add([1, 2, 3].join(","));
console.log(set.size);  // 1

最終會得到大小為1的集合，因為字符串是不可變。如果您發現自己需要存儲一組可以序列化的對象，則可以將其用作解決方法。

類和函數

在JavaScript中，常規函數被提升到詞法范圍的頂部，這意味著下面的示例將按照人們的預期運行：

let segment = new Segment();
function Segment() {
  this.x = 0;
  this.y = 0;
}

但是對于類來說情況并非如此，實際上沒有提升類，下面的代碼會導致異常Uncaught ReferenceError: Segment is not defined

let segment = new Segment();
class Segment {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
}

Finally 關鍵字特例

請看下方的代碼：

(function(){
    try {
      return true;
    } finally {
      return false;
    }
})()  // false

我們可能認為第一個return語句使函數實際返回并彈出調用堆棧，但Finally關鍵字例外，因為finally語句總是運行所以結果是finally塊中的return語句返回。

本文首發于公眾號「前端新視界」，分享前端資訊、技術干貨、編碼人生，歡迎關注。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103934.html

JavaScript中8個常見的陷阱

摘要：然而，不會在年的基礎上加，而只是表示年。閉包這是一個經典的面試題雖然期望輸出，然而實際上卻不會。因為第行的沒有在正確的環境下執行。譯者按: 漫漫編程路，總有一些坑讓你淚流滿面。原文: Who said javascript was easy ? 譯者: Fundebug 為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。這里我們針對JavaScri...

doodlewind 2019-08-21 11:46 評論0 收藏0
JavaScript字符串轉數字的5種方法及其陷阱

摘要：例如注意字符串中的負十六進制數字是一個特殊情況，如果你用解析，結果是不正確的。轉換十六進制數時要小心，如果你不知道要轉換對象的類型，不要使用。字符串轉換為數字的方式總結負十六進制數字符串轉換為數字時。摘要：JavaScript 是一個神奇的語言，字符串轉數字有 5 種方法，各有各的坑法! 原文: Converting Strings to Number in Javascript...

shengguo 2019-08-23 16:44 評論0 收藏0
吐槽Javascript系列三：數組的陷阱

摘要：雖然本系列是吐槽，但并不是為了黑，而是揭露它的一些特性怪癖，只有更好的了解它，才能更好的使用它。本篇主要介紹數組中常見的隱患點。雖然本系列是吐槽，但并不是為了黑Javascript，而是揭露它的一些特性（怪癖），只有更好的了解它，才能更好的使用它。本篇主要介紹數組中常見的隱患點。龜速的map 在數組中，map是一個功能很強大的方法，先來見識一下： let arr = [5, 2, ...

U2FsdGVkX1x 2019-08-23 15:24 評論0 收藏0
前端面試題收集，持續更新中

摘要：對于所訪問的每個元素，函數應該將該元素傳遞給所提供的回調函數。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內核有哪些？介紹一下你對瀏覽器內核的理解？...

kgbook 2019-08-22 16:49 評論0 收藏0
前端面試題收集，持續更新中

摘要：對于所訪問的每個元素，函數應該將該元素傳遞給所提供的回調函數。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內核有哪些？介紹一下你對瀏覽器內核的理解？...

2json 2019-08-29 15:12 評論0 收藏0