Array.prototype.forEach数组遍历
forEach是Array新方法中最基本的一个,就是遍历,循环。先看以前是怎么遍历数组的
常用遍历
var arr = [1,2,3,4,5];
for(var i = 0; i < arr.length; i++){
console.log(arr[i]); // 1,2,3,4,5
}
排除null与undefined和不存在元素的遍历
var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
if(!arr[i]) continue; // 跳过了null和undefined和不存在元素
console.log(arr[i]); // 1,5 //等同于
if(arr[i]){ // 跳过了null和undefined和不存在元素
console.log(arr[i]);
}
}
排除undefined和不存在元素的遍历
var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
if(arr[i] === undefined) continue; // 跳过undefined和不存在元素
console.log(arr[i]); // 1,null,5 //等同于
if(arr[i] !== undefined){ // 跳过undefined和不存在元素
console.log(arr[i]);
}
}
跳过不存在的元素,如没有值的undefined元素
var arr = [1,undefined,null,,5];
for(var i = 0; i < arr.length; i++){
if(!(i in arr)) continue;
console.log(arr[i]); // 1,undefin,null,5 //等同于
if(i in arr){
console.log(arr[i]);
}
}
ECMAScript5中遍历数组元素的新方法,使用forEach()方法
/*
* ECMAScript5中遍历数组元素的新方法,使用forEach()方法
* @ 语法:arr.forEach(callback[, thisArg]);
* @ param callback // 回调函数
* @ param thisArg // 改变回调函数里面的this指向
* @ 语法:arr.forEach(function(value, index, array));
* @ param value // 数组的值
* @ param index // 数组的索引
* @ param array // 数组本身
*/ // forEach循环
var arr = [1,2,3,4,5];
arr.forEach(function(value,index, array){
console.log("第"+ index + "的值是:" + value + ",数组本身:" + array);
}); /* logs
第0的值是:1,数组本身:1,2,3,4,5
第1的值是:2,数组本身:1,2,3,4,5
第2的值是:3,数组本身:1,2,3,4,5
第3的值是:4,数组本身:1,2,3,4,5
第4的值是:5,数组本身:1,2,3,4,5
*/
forEach只跳过不存在的元素(不存在索引,但可以访问,如arr[3],值为undefined)
var arr = [1,null,undefined,,5];
arr.forEach(function(value,index, array){
console.log("第"+ index + "的值是:" + value);
}); /* logs
第0的值是:1
第1的值是:null
第2的值是:undefined
第4的值是:5
*/
forEach第二个参数改变回调函数里面的this指向
var arr = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
arr.forEach(function(value, index, array){
console.log("第"+ index + "的值是:" + value);
console.log(this); // 第二个参数改变回调函数里面的this指向 this = ["a", "b", "c", "d", "e"];
}, arr2);
polyfill
/*
* polyfill
* @ forEach()是ECMAScript5中的方法
*/
if(!Array.prototype.forEach){
Array.prototype.forEach = function(callback,thisArg){
var T, k;
if(this === null){
throw new TypeError("this is null or not defined")
}
var O = Object(this);
var len = O.length >>> 0;
if(typeof callback !== "function"){
throw new TypeError(callback + " is not a function");
}
if(arguments.length > 1){
T = thisArg;
}
k = 0;
while(k < len){
var kValue;
if(k in O){
kValue = O[k];
callback.call(T,kValue,k,O);
}
k++;
}
}
} var len = O.length >>> 0;
这么写确实比 var len = this.length || 0; (parseInt?)要好很多,在遇到意外的 this 时,它不会返回 { }、[ ] 等意外的值。(IE 6+ 支持)
1.所有非数值转换成0
2.所有大于等于 0 等数取整数部分 // 测试类型值 >>> 的结果
![]()
Array.prototype.forEach数组遍历的更多相关文章
- 数组的方法之(Array.prototype.forEach() 方法)
forEach() 方法对数组的每个元素执行一次提供的函数. 注意: 没有返回一个新数组 并且 没有返回值! 应用场景:为一些相同的元素,绑定事件处理器! const arr = ['a', 'b', ...
- Array.prototype.forEach()&&Array.prototype.map()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach https ...
- 数组方法 Array.prototype
Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者 ...
- 来自数组原型 Array.prototype 的遍历函数
1. Array.prototype.forEach() forEach() 是一个专为遍历数组而生的方法,它没有返回值,也不会改变原数组,只是简单粗暴的将数组遍历一次 参数: callback() ...
- 数组遍历 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...
- JS几种数组遍历方式以及性能分析对比
前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
- 浅谈JS的数组遍历方法
用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...
- JS数组遍历方法
常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...
- JS 中的数组遍历方式效率比较
JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代码如下: ; j < ...
随机推荐
- linux 批量创建用户获取8位随机密码
#创建账号 分组不分组只有一列useradd无法添加三个账号 添加账号 获取密码 执行最后一句echo stu{4..6}|xargs -n 1|sed -r 's#(.*)#useradd \ ...
- WPF教程五:布局之Canvas面板
Canvas:画布面板 画布,用于完全控制每个元素的精确位置.他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面.使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元 ...
- form_tag
class SwitchesController < ApplicationController #before_filter :authenticate_user!, :except => ...
- 上手并过渡到PHP7(2)——必须传递int, string, bool参数?没问题
Type hints, Type safe 泊学实操视频 泊学原文链接PHP 7中最引人注目的新特性之一,无疑是Scalar type hints.我们可以在函数参数和返回值中使用scalar typ ...
- kettle优化
http://blog.csdn.net/cissyring/archive/2008/05/29/2494130.aspx 1. Join 我得到A 数据流(不管是基于文件或数据库),A包含fiel ...
- MySQl安装全解
这是第二次安装MySql了.第一次安装花了几个小时,理解安装的每一个页面,这次光寻找安装包就找了几个.因此感觉有必要做一次全面的安装笔记.(有点浪费时间了,可是感觉非常值得)本人系统是window7. ...
- 同一种类型的两个对象赋值,用反射。再也不用点属性了。。。。(适用于ef)
/// <summary> /// 给对象赋值的方法(不赋地址)(同一个类型),含过滤 /// </summary> /// <typeparam name=" ...
- HTML input只能输入数字
onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.v ...
- Spring-bean的作用域
在大多数情况下,单例bean是很理想的方案.初始化和垃圾回收对象实例所带来的的成本只留给一些小规模任务,在这些任务中,让对象保持无状态并且在应用中反复重用这些对象可能并不合理.在这种情况下,将clas ...
- 搜集的一些酷炫的金属色 ,RGB值 和大家分享一下
开发iOS程序过程中会使用到RGB,要注意每个RGB值都要除以 255.0 ,注意: ' .0 ' 不能省!! 一下是本人搜集的一些酷炫金属色的RGB值: 黄金 242,192,86 石墨 87, ...