江苏龙网

  1. 主页 > 生活百科 > >

12个提高 JavaScript 技能的概念

JavaScript

JAVAScript 是一种复杂的语言 。如果是你是高级或者初级 JavaScript 开发人员，了解它的基本概念非常重要 。本文介绍 JavaScript 至关重要的12个概念，但绝对不是说 JavaScript 开发人员只需要知道这些就可以了 。
1.变量赋值 (值 vs 引用）理解 JavaScript 如何给变量赋值可以帮助我们减少一些不必要的 bug 。如果你不理解这一点，可能很容易地编写被无意中更改值的代码 。
JavaScript 总是按照值来给变量赋值 。 这一部分非常重要：当指定的值是 JavaScript 的五种基本类型之一（即 Boolean，null，undefined，String 和 Number）时，将分配实际值 。但是，当指定的值是 Array，Function或Object时，将分配对内存中对象的引用给变量 。
在以下代码段中，使用 var1 对 var2 进行赋值 。由于var1是基本类型（String），因此 var2 的值等于 var1 的 String 值，并且可以认为此时与var1完全不同 。因此，重新赋值var2对var1没有影响 。

12个提高 JavaScript 技能的概念

文章插图
 
接着，与对象赋值进行比较 。
12个提高 JavaScript 技能的概念

文章插图
 
如果你期望它会像原始类型赋值那样，很可能会出问题！如果你创建了一个无意中会改变对象的函数，就会出现一些非预期的行为 。
2.闭包闭包是一个重要的JavaScript模式，可以私有访问变量 。在本例中，createGreeter返回一个匿名函数，这个函数可以访问参数 greeting（在这里是“Hello”） 。在后续的调用中，sayHello 将有权访问这个 greeting！
12个提高 JavaScript 技能的概念

文章插图
 
在更真实的场景中，你可以设想一个初始函数apiConnect(apiKey)，它返回一些使用API key的方法 。在这种情况下，apiKey 只需要提供一次即可 。
12个提高 JavaScript 技能的概念

文章插图
 
3.解构JavaScript 参数解构可以从对象中干中提取所需属性的常用方法 。
12个提高 JavaScript 技能的概念

文章插图
 
如果要以其他名称提取属性，可以使用如下方式：
 
12个提高 JavaScript 技能的概念

文章插图
 
解构经常也用于直接用于提取传给函数的参数 。如果你熟悉 React，可能已经见过这个：
12个提高 JavaScript 技能的概念

文章插图
 
4. 展开运算ES6的一个常用之一的特性就是展开(...)运算符了,在下面的例子中，Math.max 不能应用于 arr 数组，因为它不将数组作为参数，但它可以将各个元素作为参数传入 。展开运算符...可用于提取数组的各个元素 。
复制代码5. 剩余参数剩余参数语法和展开语法看起来的一样的，不同的是展开语法是为了结构数组和对象；而剩余参数和展开运算符是相反的，剩余参数收集多个元素合成一个数组 。
function myFunc(...args) {console.log(args[0] + args[1]);}myFunc(1, 2, 3, 4);// 3rest parameters 和 arguments 的区别
  1. arguments 是伪数组，包含所有的实参
  2. 剩余参数 是标准的数组，可以使用数组的方法
6. 数组方法JavaScript 数组方法通常可以提供令人难以置信的、优雅的方法来执行所需的数据转换 。作为StackOverflow 的贡献者，我经常看到关于如何以某种方式操纵对象数组的问题，这往往也是数组方法的完美用例 。
map、filter、reduceJavaScript 数组方法map、filter和reduce容易混淆，这些都是转换数组或返回聚合值的有用方法 。
map：返回一个数组，其中每个元素都使用指定函数进行过转换 。
const arr = [1, 2, 3, 4, 5, 6];const mApped = arr.map(el => el + 20);console.log(mapped);// [21, 22, 23, 24, 25, 26]filter：返回一个数组，只有当指定函数返回 true 时，相应的元素才会被包含在这个数组中 。
const arr = [1, 2, 3, 4, 5, 6];const filtered = arr.filter(el => el === 2 || el === 4);console.log(filtered);// [2, 4]reduce:按函数中指定的值累加
const arr = [1, 2, 3, 4, 5, 6];const reduced = arr.reduce((total, current) => total + current);console.log(reduced);// 21find, findIndex, indexOffind：返回与指定条件匹配的第一个实例，如果查到不会继续查找其他匹配的实例 。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const found = arr.find(el => el > 5);console.log(found);// 6


推荐阅读


上一篇：10分钟将你的Go工程转换为Go Module模式

下一篇：探索Redis持久化原理