12 个概念,让 JavaScript 开发更加简单

原创 前端-DK 随笔 前端 85阅读 15 天前 举报

JavaScript 是一门复杂的语言,不管处于什么样的水平,都有必要了解 JavaScript 的基本概念。本文介绍了 12 个非常重要的 JavaScript 概念,但绝对不是说掌握好 JavaScript 只需要知道这些就可以了。

1. 变量赋值(值与引用)

JavaScript 总是按照值来给变量赋值。当指定的值是 JavaScript 的五种原始类型之一(即 Boolean、null、undefined、String 和 Number)时,将为变量分配实际的值。但是,当指定的值是 Array、Function 或 Object 时,将为变量分配内存的对象引用。

在下面的代码段中,使用 var1 对 var2 赋值。由于 var1 是基本类型(String),因此 var2 的值等于 var1 的 String 值,但这个时候可以认为 var2 与 var1 完全不同。因此,重新为 var2 赋值对 var1 没有任何影响。

我们将它与对象赋值进行比较。

如果你期望它会像原始类型赋值那样,很可能会出问题!如果你创建了一个无意中会改变对象的函数,就会出现一些非预期的行为。

2. 闭包

闭包是一种重要的 JavaScript 模式,可用于访问私有变量。在下面的示例中,createGreeter 返回一个匿名函数,这个函数可以访问参数 greeting(在这里是“Hello”)。在后续的调用中,sayHello 将有权访问这个 greeting!

在一个更真实的场景中,你可以设想一个初始化函数 apiConnect(apiKey),它返回一些使用 API​​密钥的方法。在这种情况下,只需要提供一次 apiKey 即可。

3. 解构

JavaScript 参数解构是一种从对象中提取属性的常用方法。

如果需要以其他名称来提取属性,可以使用以下格式来指定它们。

在下面的示例中,解构被用来将 person 对象传给 introduce 函数。换句话说,解构可以(并且经常)直接用于提取传给函数的参数。如果你熟悉 React,可能已经见过这个!

4. 展开(spread)语法

在下面的示例中,Math.max 不能直接接受 arr 数组,因为它的参数不是数组类型,但可以以数组中的各个元素作为参数。展开运算符…可用于提取数组的各个元素。

5. 变长参数(rest)语法

你可以用它将传给函数的任意数量的参数放入数组中!

6. 数组方法

JavaScript 数组方法通常可以为你提供令人难以置信的优雅方式来执行所需的数据转换。作为 StackOverflow 的贡献者,我经常看到有关如何以这种或那种方式操纵对象数组的问题。这往往是数组方法的完美用例。

map、filter、reduce

map:返回一个数组,其中每个元素都使用指定函数进行过转换。

filter:返回一个数组,只有当指定函数返回 true 时,相应的元素才会被包含在这个数组中。

reduce:基于给定函数累加值。

find、findIndex、indexOf

find:返回与指定条件匹配的第一个实例,不会继续查找其他匹配的实例。

虽然 5 之后的元素都符合条件,但只返回第一个匹配的元素。

findIndex:这与 find 几乎完全相同,但不返回第一个匹配的元素,而是返回第一个匹配元素的索引。

indexOf:与 findIndex 几乎完全相同,但它的参数不是一个函数,而是一个简单的值。

push、pop、shift、unshift

push:这是一个相对简单的方法,它将一个项添加到数组的末尾。它就地修改数组,函数本身会返回添加到数组中的项。

pop:从数组中删除最后一项。同样,它也是就地修改数组。函数本身返回从数组中删除的项。

shift:从数组中删除第一个项。同样,它也是就地修改数组。函数本身返回从数组中删除的项。

unshift:将一个或多个元素添加到数组的开头。同样,它也是就地修改数组。与其他方法不同的是,函数本身返回数组最新的长度。

splice、slice

splice:通过删除或替换现有元素或者添加新元素来修改数组的内容。这个方法也是就地修改数组。

下面的代码示例的意思是:在数组的位置 1 上删除 0 个元素,并插入 b。

slice:从指定的起始位置和结束位置之前返回数组的浅拷贝。如果未指定结束位置,则返回数组的其余部分。这个方法不会修改数组,只是返回所需的子集。

sort

sort:根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或 0,则顺序保持不变。如果返回正数,则交换元素顺序。

7. 生成器

看到 * 不要害怕。生成器函数指定下一次调用 next() 时会生成什么 value。既可以生成有限数量的 value(最后调用 next() 会返回 undefined),也可以使用循环生成无限数量的 value。

使用生成器生成无限个值:

8. === 与 ==

一定要知道 JavaScript 中 === 运算符和 == 运算符之间的区别!== 运算符在比较之前会进行类型转换,而 === 运算符在比较之前不会进行类型转换。

9. 对象比较

JavaScript 新手容易犯的一个错误是直接比较对象。变量一般是指向内存中对象的引用,而不是对象本身!比较对象的一种方法是将它们转换成 JSON 字符串。但这样做有一个缺点:无法保证对象属性的顺序!一种更安全的方法是使用专门进行深度对象比较的库(例如 lodash 的 isEqual)。

下面的对象看起来相同,但它们实际上指向不同的引用。

相反,下面的结果为 true,因为使用其中一个对象为另一个对象赋值,它们都指向相同的引用(内存中只有一个对象)。

10. 回调函数

很多人都被 JavaScript 回调函数吓倒了!它们其实很简单,请看下面的例子。console.log 函数作为回调传给 myFunc,并在 setTimeout 完成时执行。

11. promise

一旦你理解了 JavaScript 回调,很快就会发现自己陷入了“回调地狱”中。这个时候可以使用 promise!将异步逻辑包装在 promise 中,使用“then”来处理成功的情况,使用“catch”来处理异常。

12. Async/Await

在掌握了 promise 的用法后,你可能也会喜欢 async await,它只是一种基于 promise 的“语法糖”。在下面的示例中,我们创建了一个 async 函数,并 await greeter promise。

自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。

这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复