JavaScript備忘單：提示和技巧
發(fā)布于：2021-01-15 15:14:58
JavaScript是世界上最受歡迎的語言之一。在本文中為大家提供了其最顯著特征的快速概述，以及面向初學(xué)者和專家的一些代碼示例。
談到編程語言時，值得一提的是JavaScript，它已成為當(dāng)今最流行和使用最多的語言之一。本文的主要目的是讓您快速了解其最明顯的特征。因此，它非常適合剛開始其職業(yè)生涯的初級程序員以及有經(jīng)驗的開發(fā)人員，他們想要在早上喝咖啡的同時補(bǔ)充自己的知識。我們沒有時間可以浪費，所以讓我們進(jìn)入JavaScript的世界。
什么是JavaScript？
簡而言之，它是用于Web編程的強(qiáng)大語言。HTML和CSS會分別定義網(wǎng)頁的內(nèi)容框架和指定其布局，而JavaScript負(fù)責(zé)對其行為進(jìn)行編程。它是一種高級的解釋型運行時語言，支持命令式，面向?qū)ο蠛秃瘮?shù)式編程樣式。它由Brendan Eich于1995年創(chuàng)建。很快，在1997年，它被ECMAScript語言規(guī)范標(biāo)準(zhǔn)化。
Hello World示例
我將從熟悉的傳統(tǒng)編程語言開始，即如何編寫Hello World。您可以通過以下方式顯示此消息：
通過使用在瀏覽器窗口中彈出的警報框
alert("Hello world!");Enumeration structured通過使用瀏覽器控制臺
console.log("Hello world!");通過使用[removed]（）寫入HTML輸出。
[removed]("Hello world!");通過使用innerHTML寫入HTML元素。
document.getElementById("para")[removed] = "Hello world!";您還可以在以下兩個地方編寫這些語句：
在 <script> 和</ script>標(biāo)記之間，直接插入HTML中。該腳本可以放在HTML頁面的<body>或<head> 部分中，或同時放置在這兩者中。
外部JavaScript文件，當(dāng)您必須在許多不同頁面中使用它時，它很有用。您應(yīng)該只指定腳本文件的名稱。所有JavaScript文件均具有.js擴(kuò)展名。 <script src =” script.js”> </ script>
常見錯誤
在本節(jié)中，我將討論人們通常犯的最常見錯誤以及如何避免它們。
忘記JavaScript塊級作用域
JavaScript最明顯的怪癖之一是，它不會為每個代碼塊創(chuàng)建新的作用域?？紤]以下代碼：
for ( var i = 0 ; i < 10 ; i ++) { // some code } console . log ( i );大多數(shù)有經(jīng)驗的開發(fā)會說，輸出會null，undefined或error。所有這些都是錯誤的，盡管在許多其他語言中也是如此。對于實際輸出i variable是10。之所以如此，是因為變量的作用域不限于for循環(huán)作用域，并且其值保持在上一次循環(huán)迭代期間的狀態(tài)。您可以使用let關(guān)鍵字而不是來解決此問題var。它將克服上面的問題，并且代碼將按多種語言運行。您可以let 在此處找到更多信息。
未定義不為空
JavaScript同時使用undefined和not null，但是它們在不同的上下文中使用。Null是對象的默認(rèn)值，而undefined變量和屬性的默認(rèn)值。要成為一個對象null，必須對其進(jìn)行定義，否則將為undefined。以下代碼描述了這種情況。
if ( obj !== null && typeof obj !== "undefined" ) if ( typeof myObj !== "undefined" && myObj !== null)
平等
與某些其他語言不同，JavaScript有一個額外的操作符可用于比較：= = =。= =和= = =之間的基本區(qū)別稱為類型強(qiáng)制（此處有更多信息 ）。簡而言之，這意味著當(dāng)運算符的操作數(shù)為不同類型時，將根據(jù)ECMA-262規(guī)范轉(zhuǎn)換其中之一。
當(dāng)使用==時，即使值是不同的類型，也可以將它們視為相等，因為運算符會在執(zhí)行比較之前將一個或兩個運算符強(qiáng)制轉(zhuǎn)換為單一類型。例如：
console . log ( 5 == '5' ); console . log ( null == undefined ); console . log ( '' == 0 ); console . log ( '0' == false );
但是，如果使用非轉(zhuǎn)換比較運算符= = =，則不會發(fā)生轉(zhuǎn)換。換句話說，僅當(dāng)它們屬于相同類型時才比較這些值。如果操作數(shù)的類型不同，則答案始終為假。
console . log ( 7 === 7 ); // Output: true console . log ( 4 === '4' ); // Output: false.
“This”關(guān)鍵字
This對于新手和熟練的JavaScript開發(fā)人員來說，“ ”關(guān)鍵字都是最奇怪和令人困惑的事情之一。在JavaScript中，this'是函數(shù)的當(dāng)前執(zhí)行上下文。它是對調(diào)用函數(shù)的對象的引用。
考慮以下示例：
window . name = "Super Window" ; var mark = { age : 21 , name : "Mark" }; var sayHi = function () { return "Hi, I am " + this . name ; }; mark . sayHi = sayHi ; sayHi (); // Hi, I am Super Window mark . sayHi (); // Hi, I am Mark當(dāng)我們稱sayHi()執(zhí)行上下文為全局對象時。在這種情況下，它是窗口。請記住，在函數(shù)中this使用的值是“擁有”該函數(shù)的對象，這將是重要且有用的。this在對象中使用的值是對象本身。這不是變量。它是一個關(guān)鍵字。您無法更改的值this。（更多信息在這里。）
就我所寫的最常見的錯誤而言，它們永遠(yuǎn)都不會結(jié)束。我建議您在此處和此處 查看有關(guān)常見錯誤的參考，以獲取更多信息。
常用表達(dá)
您是否可以想象是否需要在文本中搜索數(shù)據(jù)并需要描述您要搜索的內(nèi)容？如您所知，正則表達(dá)式將非常適合您的任務(wù)。它們是用于匹配字符串中字符組合的模式（字符序列）。該序列形成一個搜索模式，可用于諸如文本搜索和替換之類的操作。
您可以通過兩種方式創(chuàng)建正則表達(dá)式：
1.使用文字，由包含在斜線和修飾符之間的模式組成。
var pattern = /dreamix/ i ; // The template is / pattern / modifiers;
2.調(diào)用RegExp對象的構(gòu)造函數(shù)，如下所示：
var regExpr = new RegExp ( 'dreamix' );
在第一個示例中，/dreamix/i是正則表達(dá)式，dreamix是搜索中使用的模式并且i是修飾符（將搜索修改為不區(qū)分大小寫）。
使用正則表達(dá)式
您必須已經(jīng)注意到上一個項目符號中的“修飾語”一詞。修飾符用于執(zhí)行不同類型的搜索。（例如：i–不區(qū)分大小寫的匹配；g–所有匹配都在第一個匹配之后不停止；m–多行匹配。）
此外，當(dāng)在正則表達(dá)式中使用特殊字符時，它們具有特殊的價值。您可以查看其完整列表以更好地了解。
有兩種處理正則表達(dá)式的方法。第一組由所謂的String方法組成- ，match()，replace()，search()和split()。第二個由test()和組成，exec()與一起使用RegExp。例子：
var str = "The best company is Dreamix"; var n = str . search ( /dreamix/ i ); // Output: 20. Returns the index of the match var repl = str . replace ( /company/ i , "company in the world" ); // Output: "The best company in the world is Dreamix". Replace the matched substring with a replacement substring. var res = str . match ( /company/ g ); // Output: ["company"]. Returns an array of all matches or null on a mismatch. var res = str . split ( /s/ ); // Output: ["The", "best", "company", "is", "Dreamix"]. Splits the string using a substring or regular expression as a delimiter. var res = /^The/ . test ( str ) // Output: true. Tests for a match in a string. It returns true or false var res = /best/ . exec ( str ); // Output: ["best", index: 4, input: "The best company is Dreamix"]. Searches for a match in a string and returns an array of information, otherwise null.
如果您對正則表達(dá)式感興趣，可以在RegExo 和正則表達(dá)式的Mozilla開發(fā)網(wǎng)絡(luò)上查看以下頁面，以 了解更多詳細(xì)信息。
JSON格式
您是否知道客戶端（網(wǎng)絡(luò)瀏覽器）和服務(wù)器之間交換的數(shù)據(jù)只能是文本？您是否還記得有一種靈活的格式，可以將任何JavaScript對象轉(zhuǎn)換為文本并將其發(fā)送到服務(wù)器，反之亦然。此處的解決方案是JSON（JavaScript對象表示法）。它是一種用于傳輸數(shù)據(jù)的文件格式，它建立在兩個結(jié)構(gòu)上：
鍵值對的集合。在大多數(shù)編程語言中，可以將此集合視為對象，字典，哈希表或關(guān)聯(lián)數(shù)組。
值列表。在各種語言中，這稱為數(shù)組，向量或列表。
例：
{ "companyName" : "Dreamix", "address" :{ "city" : "Sofia", "country" : "Bulgaria" }, "website" : "http://dreamix.eu", "keywords" :[ "Java EE", "AngularJS", "Oracle ADF", "Oracle SOA And BPM" ] }從上面的示例中可以看到，所有鍵和字符串值都用雙引號引起來。該值必須是唯一的String，Number，Object，Array，true，false或null。
JavaScript對象– JSON和JSON – JavaScript對象
var company = { "name" : "Dreamix" , "city" : "Sofia" }; var companyJSON = JSON . stringify ( company );請注意，該JSON.stringify(obj)函數(shù)用于將JavaScript對象轉(zhuǎn)換為遵循JSON表示法的字符串。
var companyJSON = '{ "name":"Dreamix", "city":"Sofia" }'; var obj = JSON . parse ( companyJSON ); console . log ( obj . name ); // Output: Dreamix在這種情況下JSON.parse(json)，用于將JSON字符串轉(zhuǎn)換為有效的JavaScript對象。JSON的主要好處是它是平臺和語言無關(guān)的。機(jī)器很容易生成來解析它，人們也很容易閱讀或編輯它。它比XML有用，因為可以通過簡單的JS函數(shù)解析JSON，而您將需要XML的XML解析器。而且，JSON更短，不使用標(biāo)簽，而且閱讀和理解起來也更快。
有趣的JavaScript插件和庫
通常，編程語言的優(yōu)勢在于為其開發(fā)的所有插件和庫。在JavaScript中，數(shù)量很多，其中大多數(shù)有用，并且提供了輕量級且解決問題的解決方案，使每個JS開發(fā)人員都可以更加輕松快捷地進(jìn)行Web開發(fā)過程。
Leaflet.js是用于移動友好型交互式地圖的開源JavaScript庫。它使用OpenLayers和Google Maps API，它已成為最受歡迎的JavaScript映射庫之一，并被FourSquare，Pinterest和Flickr等主要網(wǎng)站使用。（更多信息和示例在這里。）
Chart.js是一個功能強(qiáng)大的庫，它負(fù)責(zé)在瀏覽器中呈現(xiàn)不同類型的圖表。當(dāng)您需要干凈優(yōu)雅的javascript圖表時，它非常適合小型項目。它包括6個核心圖表類型（折線圖，條形圖，雷達(dá)圖，極坐標(biāo)圖，餅圖和甜甜圈圖），并以模塊形式分開。這意味著您只能加載所需的模塊。整個圖表都是響應(yīng)式的。（更多信息在這里和在GitHub上。）
Flexdatalist是一個jQuery插件，用于創(chuàng)建自動完成輸入字段，并支持
制表器是一個易于使用的jQuery交互式表生成插件。它使您可以在幾秒鐘內(nèi)從任何HTML表，Javascript數(shù)組，AJAX數(shù)據(jù)源或JSON格式的數(shù)據(jù)創(chuàng)建交互式表。它帶有完整的CSS類集，可以做出完美的樣式。（更多信息和示例在這里。）
Marginotes接受您的jQuery選擇，并使用HTML屬性中提供的文本在空白處添加注釋。如果您不想使用jQuery，那么還有一個沒有它的版本。（示例和源代碼在這里。）
Philter是一個JS插件，可讓您使用HTML屬性控制CSS過濾器。它既可以作為jQuery插件，也可以作為普通JavaScript來使用。（有關(guān)示例請訪問其官方網(wǎng)站在這里。）
D3.js是一個用于在Web瀏覽器中生成動態(tài)，交互式數(shù)據(jù)可視化的庫。它可以幫助您使用HTML，SVG和CSS使數(shù)據(jù)栩栩如生。最新版本更改了整體概念，并且將其分為多個模塊，可以在需要一個或多個模塊時將其包含在內(nèi)。（此處和此處提供更多信息和示例。）
您可以猜測，這不是所有JS庫和插件的完整列表。這只是其中的一些及其可以做的事情的快速概述。參考部分提供了更多庫。
結(jié)論
盡管我們必須結(jié)束JavaScript備忘單的結(jié)尾，但這絕對并不意味著我已經(jīng)對語言特性，庫或錯誤有所了解。涉及的內(nèi)容太多了，我們只有時間來快速瀏覽。希望您學(xué)到了一些對您的日常工作有所幫助的新知識。
