• 首页
  • 首页
  • 乱系短篇合集合集儿媳
  • 靠b猛视频大全视频免费
  • 男女拍拍拍的全过程免费
  • 四个Javascript 中的 For 循环

    发布日期:2022-01-13 13:16    点击次数:151

    在 ECMAScript5(简称 ES5)中,有三个循环。在 2015 年 6 月发布的 ECMAScript6(简称 ES6)中,新添了一栽循环类型。他们是:

    for for in for each for of

    今天,就让吾们一首来望望这4个 for 循环。

    1、浅易的for循环

    吾们来望望最常见的写法:

    const arr = [1, 2, 3]; for(let i = 0; i < arr.length; i++) {  console.log(arr[i]); } 

    当循环中数组的长度异国转折时,吾们答该将数组的长度存储在一个变量中,云云效果会更高。下面是改进的写法:

    const arr = [1, 2, 3]; for(let i = 0, len = arr.length; i <len; i++) {  console.log(arr[i]); } 
    2、for-in

    2.1、 行使 for-in

    清淡,吾们能够行使for-in来遍历数组的内容,代码如下:

    const arr = [1, 2, 3]; let index; for(index in arr) {  console.log(“arr[“ + index + “] = “ + arr[index]); } 

    清淡来说,操作的效果如下:

    arr[0] = 1 arr[1] = 2 arr[2] = 3 

    但云云做往往会产生题目。

    2.2、 for-in的原形

    for-in 循环遍历对象的属性,而不是数组的索引。因此for-in遍历的对象不限于数组,也能够遍历对象。示例如下:

    const person = {  fname: “san”,  lname: “zhang”,  age: 99 }; let info; for(info in person) {  console.log(“person[“ + info + “] = “ + person[info]); } 

    效果如下:

    person[fname] = san person[lname] = zhang person[age] = 99 

    必要仔细的是for-in遍历属性的挨次是不确定的,即输出效果的挨次与对象中属性的挨次无关,也与属性的字母挨次无关,也异国任何其他挨次。

    2.3 、关于数组的原形

    数组是Javascript中的一个对象,Array的索引是属性名。原形上,Javascript 中的“数组”有点误导。

    Javascript 中的数组与大无数其他说话中的数组分歧。最先,Javascript 中的数组在内存中不是不息的。

    其次,Array 的索引不是指偏移量。其实Array的索引不是Number类型,而是String类型。之因此能切确行使 arr[0] 之类的写法,是由于说话能够自动转折 Number 类型。0 转换为 String 类型的“0”。

    因此,Javascript 中从来异国 Array 索引,只有“0”、“1”等属性。

    趣味的是,每个 Array 对象都有一个 length 属性,这使得它的走为更像其他说话中的数组。

    但是为什么遍历Array对象的时候不输出length属性呢?那是由于for-in只能遍历“可枚举属性”,length是不走枚举属性,实际上Array对象还有许众其他不走枚举属性。

    现在,让吾们回过头来望望行使 for-in 循环数组的例子。吾们修改前线遍历数组的例子:

    const arr = [1, 2, 3]; arr.name = “Hello world”; let index; for(index in arr) {  console.log(“arr[“ + index + “] = “+ arr[index]); } 

    操作的效果是:

    arr[0] = 1 arr[1] = 2 arr[2] = 3 arr[name] = Hello world 

    吾们望到 for-in 遍历吾们新的“name”属性,由于 for-in 遍历对象的所有属性,而不光仅是“索引”。

    同时,必要仔细的是,这边输出的索引值,即“0”、“1”、“2”不是Number类型,而是String类型,由于它们是行为属性输出的,不是索引,这是否意味着吾们只能输出数组的内容,而不及向吾们的 Array 对象增补新属性?答案是否定的。

    由于for-in不光遍历数组本身的属性,还会遍历数组原型链上的所有可枚举属性。让吾们望一个例子:

    Array.prototype.fatherName = “Father”; const arr = [1, 2, 3]; arr.name = “Hello world”; let index; for(index in arr) {  console.log(“arr[“ + index + “] = “+ arr[index]); } 

    操作的效果是:

    arr[0] = 1 arr[1] = 2 arr[2] = 3 arr[name] = Hello world arr[fatherName] = Father 

    至此,吾们能够发现for-in并不正当遍历Array中的元素,它更正当遍历对象的属性,这也是它创建的初衷。有一个破例,那就是稀奇数组,涉猎以下示例:

    let key; const arr = []; arr[0] = “a”; arr[100] = “b”; arr[10000] = “c”; for(key in arr) {  if(arr.hasOwnProperty(key) &&  /⁰$|^[1–9]\d*$/.test(key) &&  key <= 4294967294  ) {  console.log(arr[key]);  } } 

    For-in 仅遍历现有实体。上例中for-in遍历了3次(别离遍历属性为“0”、“100”、“10000”的元素,清淡for循环会遍历10001次)。因此,只要处理正当,for-in 也能够在遍历 Array 中的元素方面发挥重大的作用。

    为了避免重复做事,吾们能够包装上面的代码:

     function arrayHasOwnIndex(array, prop) {  return array.hasOwnProperty(prop) &&  /⁰$|^[1–9]\d*$/.test(prop) &&  prop <= 4294967294; // 2³²-2 } 

    用法示例如下:

    for (let key in arr) {  if (arrayHasOwnIndex(arr, key)) {  console.log(arr[key]);  } } 

    2.4、 for-in性能

    如上所述,每次迭代操作都会同时搜索实例或原型属性。for-in 循环的每次迭代都会产生更众的支付,因此它比其他循环类型慢,清淡速度是其他循环类型的 1/7。

    因此,除非您清晰必要迭代具有未知数目属性的对象,否则您答该避免行使 for-in 循环。倘若必要遍历有限数目的已知属性列外,行使其他循环会更快,例如以下示例:

    const obj = {  “prop1”: “value1”,  “prop2”: “value2” }; const props = [“prop1”, “prop2”]; for(let i = 0; i <props.length; i++) {  console.log(obj[props[i]]); } 

    在上面的代码中,对象的属性存储在一个数组中。与for-in搜索每个属性相比,代码只关注给定的属性,撙节了循环的支付和时间。

    3、forEach

    在 ES5 中,引入了一个新循环,即 forEach 循环。

    const arr = [1, 2, 3]; arr.forEach((data) => {  console.log(data); }); 

    操作效果:

    1 2 3 

    forEach 手段对数组中包含有效值的每一项实走一次回调函数,那些已经被删除(行使delete 手段等)或从未赋值的项将被跳过(不包括那些不决义的项) 或空值)。回调函数会挨次传入三个参数:

    数组中现在项的值; 现在项在数组中的索引; 数组对象本身;

    必要仔细的是,forEach 遍历的周围会在第一次调用回调之前确定。调用 forEach 后增补到数组的项现在不会被回调访问。

    倘若现有值发生转折,则传递给callback的值就是forEach遍历它们时的值。不会遍历已删除的项现在。

    const arr = []; arr[0] = “a”; arr[3] = “b”; arr[10] = “c”; arr.name = “Hello world”; arr.forEach((data, index, array) => {  console.log(data, index, array); }); 

    操作效果:

    a 0 [“a”, 3: “b”, 10: “c”, name: “Hello world”] b 3 [“a”, 3: “b”, 10: “c”, name: “Hello world”] c 10 [“a”, 3: “b”, 10: “c”, name: “Hello world”] 

    这边的索引是Number类型的,不会像for-in那样遍历原型链上的属性。

    因此,在行使forEach时,吾们不必要稀奇声明索引和要遍历的元素,由于这些都是行为回调函数的参数。

    另外,forEach 会遍历数组中的所有元素,但是 ES5 定义了一些其他有效的手段,下面是一片面:

    every:循环在第一次返回false后返回 some:循环在第一次返回 true 后返回 filter:返回一个元素已足回调函数的新数组 map:在返回之前处理原首数组中的元素 reduce:挨次处理数组中的元素,将上一次处理的效果行为下一次处理的输入,最后得到最后效果。

    forEach 性能

    您能够望望jsPerf。在分歧涉猎器下测试的效果是forEach异国for快。倘若将测试代码放在限制台中,能够会得到分歧的效果。主要因为是限制台的实走环境与实在的代码实走环境分歧。

    4、for-of

    吾们先来望一个例子:

    const arr = [‘a’, ‘b’, ‘c’]; for(let data of arr) {  console.log(data); } 

    运走的效果是:

    a b c 
    为什么要引入for-of?

    要回答这个题目,吾们先来望望 ES6 之前的 3 栽 for 循环的弱点:

    forEach 不及休止和返回;

    for-in 的劣势更添清晰。它不光遍历数组中的元素,还遍历自定义属性,甚至访问原型链上的属性。此外,遍历数组元素的挨次能够是随机的。

    因此,针对以上弱点,吾们必要对正本的for循环进走改进。但是 ES6 不会损坏您已经编写的 JS 代码。

    现在,数以千计的网站倚赖于 for-in 循环,其中一些甚至将其用于数组遍历。议定修复 for-in 循环来增补数组遍历声援会使这一致变得更添紊乱,因此标准委员会在 ES6 中增补了一个新的循环语法来解决现在的题目 for-of 。

    那么 for-of 能做什么呢?

    与forEach相比,它能够切确回响反映break、continue、return。

    for-of 循环不光声援数组,还声援大无数相通数组的对象,例如 DOM 节点列外对象。

    for-of 循环还声援字符串遍历,它将字符串行为 Unicode 字符序列进走迭代。

    for-of 还声援 Map 和 Set(都是 ES6 中的新功能)对象遍历。

    总结一下,for-of 循环具有以下特点:

    这是迭代数组元素的最简洁直接的语法。

    这栽手段避免了 for-in 循环的所有陷阱。

    与 forEach 分歧,它切确回响反映 break、continue 和 return 语句。

    它不光能够遍历数组,还能够遍历类数组对象和其他可迭代对象。

    然而,答该仔细的是,for-of 循环不声援清淡对象,但是倘若您想遍历一个对象的属性,您能够行使 for-in 循环(它就是云云做的)。

    末了,但并非最不主要的是,ES6 引入了另一栽手段来迭代数组的值,那就是 Iterator。末了一个例子:

    const arr = [‘a’, ‘b’, ‘c’]; const iter = arr[Symbol.iterator](); iter.next() // { value: ‘a’, done: false } iter.next() // { value: ‘b’, done: false } iter.next() // { value: ‘c’, done: false } iter.next() // { value: undefined, done: true } 

    不过,这个内容超出了本文的周围,Iterator 有许众要讲的。

    【编辑保举】

    鸿蒙官方战略配相符共建——HarmonyOS技术社区Sentry 开发者贡献指南-Feature Flag从零最先晓畅 JavaScript --(为Postman写脚本准备)Spring 处理循环倚赖只行使二级缓存,能够吗?Node.js 2021年开发者通知解读:健康稳步的发展中暗客布局Patchwork感染本身开发的凶意程序 导致内部体系被曝光