JavaScript基础之Array forEach使用示例

目录
  • 前言
    • 尝试一下
    • forEach实现
    • 对象模仿数组
    • forEach跳出循环体？

前言

forEach() 方法对数组的每个元素执行一次给定的函数。

回调函数中传递三个参数:

  • 第一个参数，就是当前正在遍历的元素
  • 第二个参数，就是当前正在遍历的元素的索引
  • 第三个参数，就是正在遍历的数组

尝试一下

var list = ["云层上的光", "初心", "栾树"];
list.forEach(function(item, index, array){
    console.log(item,index,array)
});

输出内容如下：

那我就好奇了，在forEach回调函数中的this指向谁呢？forEach函数是否有返回值

var list = ["云层上的光", "初心", "栾树"];
var value = list.forEach(function(item, index, array){
    console.log(this);
});
console.log(value);

可以看到 this指向 window并且forEach没有返回值，返回值为 undefined

那我们可以更改this指向吗？

forEach其实接受两个参数，第二个参数 可选参数。当执行回调函数时，用作 this 的值。

forEach实现

Array.prototype.myForEach = function (callback) {
  var _arr    = this,// 调用时谁 this就是谁
      _len    = _arr.length,
      thisArg = arguments[1] || window;
  // 校验callback之能是 function时才往下执行
  if (typeof callback !== 'function') {
    throw new Error(`${callback} is not a function`);
  }
  // for循环
  for (var i = 0; i < _len; i++) {
    callback.apply(thisArg, [_arr[i], i, _arr]);
  }
  // 注意 forEach 没有返回值
}

对象模仿数组

对象的原型上并没有 forEach，所以我们调用 Array.prototype.forEach方法通过call改变方法内部的this指向，myForEach内部循环需要length, 所以我们在对象中模拟了添加了一个length属性，对象的key 分别为 0，1，2 分别对应了循序中的下标。

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));

forEach跳出循环体？

forEach可以跳出循环体吗？其实 return 和 break 是无法做到的，不过可以使用 throw new Error

var list = ["云层上的光", "初心", "栾树"];
try{
    list.forEach(item=&gt;{
        if(item === "初心") throw new Error("初心");
    })
}catch(err){
    if(err.message === "初心")
        console.log("在执行到初心时跳出循环体了")
    else
        console.error(err)
}

以上就是JavaScript基础之Array forEach使用示例的详细内容，更多关于JavaScript Array forEach的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Svelte调试模式js级别差异和细化后的体积差异详解

    目录 js级别的差异 ecma ast差异 细化后的体积差异 调试模式 on:事件名 svelte:options setContext js级别的差异 主要来自两个方面:hook系统(不考虑类)和ecma-ast差异hook系统. 钩子系统的api更多地用于纯函数组件注入状态和生命周期.在这两个方面,Svelte提供的解决方案是不同的. 由于预运行编译,Svelte编译器扫描所有与UI相关的状态并注入黑魔法,使得状态的使用与变量声明和赋值一样简单. 基本上,开发人员不需要太在意所谓的副作用:因

  • JS判断元素是否在可视区域技巧详解

    目录 前言 实现方式 offsetTop.scrollTop 注意 getBoundingClientRect 前言 在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如: 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 实现方式 判断一个元素是否在可视区域,我们常用的有offsetTop.scrollTop和getBoundingClientRect offsetTop.scrollTop

  • JavaScript开发简单易懂的Svelte实现原理详解

    目录 Demo1 create_fragment SvelteComponent 可以改变状态的Demo Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了. Demo1 首先来看编译时,考虑如下App组件代码: <h1>{count}</h1> <script> let count = 0; </script> 这段代码经由编译器编译后产生如下代码,包括三部分: create_fragment方法 count的声明语句 class

  • JavaScript面试数组index和对象key问题详解

    JavaScript面试数组index和对象key问题详解

    目录 面试题一: 1.数组赋值 2.数组取值 面试题二: 1.对象赋值 2.对象取值 总结 面试题一: var arr = [1, 2, 3, 4] 复制代码 问:arr[1] = ?; arr['1'] = ? 答:arr[1] = 2; arr['1'] = 2 这里可以再分为两个问题: 1.数组赋值 var arr = [1, 2, 3, 4] arr[1] = 10; // 数字场景 arr['10'] = 1; // 字符串场景 arr['a'] = 1; // 字符串场景 arr[t

  • 一看就懂的JavaScript适配器模式图解及使用示例

    目录 引言 总结 引言 适配器模式是用来解决两个软件实体之间不兼容的问题的设计模式. 举个两实体不匹配例子: 假如这两块要契合在一起,怎么办? 对喽,咱们先给A实体造个适配器,如下: 再把A实体往右推一下: 通过适配器,咱们就把A实体和B实体结合到了一起了. 完美,再看适配器在代码中的例子. 场景为:有个实体A,需要将实体A传入实体B中,实体B返回其name对应的数据,包含名称.地址和年龄. // 实体A var instanceA = [{ name: '张三', address: '北京',

  • 拆开JavaScript迭代器模式内部黑盒子

    目录 一.内部迭代器 二.外部迭代器 总结: 一.内部迭代器 迭代器模式,指的是提供一种方法顺序访问一个聚合对象或者数组中的各种元素,而又不暴露该对象的内部表示. 内部迭代器是自动的,将回调函数传入迭代器进行执行,访问到每一个元素都会执行传入迭代器中的回调函数. 模拟内部迭代器如下: // 定义数组原型上的mapFn内部迭代器 Array.prototype.mapFn = function (callback) { let arr = this; let newArr = [] for (le

  • JavaScript 基础表单验证示例(纯Js实现)

    JavaScript 基础表单验证示例(纯Js实现)

    验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo

  • javascript基础数据类型转换教程示例

    javascript基础数据类型转换教程示例

    目录 数值型转换为字符串类型 字符串类型转换为数值型 转换为布尔型 结语 数值型转换为字符串类型 方式 说明 案例 toString() 转成字符串 var num =1; alert ( num.toString()); String() 强制转换 转成字符串 var num =1; alert ( String ( num )); 加号拼接字符串 和字符串拼接的结果都是字符串 var num =1; alert ( num +＂我是字符串"); // 1.将数字型转换为字符串类型 var n

  • javascript基础语法——全面理解变量和标识符

    javascript基础语法——全面理解变量和标识符

    关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符 定义 标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie

  • JavaScript基础篇（3)之Object、Function等引用类型

    JavaScript基础篇（3)之Object、Function等引用类型

    阅读目录 Object类型 1.通过构造函数来创建 2.通过字面量表示法来创建对象 Array类型 同样Array也有两种创建方式: 如果我们想要打印数组中所有的值,直接打印数组的变量名就可以: 往数组添值: 栈方法.队列方法:  关于数组的排序:  数组的一些操作方法: 查找位置方法 迭代方法 归并方法 Date类型 RegExp类型 Function类型 三种表示法: 方法重载 函数内部属性(arguments 和 this) 基本包装类型 浏览器的内置对象 URI 编码方法 总结 我们在<

  • JavaScript基础进阶之数组方法总结(推荐)

    数组常用方法总结: 下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join().toString() 6个增删数组元素的方法:pop().push().shift().unshift().slice().splice() 2个数组排序方法:reverse().sort() 连接数组的方法: 1.concat() 作用:连接两个数组,合并为一个新数组. 用法:arr1.concat

  • JavaScript数组类型Array相关的属性与方法详解

    Array数组类型详解 在ECMAScript中除了object类型之外,Array数组用的是最常用的类型.ECMAScript数组可以在每一项存储任何类型的值,无需指定数组的长度,还可以随着数据的增长来增加数组长度,这些是和其他语言的数组不同的. 1.数组的创建方法 数组字面量方式 var arr = [1,2,3,4,5];// 简单直接用中括号包裹构建数组 数组构造函数 var arr = new Array(1,2,3,4,5);// 通过内置Array对象构建数组 2.检测数组 ins

  • JavaScript实现串行请求的示例代码

    使用async和await var fn = async function(promiseArr) { for(let i = 0,len = arr.length; i<len; i++) { currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]); var result = await currentPromise; console.log(res

  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    目录 稀疏数组是什么 JavaScript数组天生就是稀疏数组 JavaScript数组稀疏特性带来的“怪异现象” slice会复制孔 forEach.every会跳过孔(不对孔调用回调函数) map不对孔调用回调函数,但是孔会保留 filter不对孔调用回调函数,但是孔会被过滤掉 join会将孔转化为一个空字符串进行拼接,与undefined一样 初始化无孔数组的方法 Array.apply(null, Array(n))的原理 稀疏数组是什么 在绝大多数JavaScript的实现中,数组是稀

  • JavaScript 基础篇（一）

    JavaScript 基础篇(一) 基础篇 Javascript:一.数据类型和值 javascript:允许使用3种基本类型数据--------数字.字符串.布尔值,此外还支持两种小数据类型null(空)和undefine(未定义). javascript:还支持符合数据类型-对象(object),javascript中对象分两种,一种对象表示的已命名的值的无序集合,另一种表示有 编号的值的有序集合.其实有序集合就是数组(Array). javascript:还定义了另一种特殊对象----函数

  • Javascript常用运算符(Operators)-javascript基础教程

    javascript基础教程算术运算符 运算符 运算符说明 示例 示例说明 + 加法 x+y 如果x为整数2,y为整数5, x+y等于7 如果x为字符串"text1", y为字符串"fun", x+y则等于"text1fun" - 减法 x-y * 乘法 x*y / 除法 x/y % 两者相除求余数 x%y 如果x等于10, y等于3, x%y结果等于1 ++ 递增 x++ 如果x等于10, x++等于11 -- 递减 y-- 如果y等于10,

随机推荐