js for of 无法改变数组变量

hover_lew 发布于2019-08-23 10:28 / 3317人阅读

摘要：今天写个函数时想遍历数组，想想没怎么用过这类的语法，于是做了个尝试，竟发现无法改变数组元素。这里我们可以看到的本质是返回一个迭代器第三，迭代器是如何获得值的迭代器通过方法返回值，而不是指向地址，所以在迭代中无法改变数组元素参考材料

今天写个函数时想遍历数组，想想没怎么用过for...of...这类的语法，于是做了个尝试，竟发现for...of...无法改变数组元素。

贴代码，上例子

let array = [1,2,3];
for(let num of array){
    num++;
    console.log(num);
}
console.log(array);
//输出如下
//2
//3
//4
//[1,2,3]

这是为什么呢，暂时找不到答案
那么for...in...会不会呢?

于是又试试for...in...语法
代码如下

let obj = {
std1 : "Bob",
std2 : "Mike"
}
for(let name in obj){
    obj[name] = "Lily";
    console.log(obj[name]);
}
console.log(obj);
//显示如下
//"Lily"
//"Lily"
//{std1:"Lily", std2:"Lily"}

。。。。。
留个坑，以后看能不能找到为什么。
后来找出解释，不知是否正确，如下：
以下是个人推断，有错误请指出

第一，先看看MDN的可迭代协议

以下是MDN的可迭代协议：
“可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如（定义）在一个 for..of 结构中什么值可以被循环（得到）。一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) 。”
这里我们注意到Array和Map与Object的迭代行为是不一样的

第二，看看对象被迭代的本质

另一段材料：
“当一个对象需要被迭代的时候（比如开始用于一个for..of循环中），它的@@iterator方法被调用并且无参数，然后返回一个用于在迭代中获得值的迭代器。”
重点在于“返回一个用于在迭代中获得值的迭代器。”
这里我们可以看到for of 的本质是返回一个迭代器

第三，迭代器是如何获得值的？

迭代器通过next()方法返回值，而不是指向地址，所以在for of 迭代中无法改变数组元素

参考材料：https://developer.mozilla.org...

云服务器海外云主机 for...of js 监听数组改变 js 数组 for js全局变量无法使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96376.html

【面试篇】寒冬求职季之你必须要懂的原生JS(上)

摘要：循环可以使用的范围包括数组和结构某些类似数组的对象对象，以及字符串。只能遍历数组，不能中断，返回值是修改后的数组。除了之外，等，也有同样的问题。声明一个只读的常量。这在语法上，称为暂时性死区。暂时性死区也意味着不再是一个百分百安全的操作。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包...

AlphaWatch 2019-05-23 16:25 评论0 收藏0
【面试篇】寒冬求职季之你必须要懂的原生JS(上)

摘要：只能遍历数组，不能中断，返回值是修改后的数组。这在语法上，称为暂时性死区。作用域链无论是还是查询，都会在当前的作用域开始查找，如果没有找到，就会向上级作用域继续查找目标标识符，每次上升一个作用域，一直到全局作用域为止。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原...

宠来也 2019-08-23 16:49 评论0 收藏0
JavaScript 语言核心笔记（持续更新）

摘要：在同一个块内，不允许用重复声明变量。中为新增了块级作用域。自带遍历器的对象有数组字符串类数组对象对象的对象等和结构对象。返回一个遍历器，使遍历数组的键值对键名键值。目录 1.语法 2.类型、值和变量 3.表达式和运算符 4.语句 5.数组 6.对象 7.函数 8.全局属性和方法 9.词法作用域、作用域链、闭包 10.原型链、继承机制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 评论0 收藏0
前端面经整理之JS和CSS

摘要：作为对象原型链的终点。调用函数时，应该提供的参数没有提供，该参数等于。它可以用于引用该函数的函数体内当前正在执行的函数。一 JS 二 CSS 一 JS ==和===的区别 ===叫做严格运算符 ==叫做相等运算符严格运算符比较时不仅仅比较数值还要比较数据类型是否一样相等运算符在比较相同类型的数据时，与严格相等运算符完全一样。在比较不同类型的数据时，相等运算符会先将数据进行类型转换，...

stonezhu 2019-08-21 17:34 评论0 收藏0
前端面经整理之JS和CSS

摘要：作为对象原型链的终点。调用函数时，应该提供的参数没有提供，该参数等于。它可以用于引用该函数的函数体内当前正在执行的函数。一 JS 二 CSS 一 JS ==和===的区别 ===叫做严格运算符 ==叫做相等运算符严格运算符比较时不仅仅比较数值还要比较数据类型是否一样相等运算符在比较相同类型的数据时，与严格相等运算符完全一样。在比较不同类型的数据时，相等运算符会先将数据进行类型转换，...

lvzishen 2019-08-29 13:48 评论0 收藏0