JavaScript备忘单：提示和技巧_javascript_前端_博客

JavaScript是世界上最受欢迎的语言之一。在本文中为大家提供了其最显着特征的快速概述，以及面向初学者和专家的一些代码示例。

谈到编程语言时，值得一提的是JavaScript，它已成为当今最流行和使用最多的语言之一。本文的主要目的是让您快速了解其最明显的特征。因此，它非常适合刚开始其职业生涯的初级程序员以及有经验的开发人员，他们想要在早上喝咖啡的同时补充自己的知识。我们没有时间可以浪费，所以让我们进入JavaScript的世界。

什么是JavaScript？

简而言之，它是用于Web编程的强大语言。HTML和CSS会分别定义网页的内容框架和指定其布局，而JavaScript负责对其行为进行编程。它是一种高级的解释型运行时语言，支持命令式，面向对象和函数式编程样式。它由Brendan Eich于1995年创建。很快，在1997年，它被ECMAScript语言规范标准化。

Hello World示例

我将从熟悉的传统编程语言开始，即如何编写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>标记之间，直接插入HTML中。该脚本可以放在HTML页面的<body>或<head> 部分中，或同时放置在这两者中。
外部JavaScript文件，当您必须在许多不同页面中使用它时，它很有用。您应该只指定脚本文件的名称。所有JavaScript文件均具有.js扩展名。 <script src =” script.js”> </ script>

常见错误

在本节中，我将讨论人们通常犯的最常见错误以及如何避免它们。

忘记JavaScript块级作用域

JavaScript最明显的怪癖之一是，它不会为每个代码块创建新的作用域。考虑以下代码：

for ( var i = 0 ; i < 10 ; i ++) { // some code } console . log ( i );

大多数有经验的开发会说，输出会null，undefined或error。所有这些都是错误的，尽管在许多其他语言中也是如此。对于实际输出i variable是10。之所以如此，是因为变量的作用域不限于for循环作用域，并且其值保持在上一次循环迭代期间的状态。您可以使用let关键字而不是来解决此问题var。它将克服上面的问题，并且代码将按多种语言运行。您可以let 在此处找到更多信息。

未定义不为空

JavaScript同时使用undefined和not null，但是它们在不同的上下文中使用。Null是对象的默认值，而undefined变量和属性的默认值。要成为一个对象null，必须对其进行定义，否则将为undefined。以下代码描述了这种情况。

if ( obj !== null && typeof obj !== "undefined" )  if ( typeof myObj !== "undefined" && myObj !== null)

平等

与某些其他语言不同，JavaScript有一个额外的操作符可用于比较：= = =。= =和= = =之间的基本区别称为类型强制（此处有更多信息）。简而言之，这意味着当运算符的操作数为不同类型时，将根据ECMA-262规范转换其中之一。

当使用==时，即使值是不同的类型，也可以将它们视为相等，因为运算符会在执行比较之前将一个或两个运算符强制转换为单一类型。例如：

console . log ( 5 == '5' ); console . log ( null == undefined );  console . log ( '' == 0 ); console . log ( '0' == false );

但是，如果使用非转换比较运算符= = =，则不会发生转换。换句话说，仅当它们属于相同类型时才比较这些值。如果操作数的类型不同，则答案始终为假。

console . log ( 7 === 7 ); // Output: true console . log ( 4 === '4' ); // Output: false.

“This”关键字

This对于新手和熟练的JavaScript开发人员来说，“ ”关键字都是最奇怪和令人困惑的事情之一。在JavaScript中，this'是函数的当前执行上下文。它是对调用函数的对象的引用。

考虑以下示例：

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

当我们称sayHi()执行上下文为全局对象时。在这种情况下，它是窗口。请记住，在函数中this使用的值是“拥有”该函数的对象，这将是重要且有用的。this在对象中使用的值是对象本身。这不是变量。它是一个关键字。您无法更改的值this。（更多信息在这里。）

就我所写的最常见的错误而言，它们永远都不会结束。我建议您在此处和此处查看有关常见错误的参考，以获取更多信息。

常用表达

您是否可以想象是否需要在文本中搜索数据并需要描述您要搜索的内容？如您所知，正则表达式将非常适合您的任务。它们是用于匹配字符串中字符组合的模式（字符序列）。该序列形成一个搜索模式，可用于诸如文本搜索和替换之类的操作。

您可以通过两种方式创建正则表达式：

1.使用文字，由包含在斜线和修饰符之间的模式组成。

var pattern = /dreamix/ i ; // The template is / pattern / modifiers;

2.调用RegExp对象的构造函数，如下所示：

var regExpr = new RegExp ( 'dreamix' );

在第一个示例中，/dreamix/i是正则表达式，dreamix是搜索中使用的模式并且i是修饰符（将搜索修改为不区分大小写）。

使用正则表达式

您必须已经注意到上一个项目符号中的“修饰语”一词。修饰符用于执行不同类型的搜索。（例如：i–不区分大小写的匹配；g–所有匹配都在第一个匹配之后不停止；m–多行匹配。）

此外，当在正则表达式中使用特殊字符时，它们具有特殊的价值。您可以查看其完整列表以更好地了解。

有两种处理正则表达式的方法。第一组由所谓的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.

如果您对正则表达式感兴趣，可以在RegExo 和正则表达式的Mozilla开发网络上查看以下页面，以了解更多详细信息。

JSON格式

您是否知道客户端（网络浏览器）和服务器之间交换的数据只能是文本？您是否还记得有一种灵活的格式，可以将任何JavaScript对象转换为文本并将其发送到服务器，反之亦然。此处的解决方案是JSON（JavaScript对象表示法）。它是一种用于传输数据的文件格式，它建立在两个结构上：

键值对的集合。在大多数编程语言中，可以将此集合视为对象，字典，哈希表或关联数组。
值列表。在各种语言中，这称为数组，向量或列表。

例：

{ "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)函数用于将JavaScript对象转换为遵循JSON表示法的字符串。

var companyJSON = '{ "name":"Dreamix", "city":"Sofia" }'; var obj = JSON . parse ( companyJSON ); console . log ( obj . name ); // Output: Dreamix

在这种情况下JSON.parse(json)，用于将JSON字符串转换为有效的JavaScript对象。JSON的主要好处是它是平台和语言无关的。机器很容易生成来解析它，人们也很容易阅读或编辑它。它比XML有用，因为可以通过简单的JS函数解析JSON，而您将需要XML的XML解析器。而且，JSON更短，不使用标签，而且阅读和理解起来也更快。

有趣的JavaScript插件和库

通常，编程语言的优势在于为其开发的所有插件和库。在JavaScript中，数量很多，其中大多数有用，并且提供了轻量级且解决问题的解决方案，使每个JS开发人员都可以更加轻松快捷地进行Web开发过程。

Leaflet.js是用于移动友好型交互式地图的开源JavaScript库。它使用OpenLayers和Google Maps API，它已成为最受欢迎的JavaScript映射库之一，并被FourSquare，Pinterest和Flickr等主要网站使用。（更多信息和示例在这里。）

Chart.js是一个功能强大的库，它负责在浏览器中呈现不同类型的图表。当您需要干净优雅的javascript图表时，它非常适合小型项目。它包括6个核心图表类型（折线图，条形图，雷达图，极坐标图，饼图和甜甜圈图），并以模块形式分开。这意味着您只能加载所需的模块。整个图表都是响应式的。（更多信息在这里和在GitHub上。）

Flexdatalist是一个jQuery插件，用于创建自动完成输入字段，并支持

制表器是一个易于使用的jQuery交互式表生成插件。它使您可以在几秒钟内从任何HTML表，Javascript数组，AJAX数据源或JSON格式的数据创建交互式表。它带有完整的CSS类集，可以做出完美的样式。（更多信息和示例在这里。）

Marginotes接受您的jQuery选择，并使用HTML属性中提供的文本在空白处添加注释。如果您不想使用jQuery，那么还有一个没有它的版本。（示例和源代码在这里。）

Philter是一个JS插件，可让您使用HTML属性控制CSS过滤器。它既可以作为jQuery插件，也可以作为普通JavaScript来使用。（有关示例请访问其官方网站在这里。）

D3.js是一个用于在Web浏览器中生成动态，交互式数据可视化的库。它可以帮助您使用HTML，SVG和CSS使数据栩栩如生。最新版本更改了整体概念，并且将其分为多个模块，可以在需要一个或多个模块时将其包含在内。（此处和此处提供更多信息和示例。）

您可以猜测，这不是所有JS库和插件的完整列表。这只是其中的一些及其可以做的事情的快速概述。参考部分提供了更多库。

结论

尽管我们必须结束JavaScript备忘单的结尾，但这绝对并不意味着我已经对语言特性，库或错误有所了解。涉及的内容太多了，我们只有时间来快速浏览。希望您学到了一些对您的日常工作有所帮助的新知识。