循环遍历中几个高频使用的方法

206 阅读3分钟

forEach()

forEach() 是一个JavaScript方法,用于调用 数组 的每个元素,并将元素传递给回调函数。 forEach() 对于空数组是不会执行回调函数的。

示例:

let a=[4,2,3,5];
let b=[];

a.forEach( i => console.log(i) );     //依次输出4,2,3,5
b.forEach( i => console.log(i) );     //undefined(对于空数组是不会执行回调函数)

a.forEach((item,index,arr) => {       //第一个参数item表示当前元素,第二个参数index表示当前元素索引值,第三个元素表示当前元素所在的数组
  console.log(item +'-'+ index);         //依次输出 4-0,2-1,3-5,5-3
  console.log(arr);                     //全部输出[4,2,3,5](原数组a)
});

some()

some() 方法用于检测数组中是否存在满足指定条件(函数提供)的元素。

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

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

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

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

示例:

let b=[
  {age:20,name:'tom'},
  {age:30,name:'jack'},
  {age:40,name:'jerry'},
  {age:50,name:'jinx'},
]

b.some( i => i.age>30 );        //true
b.some( i => i.age>70 );        //false

indexOf()

indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

返回值为首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1。

示例:

let a = [2, 9, 7, 8, 9]; 
a.indexOf(2); // 0 
a.indexOf(6); // -1
a.indexOf(7); // 2

every()

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

示例:

let a=[1,3,5,7,9,20]

a.every( i => i>6 );        //false
a.every( i => i>0 );        //true

find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

示例:

let a=[1,3,5,7,9,20]

a.find( i => i>6 );     //返回7(第一个满足条件的元素)

filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

示例:

let a=[1,3,5,7,9,20]

a.filter( i => i>6 );       //返回新数组 [7,9,20]

let [...spread]= [12, 5, 8, 130, 44];       //等同于:let spread = 浅克隆([12, 5, 8, 130, 44]) 
let filtered = spread.filter( i => i>10 );
console.log(filtered);      //返回[12, 130, 44]

for···in

for···in 语句用于循环对象属性。注意不要使用 for···in 语句来循环数组的索引,你可以使用 for 语句替代。

let person = {fname:"John", lname:"Doe", age:25}; 

for (let x in person) {
    console.log(person[x]);     //依次输出John,Doe,25
}

for···of

这一部分强烈推荐自行查阅 MDN文档

for...of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

let person = [{name:'tom',age:'20'},{name:'lee',age:'21'},{name:'lin',age:'30'}]

for (let x of person) {         //依次输出每个元素
    console.log(x);             //依次输出:{name: "tom", age: "20"},{name: "lee", age: "21"},{name: "lin", age: "30"}
}

for (let x of person.keys()) {      //依次输出每个元素的索引值
    console.log(x);                 //依次输出:0,1,2
}

for···infor···of 的区别:

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以原始插入顺序迭代对象的可枚举属性

for...of 语句遍历可迭代对象定义要迭代的数据

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

待补充

map()

set()

// 去除数组的重复成员
[...new Set(array)]