---
# System prepended metadata

title: JS陣列方法筆記

---

# 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 }
```
![](https://i.imgur.com/EUYqQYJ.png)

#### 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;
});
```