导航:首页 > 使用方法 > js遍历数组的常用方法

js遍历数组的常用方法

发布时间:2023-01-02 03:02:37

Ⅰ JS数组循环遍历常用的9种方法

首先定义一个数组

const arr = [1,2,3,4,5,6];

第一种:for循环

for (let i = 0;i<arr.length;i++){

   console.log(arr[i]);

}

for(j=0,len=arr.length;j<len;j++){}//这种方法基本上是所有循环遍历方法中性能最高的一种

第二种 for of (需要ES6支持) 性能要好于forin,但仍然比不上普通for循环

for (let value of arr){

       console.log(value);

}

第三种 for in 它的效率是最低的

for (let i in arr){

      console.log(arr[i]);

 }

第四种 foreach() 实际上性能比普通for循环弱

    1、箭头函数写法

    arr.forEach(value =>{

        console.log(value);

    })

    2、普通函数写法

    arr.forEach(function(value){

       console.log(value);

     })

第五种 entries()

for (let [index, value] of arr.entries()) {

     console.log(value);

 }

第六种 keys()

for (let inx of arr.keys()){

console.log(arr[inx]);

}

第七种 rece()

1、箭头函数

arr.rece((pre,cur)=>{

       console.log(cur);

 })

2、普通函数

arr.rece(function(pre,cur){

     console.log(cur);

})

第八种 map() 但实际效率还比不上foreach

1、箭头函数

 arr.map(value=>{

       console.log(value);

 })

2、普通函数

arr.map(function(value){

      console.log(value);

})

第九种 values()

for (let value of arr.values()){

       console.log(value);

 }

Ⅱ js遍历数组some()方法

题目描述:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。一个简单的数组遍历题。

答案:js语言:

functionFind(target, array){returnarray.some(arr => arr.some(e => e === target))}

解释:

外面的some方法是对每个一维进行遍历,里面的some方法是对每个一维的每一个元素进行遍历,判断是否严格等于要找的target元素,复杂度为n方。

 =>是es6语法中的arrow function

例:(x) => x + 6 相当于

function(x){

    return x + 6;

};

那么e => e === target表示返回严格等于target的元素e

some()方法用于检测数组中的元素是否满足指定条件

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回 true  , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

注意:  some() 不会对空数组进行检测。

注意:  some() 不会改变原始数组。

这里小记一下some以及类似的every,对比一下其他遍历方法

some() 有一个元素满足条件,即返回true

const a = [1, 2, 3]console.log(a.some(v => v > 5))  //falseconsole.log(a.some(v => v < 2))  //true

every() 所有元素满足条件,即返回true

const a = [1, 2, 3]console.log(a.every(v => v < 5))  //trueconsole.log(a.every(v => v < 2))  //false

filter() 返回包含满足条件元素的数组

const a = [1, 2, 3]

console.log(a.filter(v => v < 3))  // [1, 2]

map() 返回一个新数组

const a = [1, 2, 3]

console.log(a.map(v => v + 5))  // [6, 7, 8]

forEach() 仅循环,无返回值,本质上相当于for

const a = [1, 2, 3]

a.forEach(v => console.log(v))  // 1    2    3

Ⅲ js遍历多维数组(面向对象)

//实现一个 Array each方法 实现遍历多维数组

var arr = [1,2,3,[4,[5,6]]]; //arr.length

Array.prototype.each = function(fn){

try{

//1 目的  遍历数组的每一项  //计数器 记录当前遍历的元素位置

this.i || (this.i=0);

//2 严谨的判断什么时候去走each核心方法

//当数组的长度大于 0 的时候 && 传递的参数 必须为函数

if( this.length>0  && fn.constructor == Function ){

// 循环遍历数组的每一项 

while( this.i < this.length ){

//获取数组的每一个值

var e = this[this.i]; //数组的每一项

//如果当前元素获取到了 并且当前元素是一个数组

if(e && e.constructor == Array ){

//直接递归操作

e.each(fn);

}else{

//如果不是数组 (那就是一个单个元素)

//var obj = true;

//fn.apply(obj,[e]);

//这的目的就是为了把数组的当前元素 传递给fn函数,并且让函数执行

fn.call(e,e);

}

this.i++

}

this.i == null ; //释放内存 垃圾回收机制回收变量

}

}catch(err){

//do something

}

return this;

}

arr.each(function(item){

console.log(item)

});

Ⅳ js数组遍历的常用的几种方法以及差异和性能优化

<script type="text/javascript">
/*对比:
1、map速度比foreach快
2、map会返回一个新数组,不对原数组产生影响,foreach不会产生新数组,foreach返回undefined
3、map因为返回数组所以可以链式操作,foreach不能
4, map里可以用return ,而foreach里用return不起作用,foreach不能用break,会直接报错*/
/*方法一:*/
var arr1 = [1, 2, 3, 4, 5, 6];
for(var i = 0, len = arr1.length; i < len; i++) { //优化性能处理
console.log(arr1[i], 'for遍历出来的数据'); //每个item 1,2,3,4,5,6
}
/*方法二:*/
/*forEach方法中的function回调支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身*/
var arr2 = [{
name: 'bob',
age: 20
},
{
name: 'tom',
age: 18
},
{
name: 'sos',
age: 19
}
]
arr2.forEach((val, i) => { //没有返回值的,对原来数组也没有影响
console.log(val, '遍历出来的每个obj')
});
/*方法三:*/
var fruits = [1, 2, 3, 4, 5, 6, 7, 8];
let arr = fruits.map((item, index) => {
console.log(item, 'top')
console.log(index, 'top')
return item * 8
})
console.log(arr, 'newarr') //[8, 16, 24, 32, 40, 48, 56, 64] "newarr"
var a = fruits.indexOf("Apple", 4);
console.log(a)
//for 和 forEach都是普通循环,map 带返回值并且返回一个新数组;
/*
*当前元素的值,当期元素的索引值,当期元素属于的数组对象;
语法:array.map(function(currentValue,index,arr), thisValue)
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
* */
/*方法四:*/
/*兼容写法:
不管是forEach还是map在IE6 - 8 下都不兼容( 不兼容的情况下在Array.prototype上没有这两个方法), 那么需要我们自己封装一个都兼容的方法:*/
/**
* forEach遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myForEach = function myForEach(callback, context) {
context = context || window;
if('forEach' in Array.prototye) {
this.forEach(callback, context);
return;
}
//IE6-8下自己编写回调函数执行的逻辑
for(var i = 0, len = this.length; i < len; i++) {
callback && callback.call(context, this[i], i, this);
}
}
/**
* map遍历数组
* @param callback [function] 回调函数;
* @param context [object] 上下文;
*/
Array.prototype.myMap = function myMap(callback, context) {
context = context || window;
if('map' in Array.prototye) {
return this.map(callback, context);
}
//IE6-8下自己编写回调函数执行的逻辑var newAry = [];
for(var i = 0, len = this.length; i < len; i++) {
if(typeof callback === 'function') {
var val = callback.call(context, this[i], i, this);
newAry[newAry.length] = val;
}
}
return newAry;
}
</script>

Ⅳ JS中几种包含for的遍历方式

数组的常用遍历方法常用有:for、map、forEach

letarr=[1,2,3,4,5];
arr.forEach((i)=>{
console.log(i);//12345});
}
letarr=['a','b','c','d'];
letnewArr=arr.map((val,key)=>{
if(val=='c'){
returnval;
}
});
console.log(newArr);//[undefined,undefined,'c',undefined];
letarr=[10,20,30,40,50];
for(letiteminarr){
console.log(item);//'0''1''2''3''4'}
}

如果是对象数据(可枚举属性)

letobj={name:'xiaoming',age:15}
for(letiteminobj){
console.log(item);//nameage
}

【秉着学习的态度,如有错误请指正】

Ⅵ js中遍历数组对象的几种方式

concat()连接两个或更多的数组,并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()删除并返回数组的最后一个元素
push()向数组的末尾添加一个或更多元素,并返回新的长度。
reverse()颠倒数组中元素的顺序。
shift()删除并返回数组的第一个元素。
slice()从某个已有的数组返回选定的元素等等。

阅读全文

与js遍历数组的常用方法相关的资料

热点内容
约一场球的正确方法 浏览:185
在家中洗衣服的方法如何 浏览:291
28天锻炼腹肌最快的方法 浏览:199
简单练翘臀方法视频 浏览:756
心理诊断评估常用的方法有哪些 浏览:841
什么方法能让手机不黑屏 浏览:719
电脑开机慢的处理方法视频 浏览:722
后天形成内斜视训练方法有哪些 浏览:359
羊脂白的鉴别方法 浏览:621
家常腌酸菜方法视频 浏览:254
黄安伦的教学方法 浏览:961
做糖最简便的方法 浏览:638
草酸的检测方法国标 浏览:846
如何提高写作水平有哪些方法 浏览:502
最简单的温柔方法 浏览:362
oppor4耗电快解决方法 浏览:607
尘埃粒子计数器使用方法 浏览:767
打鼓方法与技巧 浏览:877
阴部按摩器使用方法 浏览:879
迷迭香的使用方法 浏览:85