zoukankan      html  css  js  c++  java
  • js中关于for 的几个函数及关于构造器或结构体与对象的关系及Arrow functions

    本篇博客由标题分为三个方面,让我慢慢分析来,不足之处请指出。

    一、关于for的几个函数

    1)  for in 

    for...in对所有非迭代符号枚举的属性的一个对象。

    句法:

    for (variable in object) { ...
    }

    variable:每次迭代都会变量分配不同的属性名称; object:迭代非符号可枚举属性的对象。

    描述:一个for...in仅环比枚举,非符号属性迭代。对象从内置构造等生成ArrayObject继承来自非枚举的属性Object.prototypeString.prototype诸如StringindexOf()方法或ObjecttoString()方法。循环将迭代对象本身的所有可枚举属性,以及对象从其构造函数的原型继承的属性(更接近原型链中对象的属性覆盖原型的属性)。

    注意: for...in不应该用于迭代Array索引顺序很重要的位置。
    原因:

    数组索引只是具有整数名称的可枚举属性,并且与一般对象属性相同。无法保证for...in以任何特定顺序返回索引。for...in循环语句将返回所有枚举的属性,包括那些非整数的名字和那些继承。

    因为迭代的顺序是依赖于实现的,所以迭代数组可能不会以一致的顺序访问元素。因此,在迭代访问顺序很重要的数组时,最好使用for带有数字索引(或循环)Array.prototype.forEach()for...of循环。


    demo:
    var str1 = "";
    var obj1 = {a: 1, b: 2, c: 3};
    
    for (var pro1 in obj1) {
    str1 += obj1[pro1];
    }
    
    console.log(str1);
    // expected output: "123"
    2)for of

    for...of在可迭代对象上创建循环迭代,包括:内置String、Array、Array-like对象(例如,参数或NodeList)、TypedArray、Map、Set和用户定义的迭代。它调用一个定制的迭代钩子,其中包含将对象的每个不同属性的值执行的语句。

    语法:
    for (variable of iterable) {
      statement
    }
    variable:在每次迭代时,将不同属性的值分配给变量iterable:迭代其可迭代属性的对象。

    demo:
    function* foo(){
      yield 1;
      yield 2;
    }
    
    for (let o of foo()) {
      console.log(o);
      // expected output: 1
    
      break; // closes iterator, triggers return
    }

    注意:

    如果不在块内重新分配变量,则可以使用const而不是let

    demo:

    let iterable = [10, 20, 30];
    
    for (const value of iterable) {
      console.log(value);
    }
    // 10
    // 20
    // 30

    在此简单补充下:let:声明块级变量,即局部变量;const:用于声明常量,也具有块级作用域 ,也可声明块级。

    3)forEach

    注意下这里的forEach是封装好的函数,是一种方法,但其原生也是for循环。

     var arr = [1,2,3];

    arr.forEach(alert);
    等价于
    var arr = [1, 2, 3];
    for (var k = 0, length = arr.length; k < length; k++) {
     alert(array[k]);
    }

    forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

    forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身。

    简单来说,要用这个方法就是拿来遍历数组。

    语法:

    arr.forEach(function callback(currentValue[, index[, array]]) {
        //your iterator
    }[, thisArg]);

    注意: forEach() 对于空数组是不会执行回调函数的。

    二、关于构造器或结构体与对象的关系

    要说构造体与对象的关系,首先得明白它们的概念。

    构造器即构造函数,用于创建对象的函数。它有这些特点:

        1、构造函数的首字母必须大写,用来区分于普通函数

        2、内部使用的this对象,来指向即将要生成的实例对象

        3、使用New来生成实例对象

    对象:属性和方法的集合,即变量和函数的封装。每个对象都有一个__proto__属性,指向这个对象的构造函数的原型对象

    原型对象:每个函数都有一个prototype属性,它是一个指向原型对象的指针(原型对象在定义函数时同时被创建)。

    而它们之间有怎样的关系呢?

    简单来说,定义构造函数,使用new关键字可实例化对象,而每个构造函数都有原型对象prototype,实例化对象也就继承了原型对象。

    有一个恰当的比喻,构造函数是妈,原型对象是爸,实例对象是孩子。妈让每个孩子拥有私有能力,爸让它们拥有共有能力(这个共有能力其实都是爸代劳的。

    关于构造函数的小demo:

    function Person(name, age){//构造器函数
        this.name = name;
        this.age = age;
    }
    Person.prototype = {//设置构造器函数prototype指定的对象,即重置原型对象
        constructor : Person,
        sayName : function(){alert(this.name);}
    }
    var p1 = new Person("Tom", 29);//实例化对象p1
    //{name:"Tom",age:29,__proto__:object},object即原型对象:Person.prototype指向的对象
    

     三、Arrow functions 的介绍

    arrow function 也就是箭头函数。

    一个箭头函数表达式比一个更短的语法功能表达,没有自己的thisargumentssuper,或new.target这些函数表达式最适合非方法函数,不能用作构造函数。

     基本语法:

    (param1, param2, …, paramN) => { statements } 
    (param1, param2, …, paramN) => expression
    // equivalent to: => { return expression; } 
    
    // Parentheses are optional when there's only one parameter name:
    (singleParam) => { statements }
    singleParam => { statements }
    
    // The parameter list for a function with no parameters should be written with a pair of parentheses.
    () => { statements }

    关于箭头函数的一个小demo:
    var materials = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];
    
    console.log(materials.map(material => material.length));
    // expected output: Array [8, 6, 7, 9]

    以后应该会对箭头函数进一步学习,文中有错误或不足请指出。

     



     

  • 相关阅读:
    小程序开发-Canvas画布组件
    小程序开发-Map地图组件
    小程序开发-媒体组件video使用入门
    小程序开发-媒体组件image
    小程序开发-组件navigator导航篇
    小程序开发-表单组件的使用
    小程序开发-视图容器入门
    小程序开发-基础组件icon/text/progress入门
    小程序开发-block组件的使用
    小程序开发-小程序tabBar不显示的原因分析
  • 原文地址:https://www.cnblogs.com/ceneasy/p/9912534.html
Copyright © 2011-2022 走看看