# JS陣列方法筆記
## 一坨資料跟條件filter出一個array
```javascript=
let MyData: [
{
id: 'areasValue',
value: [],
name: '區域',
options: [],
index: 0,
},
{
id: 'bedPrioritiesValue',
value: [],
name: '優先度',
options: [],
index: 1,
},
{
id: 'bedTypesValue',
value: [],
name: '病床類別',
options: [],
index: 2,
}
]
let conditions = [
'blocksValue',
'areasValue',
'locationsValue']
let result = []
conditions.map((it)=>{
let item= this.MyData.find((it2) => {
return it2.id == it;
});
result.push(item);
return it;
})
// result 即為解
```
## >>>>filter map reduce 才會回傳新陣列<<<<
## 一行程式new出二維陣列
```javascript=
apple = new Array(10).fill(null).map(()=>new Array(10).fill(null));
```
## 一行程式new 一維陣列 並且產生隨機數
```javascript=
Array(3).fill().map(() => Math.round(Math.random() * 10))
```
## 根據數量產生陣列預設值
```javascript=
[...Array(10)].map((it,index)=>index)
```
## JavaScript 陣列處理方法
```javascript=
var people = [
{
name: 'Casper',
like: '鍋燒意麵',
age: 18
},
{
name: 'Wang',
like: '炒麵',
age: 24
},
{
name: 'Bobo',
like: '蘿蔔泥',
age: 1
},
{
name: '滷蛋',
like: '蘿蔔泥',
age: 3
}
];
```
### filter
Array.prototype.filter()
filter() 會回傳一個陣列，其條件是 return 後方為 true 的物件
```javascript=
var filterAgeThan5 = people.filter(function(item, index, array){
return item.age > 5; // 取得大於五歲的
});
```
#### 也可以寫成
```javascript=
var filterAgeThan5 = people.filter((it,index,array)=> item.age>5)
```
##### filter模糊搜尋
```javascript=
searchingComputed() {
if (!this.searching) {
return this.tableData;
} else {
return this.tableData.filter(it => {
return it.name.match(this.searching);
});
}
},
```
##### filter模糊搜尋 object
```javascript=
searchingComputed() {
if (!this.searching) {
return this.tableData;
} else {
return
this.tableData.filter((it, index) => {
for (let key in it) {
if (typeof it[key]==="string"){
let isMatch = it[key]?.match(this.searching);
if (isMatch) {
return isMatch;
}
}
}
return null;
});
}
},
```
##### filter多選
https://codepen.io/Majitoo/pen/XWePxOZ?editors=1010
```javascript=
myDataFilter() {
let filterList = [];
this.checkboxSelect.forEach((it) => {
let findOption = this.filterOptions.find(
(option) => option.label === it
);
filterList.push(findOption.callBack);
});
console.log("filterList:", filterList);
return this.myData.filter((item) => {
return filterList.every((f) => f(item));
});
},
filterOptionData() {
return this.filterOptions.map((it) => it.label);
}
```
###filter出陣列裡重複的值
```javascript!
let a = [a,a,a,b,b,c,d]
let allauditor = [];
a.forEach((it, index) => {
allauditor.push(it.auditor);
});
let ResultAuditor = allauditor.filter((item, index, arr) => {
return arr.indexOf(item) === index;
});
console.log(ResultAuditor)
// [a,b,c,d ]
```
### find
Array.prototype.find()
find() 與 filter() 很像，但 find() 只會回傳一次值，且是第一次為 true 的值。
```javascript=
var findAgeThan5 = people.find(function(item, index, array){
return item.age > 5; // 取得大於五歲的
});
console.log(findAgeThan5); // 雖然答案有兩個，但只會回傳 Casper 這一個物件
```
### indexOf
可以過濾出陣列中不同的參數，若陣列中沒有該值則回傳-1
```javascript=
let origin = ['A', 'A', 'B', 'B', 'C', 'C']
let result =
origin.filter((item, index, arr) => {
return arr.indexOf(item) === index;
})
// output: ["A", "B", "C"]
```
### forEach
forEach 是這幾個陣列函式最單純的一個，不會額外回傳值，只單純執行每個陣列內的物件或值。
#### 只有這個不能return,要外部宣告一個新的容器 []、{}等等
##### 前面不用新的變數裝起來，不然 ***會*** 改變循環對象
```javascript=
people.forEach(function(item, index, array){
item.age = item.age + 1; // forEach 就如同 for，不過寫法更容易
});
console.log(people); // 全部 age + 1
```
### map
會return一個同樣長度的*新的* 陣列
```javascript=
var mapAgeThan5 = people.map(function(item, index, array){
return item.age > 5; // 比較大於五歲的
});
console.log(mapAgeThan5); // [true, true, false, false]
```
```javascript=
var mapEat = people.map(function(item, index, array){
if (item.like !== '蘿蔔泥') {
return `${item.like} 好吃`;
} else {
return `${item.like} 不好吃`;
}
});
console.log(mapEat);
// ["鍋燒意麵 好吃", "炒麵 好吃", "蘿蔔泥 不好吃", "蘿蔔泥 不好吃"]
```
### every
every() 可以檢查所有的陣列是否符合條件，這僅會回傳一個值 true or false
```javascript=
var ans = array.every(function(item, index, array){
console.log(item, index, array); // 物件, 索引, 全部陣列
return item.age > 10 // 當全部 age 大於 10 才能回傳 true
});
```
### some
some() 與 every() 非常接近，都是回傳 true or false，差異僅在 every() 需完全符合，some() 僅需要部分符合。
```javascript=
var ans2 = people.some(function(item, index, array){
return item.age < 20
});
console.log(ans2); // true: 只要有部分符合，則為 true
```
### reduce ***
reduce() 和其他幾個差異就很大了，他可以與前一個回傳的值再次作運算，參數包含以下：
accumulator: 前一個參數，如果是第一個陣列的話，值是以另外傳入或初始化的值
currentValue: 當前變數
currentIndex: 當前索引
array: 全部陣列
```javascript=
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
```
#### 物件應用reduce()
```
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = 1;
}
return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
```
#### reduce參考MDN
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
###用for找到obj內所有key
```javascript=
let ResData = res.data.map((it) => {
for (let key in it) {
//it為 '2022/07/01': null
if (it[key] == null) {
//將null轉為0輸出
it[key] = 0;
}
}
return it;
});
```
Sign in with Wallet
Connect another wallet