• 技术文章 >web前端 >前端问答

    es6中foreach()怎么用

    青灯夜游青灯夜游2022-03-09 13:49:03原创217

    在es6中,foreach()方法用于遍历数组,调用数组的每个元素,并将元素传递给回调函数进行处理,语法“array.forEach(function(currentValue,index,arr),thisValue)”。

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    在es6中,foreach()方法用于遍历数组,调用数组的每个元素,并将元素传递给回调函数进行处理。具体说明如下:

    array.forEach(function(currentValue, index, arr), thisValue)
    参数描述
    function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。
    函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
    thisValue可选。传递给函数的值一般用 "this" 值。
    如果这个参数为空, "undefined" 会传递给 "this" 值

    对于数组中出现的每个元素,forEach 方法都会调用 callbackfn 函数一次,采用升序索引顺序,但不会为数组中空元素调用回调函数。

    除了数组对象之外,forEach 方法还可以用于有 length 属性且具有已按数字编制索引的属性名的任何对象,如关联数组对象、Arguments 等。

    forEach 方法不直接修改原始数组,但回调函数可能会修改它。在 forEach 方法启动后修改数组对象所获得的结果如表所示。

    回调函数修改数组的影响
    forEach 方法启动后的条件元素是否传递给回调函数
    在数组的原始长度之外添加元素
    添加元素以填充数组中缺少的元素是,如果该索引尚未传递给回调函数
    元素已更改是,如果该元素尚未传递给回调函数
    从数组中删除元素否,除非该元素已传递给回调函数

    示例1

    下面示例使用 forEach 迭代数组 a,然后把每个元素的值和下标索引输出显示,代码如下:

    function f(value,index,array) {
        console.log("a[" + index + "] = " + value);
    }
    var a = ['a', 'b', 'c'];
    a.forEach(f);

    演示结果如下:

    1.png

    示例2

    下面示例使用 forEach 迭代数组 a,然后计算数组元素的和并输出。

    var a = [10, 11, 12], sum = 0;
    a.forEach (function (value) {
        sum += value;
    });
    console.log(sum);  //返回33

    示例3

    下面示例演示如何使用 forEach() 方法的第二个参数,该参数为回调函数的 this 传递对象。当迭代数组过程中,先读取数组元素的值,然后改写它的值。

    var obj = {
        f1 : function(value,index,array) {
            console.log("a[" + index + "] = " + value);
            arrar[index] = this.f2(value);
        },
        f2 : function (x) {return x * x;}
    };
    var a = [12, 26, 36];
    a.forEach(obj.f1, obj);
    console.log(a);  //返回[144, 676, 1296]

    【相关推荐:javascript视频教程web前端

    以上就是es6中foreach()怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:es6 foreach()
    上一篇:javascript创建函数有什么方法 下一篇:es6数组怎么清除所有元素
    Web大前端开发直播班

    相关文章推荐

    • commonjs与es6模块化有什么区别• es6中箭头函数和普通函数的区别是什么• es6怎么判断数组是否含有某个子元素• es6中怎么将数组转为对象• es6怎么判断变量是不是数组• es6 symbol属于基本类型吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网