常見的JavaScript的循環處理數據方法

1. for 循環

let arr = [1,2,3];

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

 console.log(i,arr[i])

}

// 0 1    // 1 2   // 2 3

2.for in 循環

let obj = {name:'zhou',age:'**'}

for(let i in obj){

 console.log(i,obj[i])

}

// name zhou   // age **

for in 循環主要用於遍歷普通對象,i 代表對象的 key 值,obj[i] 代表對應的 value。

3.while 循環

cars=["BMW","Volvo","Saab","Ford"];

var i=0;

while (cars[i])

{

console.log(cars[i] + "<br>")

i++;

};

4. do while 循環

let i = 3;

do{

 console.log(i)

 i--;

}while(i>0)

// 3   // 2  // 1

5. Array forEach 循環

let arr = [1,2,3];

arr.forEach(function(i,index){

  console.log(i,index)

})

// 1 0   // 2 1   // 3 2

6. Array map()方法

let arr = [1,2,3];

let tt = arr.map(function(i){

 console.log(i)

 return i*2;

})   // [2,4,6]

map() 方法返回一個新數組,數組中的元素爲原始數組元素調用函數處理後的值。

注意:map 和 forEach 方法都是隻能用來遍歷數組,不能用來遍歷普通對象。

map: 一定遍歷全部數據,不能通過return結束,消耗性能,不要常用。
常用於轉換數據結構,比forEach快。

7. Array filter()

let arr = [1,2,3];

let tt = arr.filter(function(i){

  return i>1;

})   // [2,3]

filter 方法是 Array 對象內置方法,它會返回通過過濾的元素,不改變原來的數組。

8、Array some() 方法

let arr = [1,2,3];

let tt = arr.some(function(i){

  return i>1;

})     // true

some() 方法用於檢測數組中的元素是否滿足指定條件(函數提供), 返回 boolean 值,不改變原數組。

注意:some() 中只要有一項滿足條件則返回 true

9、Array every() 方法

let arr = [1,2,3];

let tt = arr.every(function(i){

  return i>1;

})    // false

every() 方法用於檢測數組中的元素是否滿足指定條件(函數提供), 返回 boolean 值,不改變原數組。

注意:every() 中所有項滿足條件 纔會返回 true

10、Array reduce()方法

let arr = [1,2,3];

let ad = arr.reduce(function(i,j){

  return i+j;

})// 6

reduce() 方法接收一個函數作爲累加器,數組中的每個值(從左到右)開始縮減,最終計算爲一個值。

11、Array reduceRight()方法

let arr = [1,2,3];

let ad = arr.reduceRight(function(i,j){

  return i+j;

})

// 6

reduceRight()方法,和 reduce() 功能是一樣的,它是從數組的末尾處向前開始計算。

 

12. for of 循環

let arr = ['name','age'];

for(let i of arr){

  console.log(i)

}

// name

// age

for of 循環是 Es6 中新增的語句,用來替代 for in 和 forEach,它允許你遍歷 Arrays(數組), Strings(字符串), Maps(映射), Sets(集合)等可迭代(Iterable data)的數據結構,注意它的兼容性。

 

while和do–while循環的主要區別如下:

1、循環結構的表達式不同

while循環結構的表達式爲:while(表達式){循環體}。

do-while循環結構表達式爲:do{循環體;}while (條件表達);。

 

2、執行時判斷方式不同

while循環執行時只有當滿足條件時纔會進入循環,進入循環後,執行完循環體內全部語句至當條件不滿足時,再跳出循環。

do-while循環將先運行一次,在經過第一次do循環後,執行完一次後檢查條件表達式的值是否成立,其值爲不成立時而會退出循環。

3、執行次數不同

while循環是先判斷後執行,如果判斷條件不成立可以不執行中間循環體。

do-while循環是先執行後判斷,執行次數至少爲一次,執行一次後判斷條件是否成立,如果不成立跳出循環,成立則繼續運行循環體。

4、執行末尾循環體的順序不同

while循環的末尾循環體也是在中間循環體裏,並在中間循環體中執行,循環體是否繼續運行的條件也在循環體中。

do-while循環是在中間循環體中加入末尾循環體,並在執行中間循環體時執行末尾循環體,循環體是否繼續運行的條件在末尾循環體裏。

 

7、find和findindex是 查找,find 找到一個就返回 符合條件的數據,findIndex找到一個返回符合條件的下標,find找不到返回undefined,findindex找不到返回-1。

const Arr=[1,2,3];

let num=Arr.find((x)=> x > 2);

console.log(num);  // 3

const Arr=[1,2,3];

let num=Arr.findIndex((x)=> x > 2);

console.log(num); // 2

1. reduce

作用:對數組進行迭代,然後兩兩進行操作,最後返回一個值
返回值:return出來的結果
是否改變原有數組:否

var arr = [1,2,3]var ret = arr.reduce(function(a,b){

    return a*b;})

console.log(ret);// 6

console.log(arr)// [1,2,3]

2. reduceRight

作用:對數組進行迭代,然後兩兩進行操作,
從右往左對數組的元素進行兩兩操作,把每次操作的結果當做下次比較的前者,重複這樣的操作,直到最後返回一個值
返回值:return出來的結果
是否改變原有數組:否

var arr = [1,2,6]var ret = arr.reduce(function(a,b){

    return a*b;})

console.log(ret);// 12

console.log(arr) // [1,2,3]

Let和var的區別:

1,var是最近的函數作用域,let的作用域是最接近的塊作用域,這個比函數的作用域要小。

2、當他們是全局變量時,let和var是相同的。當他們處在一個函數內,也是相同的。

3.var定義以後可以修改,不初始化會輸出undefined,不會報錯。let未定義就輸出則會報錯直接報錯:ReferenceError: letTest is not defined

4、如果在函數的for裏面定義,let只在這個for裏面有效。var是在整個函數裏面有效

5、重複聲明一個變量時。var會覆蓋上一個變量的賦值,而let則會報錯你已經定義過了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章