Web开发的最佳JavaScript技巧

您是否一直在寻找一些很棒的JavaScript技巧？ 这篇文章将概述各种有趣且有效的JS技巧，以帮助您学习Internet上使用最广泛的编程语言之一。

我们将介绍以下JavaScript主题；

JavaScript中的数组方法

数组是JavaScript和一般任何编程语言的最重要组成部分之一。 通常，它被误认为是其自身的数据类型，实际上是 Object，以及功能。 简单来说，数组是一种复合数据结构，可以容纳无限数量的任何类型的值。 每个值都有数字索引（即，每个值都有一个数字，指定其在数组中的位置）。 这使阵列在存储和组织数据方面极为灵活。 数组可以存储字符串，数字，对象甚至其他数组。 这篇文章将概述一些最常用的内置JavaScript数组方法。 您可以使用这些方法或函数来处理和处理数组中的数据。

concat()

新的 concat() 方法，“连接”的缩写，允许我们将两个数组连接在一起：

var colors = [“”黑色“，”白色“，”蓝色“]；
var colors2 = [“”绿色“，”黄色“，”紫色“];
 
document.write（colors.concat（colors2））;
//输出：“黑色，白色，蓝色，绿色，黄色，紫色”

 

在其自己的， concat() 不会更改调用该方法的原始数组。 呼唤 colors 仍将只输出3个值的原始数组。 为了更新原始数组，您需要在上调用方法 colors 数组，重新分配变量：

在其自己的， concat() 不会更改您在其上调用方法的原始数组。 呼唤 colors 仍将只输出3个值的原始数组。 要更新原始数组，您需要在上调用方法 colors 数组，重新分配变量：

colors = colors.concat（colors1）; 

 

push()

通常，您只想将新项目添加到数组的末尾，即可使用 push() 方法。 您可以在同一调用中将单个或多个值推送到数组：

var colors = [“”黑色“，”白色“，”蓝色“]；
colors.push（“ green”，“ yellow”）;
 
document.write（colors）;
//输出：“黑色，白色，蓝色，绿色，黄色”

 

不比 concat(), push() 不 使用您推入的值更新原始数组。

unshift()

像 push(), unshift() 会将一个或多个新值添加到 开始 的数组：

var colors = [“”黑色“，”白色“，”蓝色“]；
colors.unshift（“ green”）;
 
document.write（colors）;
//输出：“绿色，黑色，白色，蓝色”

 

pop()

pop() 是逆的 push() 方法，因为它将“弹出”或删除数组的最后一个元素：

var colors = [“”黑色“，”白色“，”蓝色“]；
colors.pop（）;
 
document.write（colors）;
//输出：“黑色，白色” 

 

自 pop() 从数组中删除一个项目，通常将删除的项目存储到另一个变量中以用于其他用途：

var lastItem = colors.pop（）;
 
document.write（lastItem）;
//输出：“蓝色”

 

shift()

同样， shift() 将删除数组中的第一项：

var colors = [“”黑色“，”白色“，”蓝色“]；
colors.shift（）;
 
document.write（colors）;
//输出：“白色，蓝色”； 

 

您还可以使用 shift() 与将删除的项目存储在新变量中同时进行：

var firstItem = colors.shift（）;
 
document.write（firstItem）;
//输出：“黑色” 

 

reverse()

顾名思义， reverse() 方法将反转数组中值的顺序：

var myArray = [1];
var reversedArray = myArray.reverse（）;
 
document.write（reversedArray）;
//输出：10、9、8、7、6、5、4、3、2、1

 

reverse() 不会更改原始数组。 您需要将反向数组存储在新变量中。 或者，您可以将其重新分配给原始变量，以保留反向的更改。

join()

新的 join() 数组方法会将数组中的所有值合并为一个字符串，然后返回该字符串：

var colors = [“”“，”白色“，”蓝色“，”绿色“]；
console.log（colors.join（））;
//输出：黑色，白色，蓝色，绿色 

 

有一个可选的“ separator”参数可以包含在其中 join()。 此参数指示一个字符（或一组字符）以分隔字符串中的每个值。 下面的示例将每个值都用逗号分隔，后跟一个空格字符：

var colors = [“”“，”白色“，”蓝色“，”绿色“]；
console.log（colors.join（'，'）;
//输出：黑色，白色，蓝色，绿色 

 

join() 不会修改原始数组。 您需要将修改分配给变量才能保存。

var colorList = colors.join（'，'）;
console.log（colorList）;
//输出：黑色，白色，蓝色，绿色
 
console.log（colors）;
//输出：[“黑色”，“白色”，“蓝色”，“绿色”]
//即仍然是原始数组

 

sort()

sort() 将以字母数字顺序对数组的值进行排序。 sort() 不 更新原始数组：

var arr1 = [4，9，3，2，1];
arr1.sort（）;
console.log（arr1）;
//输出：[1、2、3、4、9]

 

sort() 仅在调用该方法时订购值。 如果您在数组中添加或修改值，则需要再次调用它以重新排序。

indexOf()

indexOf() 将返回作为字符串参数提供给该方法的搜索词的索引值：

var colors = [“”“，”白色“，”蓝色“，”绿色“]；
colors.indexOf（'white'）;
//返回1

 

如果没有索引匹配 searchValue 参数， indexOf() 将返回 -1:

var colors = [“”“，”白色“，”蓝色“，”绿色“]；
colors.indexOf（'orange'）;
//返回-1

 

indexOf() 区分大小写：

colors.indexOf（'Blue'）;
//返回-1

 

还有一个可选的 fromIndex 参数。 这表明应该从哪个索引值开始搜索。 如果未提供，则从索引处开始搜索 0 默认：

var名称= [“ Michael”，“ John”，“ Sarah”，“ Michael”，“ Matthew”]；
names.indexOf（'Michael'，2）;
//返回3 

 

slice()

新的 slice() 方法将返回数组的“切片”，由起点和终点的可选参数表示。 slice() 保留原始数组不变：

新的 slice() 方法将返回数组的“切片”。 您可以通过其可选参数指示起点和终点。 slice() 保留原始数组不变：

var colors = [“黑色”，“白色”，“蓝色”，“绿色”，“紫色”，“橙色”]；
var colors2 = colors.slice（2，5）;
console.log（colors2）;
//输出：[“ blue”，“ green”，“ purple”]
 
var colors3 = colors.slice（1）;
console.log（colors3）;
//输出：[“白色”，“蓝色”，“绿色”，“紫色”，“橙色”];
 
console.log（colors）;
//输出：[“黑色”，“白色”，“蓝色”，“绿色”，“紫色”，“橙色”]； 

 

filter()

filter() 有点类似于 slice() 方法。 主要区别在于它会根据某些条件创建一个新数组。 数组中通过条件的每个值都“过滤”到新数组中。 过滤条件是通过回调函数设置的：

var someWords = [“简单”，“困难”，“加密”，“社会”，“总计”，“挑剔”，“复杂性”]；
 
函数checkSize（w）{
    返回w.length> 5;
}
 
var bigWords = someWords.filter（checkSize）;
console.log（bigWords）;
//输出：[“加密”，“社会”，“挑剔”，“复杂性”] 

 

上面的示例使用 checkSize() 回调函数，用于过滤所有少于6个字符的单词。 还将所有剩余值放在一个名为 bigWords.

every()

新的 every() 数组方法将检查数组中的每个值是否通过条件。 这里的条件也是通过回调函数提供的。 如果通过，该方法将返回 true，如果没有，它将返回 false:

var nums = [20，31，18，500];
 
函数GreaterThan10（值）{
    返回值> 10;
}
 
console.log（nums.every（greaterThan10））;
//输出：true

 

上面的示例进行了测试，以查看是否 nums 数组大于 10，返回 true.

isArray()

顾名思义， .isArray() 将检查传递给它的值是否为数组：

Array.isArray（['blue'，'yellow''green']）; //返回true
Array.isArray（3）; //返回false
Array.isArray（'hello'）; //返回false

 

findIndex()

findIndex() 几乎与 indexOf() 方法。 它将返回满足条件的数组中第一个值的索引。 通过回调函数设置条件。 如果未找到满足条件的值，则该函数返回 -1.

var colors = ['黑色'，'蓝色'，'黄色'，'绿色'，'紫色']；
 
函数GreaterThanFive（e）{
    返回e.length> 5;
}
 
var indexOfLargeValue = colors.findIndex（greaterThanFive）;
console.log（indexOfLargeValue）;
//输出：2

 

forEach()

新的 forEach() 方法将对调用该方法的数组中的每个值执行一个回调函数。 这对于将值平均添加到数组中的每个索引以及许多其他应用程序中很有用。 但是，这不会修改原始数组，因此需要将新值保存到另一个变量：

var nums = [1、2、3、5、8、13]；
var numsUpdated = [];
 
函数addTwo（e）{
    和+ = 2;
    numsUpdated.push（e）;
}
 
nums.forEach（addTwo）;
console.log（numsUpdated）;
//输出：[3、4、5、7、10、15]

 

这类似于使用 for 循环以稍微更简单的语法遍历数组。

includes()

您可以使用 includes() 检查某个数组是否包含给定值。 如果数组这样做，它将返回 true，如果没有，它将返回 false.

var colors = ['黑色'，'蓝色'，'黄色'，'绿色'，'紫色']；
 
console.log（colors.includes（'blue'））;
//输出：true
 
console.log（colors.includes（'red'））;
//输出：false

 

有一个可选的第二个参数， fromIndex。 这将指示从何处开始搜索：

var colors = ['黑色'，'蓝色'，'黄色'，'绿色'，'紫色']；
 
console.log（colors.includes（'blue'，2））;
//输出：false
 
console.log（colors.includes（'blue'，1））;
//输出：true

 

lastIndexOf()

像 indexOf(), lastIndexOf() 将在数组中找到给定值的最后一个实例，而不是第一个实例。 该方法将从数组的末尾开始搜索，并从头开始直到找到合适的匹配为止。 如果找不到匹配项，则该方法将返回 -1:

var food = ['sushi'，'pizza'，'cheeseburger'，'sushi'，'pasta']；
 
console.log（food.lastIndexOf（'sushi'））;
//输出：3
 
console.log（food.lastIndexOf（'burrito'））;
//输出：-1

 

.toString()

.toString() 有点类似于 .join() 方法，因为两者都可以将值的完整索引作为字符串返回。 toString() 是一种简单得多的方法。 它没有用于指定在每个值之间放置“分隔符”字符的可选参数。 数组中的所有值都将简单地用逗号分隔（没有空格）。 这可能是好事，也可能是坏事，具体取决于应用程序。

使用JavaScript发出API请求

与第三方服务进行交互（如果不是最重要的组件）之一就是与其API进行通信。 代表 应用程式介面，这是不同的网站，应用程序和Web服务可以相互通信，来回接收和发送数据的主要方式。 本教程将作为通过JavaScript连接到Web API的基本介绍，并能够接收或读取 GET 请求以JSON返回数据（或 JavaScript对象表示法）格式。 本教程假定您具有JavaScript对象和访问属性的基本知识，但本指南适用于没有使用API​​经验的个人。

介绍

在本教程中，我们将介绍 吉卜力API，旨在向人们介绍应用程序编程接口（以及吉卜力工作室电影的爱好者）。

该API分为5个不同的模块或组件，用于与吉卜力工作室相关的不同类别的数据（电影，人物，位置，种类和车辆）。 这些组件中的每一个都更正式地称为 端点。 通过呼叫端点时 GET （或另一种类似的方法，例如 fetch），端点将以JSON格式返回特定于该类别的数据数组。 例如，电影的端点看起来像这样：

我们将使用Films的终结点（可用 此处），通过拨打电话 GET， 然后 log 数据的各个部分 console.

//创建一个新的XMLHttpRequest并将其保存到变量
VAR 接收 = 新 XMLHttpRequest的（）;
 
//通过`GET`方法指示我们要打开的端点
接收.打开('得到', 'https://ghibliapi.herokuapp.com/films', true);
 
//端点加载后在函数中执行代码
接收.负载 = 功能 （）{
 
  //将传入的数据解析为JSON格式  
  VAR 来 = JSON.解析(Free Introduction.响应);
  
  //使用.map数组方法遍历Films中的每个索引
  //端点，然后访问发布日期，标题和烂番茄 
  //从每个得分，将它们记录到控制台，并添加一些其他内容
  //格式化
  来.地图(薄膜 => {
      领事.日志(薄膜.发布日期 + “：” + 薄膜.标题 + “-（” +  薄膜.rt_score + “烂番茄的百分比）”);
    }）;
};
 
//发送实际的请求，以执行分配给 
//`receive.onload`
接收.提交（）;    

将以上代码输入到浏览器控制台中，或通过作为链接到网页的JavaScript文件运行，应返回以下内容：

…我们在其中显示发行年份，电影的名称及其在烂番茄上的总体评级（以及一些其他格式以便更清晰易读）

API调用说明

上面脚本中记录的注释应使大多数API调用具有解释性，但是其中的数据操作 receive.onload 值得进一步的细节。

新的 .map() 数组用于遍历电影端点内的每个索引（即每个电影）。 一个 for 循环也可以在这里使用，尽管 .map() 用更少的代码即可完成相同的操作。 .map() 接受一个回调函数（此处以ES6语法编写）。 对端点中的每个项目执行回调函数中的代码，以获取其发布日期（films.release_date），标题（films.title），并在烂番茄（films.rt_score).

为简单起见， console.log 消息用于每个项目，但是可以很容易地将此​​数据添加到页面上的HTML元素，或使用其他数组方法进一步排序（即仅过滤1980年代的电影）。 尽管使用API​​服务还有更多工作，但这是从API端点检索数据的机制的高级概述。

JavaScript中的“ for”循环概述

计算机编程的基本原理是“ DRY”或“ Do n't Repeat Yourself”的长期口号。 每当您发现自己一遍又一遍地重写相同的代码时，就有可能有更好的重构方法，而无需重复相同的代码行。 完成此操作的最佳方法之一是循环。 有几种不同的循环，所有循环以各种形式存在于所有编程语言中。 在本文中，我们将介绍一种最常见且最有用的循环形式，即 for 环。

一个基本的例子

作为说明循环在哪里非常有用的介绍，假设您想将“Hello World”打印到 JavaScript开发人员 安慰。 如果不使用循环，您将不得不按照以下内容编写一些内容：

console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）; console.log（“ Hello World”）;

 

这是非常繁琐且效率低下的。 上面的10行代码仅需以下3行就可以大大简化：

for（var i = 0; i <10; i ++）{console.log（“ Hello World”）; }

 

上面的例子是所谓的 for 循环，最常见和有用的循环形式之一。

新的 for 循环

编写一个 for 循环：计数器或初始表达式，条件，增量表达式以及要在循环内执行的代码。 我们将分解上面创建循环的示例，该循环将“ Hello World”打印到控制台十次。

全部商品 for 循环以关键字开头 for，然后是一组括号，然后是方括号。 要执行的代码放在方括号内。 一个的骨架结构 for 循环可以看成是：

for（计数器；条件；增量）{//要执行的代码在此处}

 

计数器必须设置为变量； 在编程中，这通常设置为 i，尽管可能是 x, n 或语言允许的任何变量名称。 这将告知循环其起始值，在这种情况下， 0.

循环的下一部分告诉JavaScript条件：在这种情况下，只要将 i 小于10。一旦循环达到10，它将停止。 它的 非常 在尝试运行循环之前先设置条件集非常重要，否则最终将导致无限循环，最终将导致浏览器超载和崩溃。

括号中循环的最后一部分是增量： i++. i++ 是JavaScript中的简写形式 i += 1 or i = i + 1。 换句话说，它将1加到 i 每次循环运行。 这也是循环的关键组成部分，好像它实际上没有增加，也不会终止。

放在括号内的任何代码都将在循环的每次迭代中运行。 如果您想获得每次运行循环时迭代的某种指示，只需添加计数器变量即可将其包含在每次应返回的代码中（即，代码在方括号内运行） ）：

for（var i = 1; i <= 10; i ++）{console.log（“循环现在在迭代中” + i）; }

 

上面的代码运行时将打印：

循环现在处于迭代1循环现在处于迭代2循环现在处于迭代3循环现在处于迭代4循环现在处于迭代5循环现在处于迭代6循环现在处于迭代7循环现在在迭代8上循环现在在迭代9上循环现在在迭代10上

Node.js简介

自Mozilla联合创始人Brendan Eich于1995年首次提出JavaScript以来，它的发展已经走了很长一段路。 JavaScript最初用作客户端脚本语言，如今已将其用途扩展到了远远超出其最初意图的应用程序。 该语言不再是仅在客户端使用的语言。 随着介绍 Node.js， 现在，服务器端也使用了JavaScript，从而取代了对其他后端语言（如PHP，Python或Ruby）的需求。

不仅仅是新奇事物，越来越多的开发人员和公司开始在后端使用 JavaScript，允许所有开发工作都用一种语言完成。 为了更好地了解为什么这会成为一种日益增长的趋势，这篇文章将看看 Node.js的 是，以及它最适合用来做什么。

Node.js的解释

Node.js是一个JavaScript框架或库，旨在将JavaScript用作主要的服务器端脚本语言。 它不是一种新语言，只是为JavaScript语言编写的一部分代码。 它最初由Ryan Dahl于2009年创建，基于Google Chrome的JavaScript V8引擎构建，该引擎本身的开发目的是提供比其他现有JavaScript引擎更好的性能。 Node.js是完全开源的，可以在每个操作系统上运行，并且围绕该项目的大型开发人员社区正在不断对其进行改进。

由于它专门供后端使用，因此Node.js附带了许多模块来处理可能会使用服务器端脚本语言的常见任务。 这可以极大地加快开发过程，抽象出您必须从头开始编写的常用功能。

Node.js的基本功能

以下是 Node.js 与其他脚本不同的一些基本特性 框架:

事件驱动的异步编程

用作Node.js框架的API完全是异步的，否则称为非阻塞。 这相当于Node.js无需等待特定的API发送数据而无需继续执行其他任务。 Node.js将继续使用另一个API，以跟踪仍在等待从其他API接收的数据。

高性能

与其他服务器端替代产品相比，Node.js在Google Chrome的V8引擎上构建的速度非常快。 根据所比较的版本，在基准测试中，Node.js的性能优于PHP和Python。

避免缓冲

为了避免缓冲，Node.js应用程序始终以块的形式输出数据。

可扩展

Node.js被开发用于小型项目和大型企业系统。 Node.js利用单线程模型来允许异步事件，而常见的服务器语言则利用有限数量的线程来处理数据请求。 最终，这意味着与更典型的服务器设置（例如Apache HTTP）相比，Node.js一次可以处理更多的服务器请求。

实践中的Node.js

从开源项目或小型创业公司到财富500强公司，Node.js的用途广泛。 利用Node.js的公司的简短列表包括PayPal，Uber，Microsoft，eBay和GoDaddy。

什么Node.js最适合

Node.js的真正用途包括与I / 0绑定的应用程序，例如聊天消息，实时视频等数据流服务，数据密集型实时应用程序（DIRT），单页Web应用程序以及利用许多基于JSON的API。

总结

我们希望您可以从本文中找到一些有用的技巧，以供您使用。 下一个Javascript项目。 随时通过下面的评论部分发布您的反馈和JS技巧。

您可能还想查看这个比较好的资源 JavaScript 与 PHP.