专栏首页Czy‘s BlogJs遍历数组总结

Js遍历数组总结

Js遍历数组总结

遍历数组的主要方法为forforEachmapfor infor of

for

var arr = [1,2,3,4,5];
var n = arr.length; // 直接取长度,避免每次循环都读取arr对象的属性
for(let i=0; i<n; ++i ){
    console.log(arr[i]);
}
// 1 2 3 4 5

//循环体也可以这么写
for(let i=0, len=arr.length; i<len; ++i ){
    console.log(arr[i]);
}
// 1 2 3 4 5

forEach

Array.prototype.forEach() arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) callback 为数组中每个元素执行的函数,该函数接收一至三个参数 currentValue 数组中正在处理的当前元素 index 可选 数组中正在处理的当前元素的索引 array 可选 正在操作的数组 thisArg 可选 当执行回调函数callback时,用作this的值 注意如果使用箭头函数表达式来传入callbackthisArg参数会被忽略,因为箭头函数在词法上绑定了this值 注意如果想在遍历执行完之前结束遍历,那么forEachmap并不是好的选择

var arr = [1,2,3,4,5];
var obj = { a: 1 }; // 定义obj为了演示this用
arr.forEach( function(currentValue,index,array) {
    console.log("当前值",currentValue);
    console.log("当前值索引",index);
    console.log("当前处理数组",array);
    console.log("当前this指向",this);
    console.log("结束一次回调,无需返回值");
    console.log("");
},obj);
/*
    当前值 1
    当前值索引 0
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    结束一次回调,无需返回值
    
    当前值 2
    当前值索引 1
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    结束一次回调,无需返回值
    
    ...........
*/
// forEach使用频率较高,但是性能不如普通for循环

map

Array.prototype.map() arr.map(callback(currentValue [, index [, array]])[, thisArg]) callback 为数组中每个元素执行的函数,该函数接收一至三个参数 currentValue 数组中正在处理的当前元素 index 可选 数组中正在处理的当前元素的索引 array 可选 正在操作的数组 thisArg 可选 当执行回调函数callback时,用作this的值 注意如果使用箭头函数表达式来传入callbackthisArg参数会被忽略,因为箭头函数在词法上绑定了this值 注意map回调函数return的结果组成了新数组的每一个元素,原数组被映射成对应新数组

var arr = [1,2,3,4,5];
var obj = { a: 1 }; // 定义obj为了演示this用
var newArr = arr.map( function(currentValue,index,array) {
    console.log("当前值",currentValue);
    console.log("当前值索引",index);
    console.log("当前处理数组",array);
    console.log("当前this指向",this);
    console.log("");
    return currentValue + 10; // 将arr值加10返回成为新数组
},obj);
console.log(newArr); // [11, 12, 13, 14, 15]
/*
    当前值 1
    当前值索引 0
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    
    当前值 2
    当前值索引 1
    当前处理数组 (5)[1, 2, 3, 4, 5]
    当前this指向 {a: 1}
    
    ...........
*/
//这种方式也是用的比较广泛的,但性能不如forEach

for in

// 此方法遍历数组效率非常低,主要是用来循环遍历对象的属性

// 遍历数组
var arr = [1,2,3,4,5];
for(item in arr){
    console.log(arr[item]);
}
// 1 2 3 4 5
// 数组遍历时需注意,数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。
// 不能保证for ... in将以任何特定的顺序返回索引。
// for ... in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。
// 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。
// 因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环

// 遍历对象
var obj = {a:1,b:2};
for(item in obj){
    console.log(obj[item]);
}
// 1 2
// for ... in是为遍历对象属性而构建的

for of

for ofES6新增,其在可迭代对象包括ArrayMapSetString``TypedArrayarguments对象等等上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

var arr = [1,2,3,4,5];
for (let value of arr) {
    console.log(value);
}
// 1 2 3 4 5

operate

Array.prototype还提供了对于数组的判断与过滤操作,every()some()find()findIndex()filter()

var arr = [1,2,3,4,5];

// arr.everymap(callback(currentValue [, index [, array]])[, thisArg])
// every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
console.log(arr.every( (currentValue ) => {
    return currentValue > 1;
})) // false

console.log(arr.every( (currentValue ) => {
    return currentValue > 0;
})) // true

// arr.some(callback(element[, index[, array]])[, thisArg])
// some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
console.log(arr.some( (currentValue ) => {
    return currentValue > 1;
})) // true

console.log(arr.some( (currentValue ) => {
    return currentValue > 6;
})) // false

// arr.find(callback(element[, index[, array]])[, thisArg])
// find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
console.log(arr.find( (currentValue ) => {
    return currentValue > 2;
})) // 3

console.log(arr.find( (currentValue ) => {
    return currentValue > 6;
})) // undefined

// arr.findIndex(callback(element[, index[, array]])[, thisArg])
// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。
console.log(arr.findIndex( (currentValue ) => {
    return currentValue > 2;
})) // 2

console.log(arr.findIndex( (currentValue ) => {
    return currentValue > 6;
})) // -1

// arr.filter(callback(element[, index[, array]])[, thisArg])
// filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
console.log(arr.filter( (currentValue ) => {
    return currentValue > 2;
})) // [3, 4, 5]

参考

https://blog.csdn.net/function__/article/details/79555301
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Js数组操作

    JavaScript数组操作,主要包括Array对象原型方法以及常用操作如去重、扁平化、排序等。

    WindrunnerMax
  • JS原型与原型链

    JavaScript有着七种基本类型String、Number、Boolean、Null、Undefined、Symbol、Object,前六种为基本数据类型,...

    WindrunnerMax
  • Vue父子组件生命周期

    Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程,这个过程就是Vue的生命周期,Vue中提供的钩子函数有before...

    WindrunnerMax
  • js数组常用方法总结

    最近工作中经常用到数组操作,每次都傻傻不知道怎么用,今天有时间整理了一下,希望对大家有帮助!这些基础的知识,要熟记于心。

    半指温柔乐
  • JavaScript对象length

    前几日有在Javascript数组操作一文中稍提及了数组的length属性;深入一点探究,就发现JS这length确有许多难为所知的特性。这就边学边探究下这朵奇...

    晚晴幽草轩轩主
  • JavaScript基础之七——JavaScript中的正则表达式

        正则表达式在前端开发中应用十分广泛,从表单验证到内容替换,正则多发挥着十分重要的作用。JavaScript中提供了专门的正则对象。

    珲少
  • 【ES6基础】Array数组的新方法(上)

    在日常工作中我们经常会与数组打交道,因此需要熟练掌握数组操作的相关方法,ES6中关于数组的操作,又给我们带来了哪些惊喜呢,Array数组操作又添加了哪些新方法?

    前端达人
  • 小结ES6基本知识点(四):数组的扩展

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门

    前端林子
  • ES6之数组的扩展

    copyWithin方法:改变原数组,接收三个参数,在当前数组内部,将指定位置的成员复制到其他位置(数组函数参数的下标都是包前不包后)

    wade
  • es6 数组扩展方法

    1.扩展运算符     含义: 扩展运算符,三个点(...),将一个数组转为用逗号分隔的参数顺序。       例如:         console.log(...

    用户1197315

扫码关注云+社区

领取腾讯云代金券