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