成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

常見的JavaScript“陷阱”

greatwhole / 1251人閱讀

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

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

箭頭函數(shù)與對象字面量

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

例如:

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

可以使用箭頭函數(shù)簡化

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

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

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

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

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

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

const numbers = [1, 2, 3, 4];
numbers.map(n => ({ value: n }));
箭頭函數(shù)與this指針

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

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綁定的是計算器對象,但它實際上會導(dǎo)致this未定義或指向全局對象。而常規(guī)函數(shù)是有一個this綁定,當在一個對象上調(diào)用時,它將指向該對象,因此在添加對象方法時仍然應(yīng)該使用常規(guī)函數(shù)。

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

由于箭頭函數(shù)沒有this綁定,因此使用Function.prototype.call,Function.prototype.bindFunction.prototype.apply也不能給它綁定上下文對象。

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

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,因為分號插入發(fā)生,使其成為一個空的return語句,后跟一個block語句和一個label語句。

最終的代碼會被解釋成:

return;
{
  value: 42
};

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

淺集合

ES6中的集合不允許重復(fù)的元素,當元素是基本數(shù)據(jù)類型時,會比較值是否相等;當元素是引用數(shù)據(jù)類型時,會比較引用對象是否是同一個。

例如:

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

集合的最終長度是2,由于兩次添加的數(shù)組不是同一個。

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

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

類和函數(shù)

在JavaScript中,常規(guī)函數(shù)被提升到詞法范圍的頂部,這意味著下面的示例將按照人們的預(yù)期運行:

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

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

let segment = new Segment();
class Segment {
  constructor() {
    this.x = 0;
    this.y = 0;
  }
}
Finally 關(guān)鍵字特例

請看下方的代碼:

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

我們可能認為第一個return語句使函數(shù)實際返回并彈出調(diào)用堆棧,但Finally關(guān)鍵字例外,因為finally語句總是運行所以結(jié)果是finally塊中的return語句返回。

本文首發(fā)于公眾號「前端新視界」,分享前端資訊、技術(shù)干貨、編碼人生,歡迎關(guān)注。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/103934.html

相關(guān)文章

  • JavaScript中8個常見陷阱

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

    doodlewind 評論0 收藏0
  • JavaScript字符串轉(zhuǎn)數(shù)字5種方法及其陷阱

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

    shengguo 評論0 收藏0
  • 吐槽Javascript系列三:數(shù)組陷阱

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

    U2FsdGVkX1x 評論0 收藏0
  • 前端面試題收集,持續(xù)更新中

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

    kgbook 評論0 收藏0
  • 前端面試題收集,持續(xù)更新中

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

    2json 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<