详细谈谈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 相关文章推荐
浅析JavaScript中的对象类型Object
May 26 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
react实现换肤功能的示例代码
Aug 14 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
php获取表单中多个同名input元素的值
2014/03/20 PHP
php 购物车完整实现代码
2014/06/05 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python中unittest用法实例
2014/09/25 Python
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
在Python的web框架中配置app的教程
2015/04/30 Python
python奇偶行分开存储实现代码
2018/03/19 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
Python3 类型标注支持操作
2021/06/02 Python
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python