<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>數組的進階方法</title>
</head>
<body>
<ul>
<li><input type="checkbox">好吃的</li>
<li><input type="checkbox">好喝的</li>
<li><input type="checkbox">好玩的</li>
</ul>
<input id="all" type="checkbox">全選
<button disabled>支付</button>
<script>
/*
filter
篩選出符合函數中條件的元素，并作為一個新數組傳回
*/
var arr1 = [30,20,40,50,60,75,3,99,8];
var newArr = arr1.filter(function(ele,index,arr){
return ele>=50;
},document);
console.log(arr1); //列印：[30, 20, 40, 50, 60, 75, 3, 99, 8]
console.log(newArr); //列印：[50, 60, 75, 99]
/*
map
由數組中的每一位元素執行函數後的結果，作為新數組的值
*/
var newArr = arr1.map(function(ele,index,arr){
return ele * 2;
},document);
console.log(newArr); //列印：[60, 40, 80, 100, 120, 150, 6, 198, 16]
/*
arr.reduce(callback[,initValue])
對數組中的每一個元素執行callback函數，将結果根據callback函數中的條件，傳回單個值。
- callback ：執行的函數
- result 結果
- ele ：目前正在循環的元素
- index ：目前正在循環的元素對應的索引值
- initValue 可選。對于result進行初始化；
*/
var res = arr1.reduce(function(result,ele,index){
return result + ele;
},0);
console.log(res); //列印：385
/*
some(callback[,thisAry])
測試數組中是否至少有一個元素通過了指定函數的測試，結果傳回布爾值
- callback 用于測試的函數
- ele：數組循環中的元素
- index：元素對應下标
- array：目前正在操作的數組
- thisAry：決定callback中的this指向
*/
var btn = document.querySelector('button');
var checkboxs = document.querySelectorAll('ul input');
var allselect = document.querySelector('#all')
//querySelectorAll擷取到的元素 并不是一個數組，是一個類數組，需要轉換為數組才能使用數組的方法。
var checkBoxs = [...checkboxs];
checkBoxs.forEach(function(ele){
ele.onclick = function(){
var res1 = checkBoxs.some(function(ele){
return ele.checked;
})
btn.disabled = !res1;
var res2 = checkBoxs.every(function(ele){
return ele.checked;
})
allselect.checked = res2
}
})
btn.onclick = function(){
alert('支付成功');
}
/*
arr.forEach(callback[,thisArg]) 對數組中的每一個元素，執行一次提供的函數
- callback(ele) 函數
- ele :循環過程中的每一位元素
- index: 目前循環的元素對應的下标值
- arr ：調用forEach的目前數組
- thisArg： 控制目前callback中的this指向
該方法傳回值是undefined
*/
var arr2 = ['I','love','you','!'];
var a = arr2.forEach(function(ele,index,arr){
console.log(ele); //分别列印：'I','love','you','!'
},document);
console.log(a); //列印：undefined
</script>
</body>
</html>
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)