成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

常見的JavaScript“陷阱”

greatwhole / 1291人閱讀

摘要：隨著標(biāo)準(zhǔn)的普及，已經(jīng)擁有許多新的語法糖，這讓我們編寫可讀的，高質(zhì)量的代碼變得更加方便，但即使這樣仍然會(huì)遇到一些潛在的陷阱。例如集合的最終長度是，由于兩次添加的數(shù)組不是同一個(gè)。最終會(huì)得到大小為的集合，因?yàn)樽址遣豢勺儭?/p>

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

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

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

例如：

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);

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

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

上面的結(jié)果并非映射到對象，而是映射到undefined?；ɡㄌ?hào)被解釋為箭頭函數(shù)的塊范圍，值語句實(shí)際上最終成為標(biāo)簽，上面的代碼將被Javascript解釋器翻譯成：

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

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

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

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

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綁定的是計(jì)算器對象，但它實(shí)際上會(huì)導(dǎo)致this未定義或指向全局對象。而常規(guī)函數(shù)是有一個(gè)this綁定，當(dāng)在一個(gè)對象上調(diào)用時(shí)，它將指向該對象，因此在添加對象方法時(shí)仍然應(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.bind和Function.prototype.apply也不能給它綁定上下文對象。

比如下面的代碼我們嘗試使用Function.prototype.call為箭頭函數(shù)綁定計(jì)算器對象，但實(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
自動(dòng)插入分號(hào)

雖然自動(dòng)插入分號(hào)（ASI）不是一個(gè)新功能，但它是JavaScript中最奇怪的功能之一，因此值得一提。

請看下面的代碼：

return
{
  value: 42
}

有人可能認(rèn)為它將返回對象，但它實(shí)際上將返回undefined，因?yàn)榉痔?hào)插入發(fā)生，使其成為一個(gè)空的return語句，后跟一個(gè)block語句和一個(gè)label語句。

最終的代碼會(huì)被解釋成：

return;
{
  value: 42
};

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

淺集合

ES6中的集合不允許重復(fù)的元素，當(dāng)元素是基本數(shù)據(jù)類型時(shí)，會(huì)比較值是否相等；當(dāng)元素是引用數(shù)據(jù)類型時(shí)，會(huì)比較引用對象是否是同一個(gè)。

例如：

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

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

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

最終會(huì)得到大小為1的集合，因?yàn)樽址遣豢勺儭Ｈ绻l(fā)現(xiàn)自己需要存儲(chǔ)一組可以序列化的對象，則可以將其用作解決方法。

類和函數(shù)

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

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

但是對于類來說情況并非如此，實(shí)際上沒有提升類，下面的代碼會(huì)導(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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103934.html

相關(guān)文章

  • JavaScript中8個(gè)常見的陷阱

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

    doodlewind 評(píng)論0 收藏0

  • JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及其陷阱

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

    shengguo 評(píng)論0 收藏0

  • 吐槽Javascript系列三：數(shù)組的陷阱

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

    U2FsdGVkX1x 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個(gè)元素，函數(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 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個(gè)元素，函數(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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<