###### tags: `JavaScript`

# 陣列操作

## forEach

let data = [1,2,3];
data.forEach(function(item, index, array){
    console.log(item, index, array);
    // 結果如下
    // 1, 0, [1, 2, 3]
    // 2, 1, [1, 2, 3]
    // 3, 2, [1, 2, 3]
});

## map

1. 能將原始帳列運算後，重新組合回傳一個新陣列
2. 不會引響到原本的陣列
3. map 沒有 return 會回傳 undefined

let data = [1,2,3];
let newData = data.map(function(item){
    return item * item
});
console.log(data); // [1, 2, 3]
console.log(newData); // [1, 4, 9]

let data = [1,5,10,8,4,2];
let newData = data.map(function(item){
    return item > 5
});

// 組合物件
let newData1 = data.map(function(item){
    let obj = {}
    obj.checkNum = item > 5
    return obj
});
console.log(data); // [1, 5, 10, 8, 4, 2]
console.log(newData); // [false, false, true, true, false, false]
console.log(newData1); // [{…}, {…}, {…}, {…}, {…}, {…}]


### forEach 與 map 差別

let data = [1,2,3];
let newData = data.forEach(function(item){
    return item * item
});
console.log(data); // [1, 2, 3]

// 因為使用 forEach 他並不會重新組合回傳一個新陣列，所以是 undefined
// 也無法使用 return 回傳值
console.log(newData); // undefined

## filter 篩選全部的資料

1. 塞選出符合條件的內容，重新組合回傳一個新陣列
2. 不會引響到原本的陣列

let data = [1,4,10,15];
let newData = data.filter(function(item){
    return item > 5
});
console.log(data); // [1,4,10,15]
console.log(newData); // [10, 15]

範例 (通常用於比價、下拉選市區、比較)

// 分數
let scoreData = [
    {
        name: '阿呆',
        score: 100,
    },
    {
        name: '阿美',
        score: 61,
    },
    {
        name: '阿新',
        score: 40,
    },
];

// 篩塞選及格的人
let filterScore = scoreData.filter(function(item){
    return item.score >= 60
});
console.log(filterScore);
// (2) [{…}, {…}]
// 0: {name: '阿呆', score: 100}
// 1: {name: '阿美', score: 61}

## find 尋找第一筆符合條件的資料

1. 找出符合條件的第一筆資料，重新組合回傳一個新陣列
2. 不會引響到原本的陣列

let data = [1,4,10,15];
let newData = data.find(function(item){
    return item > 5
});
console.log(data); // [1,4,10,15]
console.log(newData); // [10]

## findIndex 尋找資料索引

1. 找出符合條件的第一筆資料，回傳索引值
2. 不會引響到原本的陣列

let data = [10,20,30];
let newData = data.findIndex(function(item){
    return item >=15
});
console.log(data); // [10,20,30]
console.log(newData); // 1

## reduce 陣列元素累加

1. 能將陣列內數值做累加
2. 不會引響到原本的陣列

// 純數字
const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((a, b) => {
  return a + b;
}, 0);

console.log(total); // 15
console.log(typeof total); // number

// 裡面有字串
const strInArr = [1, 2, "3", 4, 5];
const strInArrTotal = strInArr.reduce((a, b) => {
  return a + b;
}, 0);

console.log(strInArrTotal); // '3345'
console.log(typeof strInArrTotal); // string

// 裡面有陣列
const arrInArr = [1, 2, [69, 32], 4, 5];
const arrInArrTotal = arrInArr.reduce((a, b) => {
  return a + b;
}, 0);

console.log(arrInArrTotal); // '369,3245'
console.log(typeof arrInArrTotal); // string

// 裡面有物件
const objInArr = [1, 2, [{id: 10}, {id: 99}], 4, 5];
const objInArrTotal = objInArr.reduce((a, b) => {
  return a + b;
}, 0);
console.log(objInArrTotal); // '3[object Object],[object Object]45'
console.log(typeof objInArrTotal); // string

## at 尋找陣列位置資料

1. 找陣列的位置並且回傳值
2. 不會引響到原本的陣列

// 可以填 -1 找到陣列最後一筆資料
const array1 = [5, 12, 8, 130, 44, 66, 99, 10, 50];
console.log(array1.at(-1)); // 50

// 也可以往後找第 N 筆
console.log(array1.at(-3)); // 99

## concat 合併陣列

1. 合併 2 筆(以上)的陣列
2. 不會引響到原本的陣列

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3); // ["a", "b", "c", "d", "e", "f"]

// 合併多筆
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// 合並陣列包陣列
const arr1 = ['a', 'b', 'c'];
const arr2 = [[2, 3], 4]
const newArr = arr1.concat(1, arr2);

console.log(newArr); // ["a", "b", "c", 1, [2, 3], 4]

## join 合併陣列轉成字串

const arr = ['nick', 'chang']
console.log(arr.join(' ')) // nick chang

const obj = [{ id: 1 }, { id: 2 }]
console.log(obj.join(' ')) // [object Object] [object Object]

const integrated = [1, 2, 'asd', '!@#df', [123, 999, { id: 100 }]]
console.log(integrated.join('-')) // 1-2-asd-!@#df-123,999,[object Object]