detail 元素 輸出符 行操作 javascrip ${} ocl light 操作

數組函數

（這裏的回調函數中的index和arr都可以省略，回調函數後有參數是設置調整this指向的，這裏暫時不使用）

• forEach()
• map()— —更新數組
• filter()、includes()、find()、findIndex()— —篩選（刪除）數組
• some()、every()— —判斷數組
• reduce()— —疊加數組

arr.forEach()

遍歷數組全部元素，利用回調函數對數組進行操作，自動遍歷數組.length次數，且無法break中途跳出循環

因此不可控

不支持return操作輸出，return只用於控制循環是否跳出當前循環

因此難操作成新數組，新值，故不作多分析

示例：

[javascript] view plain copy

1. var arr = [1,2,3,4,5,] ;
2. arr.forEach(function(item,index){
3. console.log(item);
4. });

arr.map()— —更新數組

1、創建新數組

2、不改變原數組

3、輸出的是return什麽就輸出什麽新數組

4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

示例：

[javascript] view plain copy

1. var arr = [1,2,3,4,5] ;
2. var newArr = arr.map(function(item,index){
3. return item*2 ; //操作更新數組
4. })
5. console.log(newArr); //打印新數組
6. console.log(arr); //打印原數組，map()沒有改變原數組
7. var newArr2 = newArr.map(function(item,index){
8. return `<li>${item}</li>` ;
9. //ES6語法，模版字符串，波浪號鍵，變量使用${}
10. //["<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>", "<li>NaN</li>"]
11. })
12. console.log(newArr2.join(‘‘)); //數組.join()，把數組每一項連接起來，形成字符串string
13. console.log(newArr); //打印數組，map()沒有改變原數組

arr.filter()、includes()、find()、findIndex()— —篩選數組

一、arr.filter()

1、創建新數組

2、不改變原數組

3、輸出的是判斷為true的數組元素形成的新數組

4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

示例：

[javascript] view plain copy

1. var arr = [1,2,3,4,5] ;
2. var newArr = arr.filter(function(item,index){
3. return item>2&&item<5 ; //根據判斷為true來遍歷循環添加進新數組
4. })
5. console.log(newArr); //打印新數組
6. console.log(arr); //打印原數組，map()沒有改變原數組

二、arr.includes()

只是判斷數組是否含有某值，不用return，不用回調函數，輸出一個true或false

無用

示例：

[javascript] view plain copy

1. //include():
2. var arr = [1,2,3,4,5] ;
3. var new1 = arr.includes(5); //不用回調函數，且是完全匹配才行如原數組是55則flase（實用性不如正則）
4. console.log(new1);
5. console.log(arr);

三、arr.find()

1、不創建新數組

2、不改變原數組

3、輸出的是一旦判斷為true則跳出循環輸出符合條件的數組元素

4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

示例：

[javascript] view plain copy

1. var arr = [1,2,3,4,5] ;
2. var new1 = arr.find(function(item,index){
3. return item>2&&item<5 ; //當遍歷循環到判斷到一個為true則跳出循環，輸出當前數組元素，不再循環
4. })
5. var new2 = arr.find(function(item,index){
6. <span style="white-space:pre;"> </span>return item.toString().indexOf(5)>-1 ;<span style="white-space:pre;"> </span>//把當前數組元素轉為字符串，則可index()>-1判斷是否含有某字符
7. })
8. console.log(new1); //打印操作後的結果
9. console.log(new2) //打印是否含有某字符（用正則會更好，這裏學習使用一下）
10. console.log(arr); //打印原數組，find()沒有改變原數組

四、arr.findIndex()— — 與find()相同

1、不創建新數組

2、不改變原數組

3、輸出的是一旦判斷為true則跳出循環輸出符合條件的數組元素序列

4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

（較無用）

示例：

[javascript] view plain copy

1. var arr = [1,2,3,4,5] ;
2. var new1 = arr.findIndex(function(item,index){
3. return item>2&&item<5 ; //當遍歷循環到判斷到一個為true則跳出循環，輸出當前數組元素序列，不再循環
4. })
5. var new2 = arr.findIndex(function(item,index){
6. return item.toString().indexOf(5)>-1 ; //把當前數組元素轉為字符串，則可index()>-1判斷是否含有某字符
7. })
8. console.log(new1); //打印操作後的結果
9. console.log(new2) //打印是否含有某字符（用正則會更好，這裏學習使用一下）
10. console.log(arr); //打印原數組，findIndex()沒有改變原數組

arr.some()、every()— —判斷數組

(不常用)

一、some()

1、不創建新數組

2、不改變原數組

3、輸出的是判斷為true則馬上跳出循環並return成true

4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

示例：

[javascript] view plain copy

1. //arr.some()
2. var arr = [1,2,3,4,5] ;
3. var new1 = arr.some(function(item,index){
4. return item>2&&item<5 ; //判斷出一個符合條件則跳出循環並輸出true
5. })
6. var new2 = arr.some(function(item,index){
7. return item>5 ; //判斷出數組全部元素都不符合條件則輸出flase
8. })
9. console.log(new1);
10. console.log(new2);
11. console.log(arr);

一、every()— —與some相反

1、不創建新數組

2、不改變原數組

3、輸出的是判斷為false則馬上跳出循環並return成false

4、回調函數參數，item(數組元素)、index(序列)、arr(數組本身)

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

示例：

[javascript] view plain copy

1. //arr.every()
2. var arr = [1,2,3,4,5] ;
3. var new1 = arr.every(function(item,index){
4. return item>2&&item<5 ; //判斷出一個不符合條件則跳出循環並輸出flase
5. })
6. var new2 = arr.every(function(item,index){
7. return item<10 ; //判斷出數組全部元素都符合條件則輸出true
8. })
9. console.log(new1);
10. console.log(new2);
11. console.log(arr);

reduce()— —疊加數組

不一定在數學意義上的疊加計算，這裏疊加指：可以利用前遍歷操作的結果到下一次遍歷使用，重復疊加使用下去

1、創建新數組

2、不改變原數組

3、輸出的是return疊加什麽就輸出什麽 新數組

4、回調函數參數

• pre(第一次為數組第一項，之後為上一操作的結果)
• next(數組的下一項)
• index(next項的序列)
• arr(數組本身)
• 回調函數後的改變第一項參數。（不影響原數組）

5、使用return操作輸出，會循環數組每一項，並在回調函數中操作

示例：

[javascript] view plain copy

1. //reduce()：
2. //求和計算
3. var arr1 = [1,2,3,4,5] ;
4. var new1 = arr1.reduce(function(sum,next,index){
5. return sum+next ;
6. /*
7. *第一次：pre-->1 next-->2 index-->1
8. *遍歷計算return得結果為pre+next=1+2=3
9. *第二次：pre-->3 next-->3 index-->2
10. *遍歷計算return得結果為pre+next=3+3=6
11. *第三次：pre-->6 next-->4 index-->3
12. *遍歷計算return得結果為pre+next=6+4=10
13. *第四次：pre-->10 next-->5 index-->4
14. *遍歷計算return得結果為pre+next=10+5=15
15. */
16. })
18. //扁平化數組
19. var arr2 = [[1,2,3],[4,5],[6,7]] ;
20. var new2 = arr2.reduce(function(pre,next,index){
21. return pre.concat(next); //前數組拼接後數組 .concat()
22. })
24. //對象數組疊加計算
25. var arr3 = [{price:10,count:1},{price:15,count:2},{price:10,count:3}];
26. var new3 = arr3.reduce(function(pre,next,index){
27. return pre+next.price*next.count;
28. //當需要對第一項進行操作時，後面pre使用上一項操作結果，不再需要操作
29. //所以當需要操作第一項的時候，利用reduce(callbreak(){},往數組第一項前添加一項，如:0)
30. },0) //在原數組第一項添加為0，不改變原數組，則可不操作第一項
32. console.log(new1);
33. console.log(new2);
34. console.log(new3);
36. console.log(arr1); //普通數組
37. console.log(arr2); //多重數組
38. console.log(arr3); //對象數組

FOREACH、MAP、FILTER、SOME、EVERY五個數組方法