迴圈遍歷中幾個高頻使用的方法

宮商角徵羽發表於2018-06-25

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···in 與 for···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)]
複製程式碼

相關文章