详细谈谈JavaScript中循环之间的差异


Posted in Javascript onAugust 23, 2021

前言

在 JavaScript 中使用循环时,需要正确定义两个关键内容:可枚举属性(enumerable properties)和可迭代对象(iterable objects)。

可枚举的属性

可枚举对象的一个定义特征是,当我们通过赋值运算符将属性赋值给对象时,我们将内部可枚举标志(enumerable)设置为 true。这是默认值。

但是,我们可以通过将其设置为 false 来更改此行为。

经验法则是,可枚举属性总是出现在 for...in 循环中。

让我们看看这一点:

const users = {}
users.languages = 'JavaScript'
​
Object.getOwnPropertyDescriptor(users, 'languages')
// output -> { value: 'JavaScript', writable: true, enumerable: true, configurable: true }
​
// 在循环中对我们使用的属性进行更多的控制
Object.defineProperty(users, 'role', { value: 'Admin', writable: true, enumerable: false })
​
for (const item in users) {
  console.log(item) // languages
}

可以看到,我们为 users 变量添加了一个 languages 属性,使用 Object.getOwnPropertyDescriptor 方法输出 languages 属性描述符的 enumerable 属性为 true。

使用 Object.defineProperty 为添加 role 属性,并将 enumerable 设置为 false,在 for...in 循环中并没有输出 role 属性。即 for...in 循环中的属性为可枚举属性。

可迭代对象

如果一个对象定义了它的迭代行为,那么它是可迭代的。在本例中,将在 for...of 构造中循环的值将定义其迭代行为。可迭代的内置类型包括 Array、String、Set 和 Map 对象不可迭代,因为它没有指定 @iterator 方法。

基本上,在 JavaScript 中,所有可迭代对象都是可枚举对象,但并非所有可枚举对象都是可迭代对象。

这里有一种概念化的方法:for...in 查找数据中的对象,而 for...of 查找重复序列。

让我们看看这一切在与 Array 数据类型一起使用时的效果:

const languages = ['JavaScript', 'Python', 'Go']
​
// 与 for...in 循环一起使用
for (const language in languages) {
  console.log(language)
}
// output
// 0
// 1
// 2
​
// 与 for...of 循环一起使用
for (const language of languages) {
  console.log(author)
}
// output -> JavaScript Python Go

在使用这种构造时,需要牢记的一点是,如果调用了 typeof,并且输出为 object,那么您可以使用 for...in 循环。

让我们看看这个对 languages 变量的操作:

typeof languages // "object" -> 因此我们可以在中使用 for

乍一看,这可能令人惊讶,但需要注意的是,数组是一种特殊类型的对象,以索引为键。知道 for...in 将在构造中查找对象可以极大地帮助我们。当 for...in 循环找到一个对象时,它将在每个键上循环。

我们可以将 for ..in 循环在 languages 数组上的方式可视化如下:

const languages = {
  0: 'JavaScript',
  1: 'Python',
  2: 'Go'
}

注意:如果它可以被追踪到一个对象(或者从对象原型链继承它),for...in 将以没有特定顺序遍历键。

同时,如果它实现了一个迭代器 for.. of 构造,它将在每次迭代中循环遍历该值。

在 forEach 与 map 方法

虽然 forEach 和 map 方法可以用来实现相同的目标,但它们的行为和性能特性有所不同。

在基本级别,当函数被调用时,它们都会接收一个回调作为参数。

考虑以下片段:

const scoresEach = [2, 4 ,8, 16, 32]
const scoresMap = [2, 4 ,8, 16, 32]
const square = (num) => num * num

让我们详细介绍一下它们在操作上的一些差异。

forEach 返回 undefined,而 map 返回一个新的 array:

let newScores = []
const resultWithEach = scoresEach.forEach(score => {
  const newScore = square(score)
  newScores.push(newScore)
})
​
const resultWithMap = scoresMap.map(square)
​
console.log(resultWithEach) // undefined
console.log(resultWithMap) // [4, 16, 64, 256, 1024]

Map 是一个纯函数,同时 forEach 执行一些突变:

console.log(newScores) // [4, 16, 64, 256, 1024]

在我看来,map 支持函数式编程范式。我们不必总是执行突变来获得期望的结果,不像 forEach,我们必须突变 newScores 变量。在每次运行时,当提供相同的输入时,map 函数将产生相同的结果。同时,forEach 对应项将从上一个突变的先前值中提取。

链式调用

使用 map 可以进行链式调用,因为返回的结果是一个数组。因此,可以对结果立即调用任何其他数组方法。换句话说,我们可以调用 filter、reduce、some 等方法。这在 forEach 中是不可能的,因为返回的值为 undefined 的。

性能

map 方法的性能往往优于 forEach 方法。

检查使用 map 和 forEach 实现的等效代码块的性能。平均而言,您将看到 map 函数的执行速度至少快 50%。

结论

在上面讨论的所有循环结构中,给我们最多控制的是 for..of 循环。我们可以将其与关键字 return、continue 和 break 一起使用。这意味着我们可以指定对数组中的每个元素要发生什么,以及是否要提前离开或跳过。

到此这篇关于JavaScript中循环之间差异的文章就介绍到这了,更多相关JavaScript循环差异内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
javascript代码简写的几种常用方式汇总
Aug 23 #Javascript
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 #Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP编写简单的App接口
2016/08/28 PHP
php5与php7的区别点总结
2019/10/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
幼儿园大班开学教师寄语
2014/04/03 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
实习单位推荐信
2015/03/27 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python