原生js 数组的迭代的方法

一、原生js Array给我们提供很多了方法。方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项、该项的索引、以及数组本身。

1、filter方法:对数组每一项执行匿名函数,并返回符合条件的数组的项。

1     var  testArr=[1,2,3,4,52,2];
2     //filter 方法
3     var moreTwo=testArr.filter(function(item,index,array){
4         return item >2;
5     });
6     console.log(moreTwo);

2、map方法:对数组中每一项进行操作,返回值为匿名函数操作的所有项。

1     var addTwo=testArr.map(function(item,index,ar){
2         return item+=2
3     });
4     console.log(addTwo);

3、every()和some()方法:对传入的匿名函数进进行判断,这两个函数返回值为:boolean值,every()返回所有项满足给定条件时返回true,而some(),只要有一个满足条件就返回true。

1     var everBoolean=testArr.every(function(val,index,arr){
2         return val>2;
3     });
4     var  someBoolean=testArr.some(function(v,i,arr){
5         return i>2
6     });
7     console.log(everBoolean,someBoolean);

4、forEach() 没有返回值,只是对于数组中每一项执行操作。

1     var forEachVal=testArr.forEach(function(v,i,arr){
2         return v+=2;
3     } )
4     console.log(testArr,forEachVal);

二、 总结:

上面的方法并没有修改原先的数组结构,而是需要我们创建一个新的副本进行储存符合我们的条件的值或者进行一些逻辑判断。而jquery 框架中,可以直接进行修改,但是我们也进行修改,因为在匿名的函数中第三个参数就是当前传入值为我们之前定义的数组的指针,所以我们可以进行修改。

但是这些方法对于我们来说满足我们日常的需求。

1     var addModTwo=testArr.map(function(item,index,ar){
2         ar[index]=item+2;
3         return item+=2
4     });
5     console.log(testArr)

所以灵活使用上面的方法,来解决实际问题。

原文地址:https://www.cnblogs.com/evilliu/p/9765226.html

时间: 2024-08-04 01:49:19

原生js 数组的迭代的方法的相关文章

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

【JS】如何用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 总的来说,window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.   具体一些,可以从以下几方面对比它们的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行

原生JS数组去重的几种方法

有时候我们做项目的时候往往会需要把数组里面一些重复的项去掉,但是原生JS有排序,有筛选等等,但是就是没有数组去重怎么办呢?这能怎么办,自己手动实现嘛.(以下代码直接在原型上添加的的方法,为的就是和原生JS方法类似)可以达到Array.xxx()这样的效果 第一种方法:创建空数组利用indexOf方法检测就数组的项是否在新数组中. Array.prototype.unique=function(){ var arr=[];//创建新数组 for(var i=0;i<this.length;i++)

跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现,现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问

用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法

html <div id="app"> <span v-text="number"></span> <btn @click.native="add(10,$event)"></btn> <button @click="add(10,$event)">add</button> </div> <button onclick=&qu

js数组中的reverse()方法

reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reverse方法能否用于undefined与null上 实验代码如下: 1 <script type="text/javascript"> 2 var foo=function () { 3 var c=null; 4 var d=undefined; 5 //reverse方法测试

简单谈谈JS数组中的indexOf方法

前言 相信说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用,正则不熟练同学的利器.这篇文章就最近遇到的一个问题,用实例再说说说indexOf方法.本文是小知识点积累,不作为深入讨论的话题,因此这里没有解释indexOf()的第二个参数,相信大家都知道第二个参数的作用. String 类型的使用 温习一下大家熟知的字符串用法,举个 ? 1 2 3 4 5 let str = 'orange'; str.indexOf('o'); //0 str.indexOf('n');

原生JS数组方法(二)——reverve()、slice()、concat()、sort()

reverve 数组的倒序方法 Array.prototype.reverse = function(){ //用二分法 for(var i=0;i<this.length/2;i++){ //解构赋值 [this[i],this[this.length-1-i]] = [this[this.length-1-i],this[i]] } return this } slice 数组截取,不改变原数组,并把截取的新数组返回出去 Array.prototype.Slice =function(n=0

原生JS数组对象去重方法

function uniqueArr(arr){ var hash = []; for(var i=0;i<arr.length;i++){ var flag = true; for(var j=0;j<hash.length;j++){ if(arr[i].ids == hash[j].ids){ flag = false; } } if(flag){ hash.push(arr[i]); } } return hash; } 传入有重复对象的一个数组arr,使用对象中唯一标识ids区分对象