JavaScript 處理陣列，JSON(物件)方法整理

多種內建方法來進行各種操作。以下列舉了一些基本和常用的陣列處理方法：

1. 增加/減少元素

• push(): 添加一個或多個元素到陣列的末尾。
• pop(): 移除陣列最後一個元素。
• shift(): 移除陣列第一個元素。
• unshift(): 在陣列開頭添加新元素。

2.遍歷元素

• forEach(): 遍歷陣列並對每個元素執行回調函數。
• map(): 創建一個新陣列，其元素是原陣列元素調用函數後的結果。
• filter(): 創建一個新陣列，其包含通過提供函數實現的所有元素。
• find(): 返回陣列中滿足提供的測試函數的第一個元素的值。
• every(): 檢測陣列所有元素是否都符合條件。
• some(): 檢測陣列中是否有元素符合條件。

3. 縮減陣列

• reduce(): 將陣列中的元素減少到單一值。

4. 連接和分割

• concat(): 用來合併兩個或多個陣列。
• slice(): 返回一個新的陣列對象，為原陣列的一個淺拷貝。
• splice(): 變更陣列內容，添加或刪除元素。

5. 尋找和定位

• indexOf(): 返回在陣列中可以找到給定元素的第一個索引。
• lastIndexOf(): 返回在陣列中可以找到給定元素的最後一個索引。
• findIndex(): 返回陣列中滿足提供的測試函數的第一個元素的索引。

6. 排序

• sort(): 對陣列元素進行排序。
• reverse(): 反轉陣列中元素的順序。

7. 複製陣列

• from(): 從一個類陣列或可迭代對象中創建一個新的陣列。

8. 檢查

• isArray(): 判斷某個變數是否是陣列。

9. 合併

• flat(): 按指定的深度递归遍历陣列，並將所有子陣列的元素連接並返回一個新陣列。
• flatMap(): 首先使用映射函數映射每個元素，然後將結果壓平為新陣列。

陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()] 詳細說明

1. filter()

• 用途：過濾陣列中的元素。
• 語法：arr.filter(callback(element[, index[, array]])[, thisArg])
• 說明：會建立一個新的陣列，包含所有通過回調函數測試的元素。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers) //[2, 4]

補充- 取出陣列重複/不重複值的方法

var origin = [1, 2, 'a', 3, 1, 'b', 'a'];
var result = origin.filter(function(element, index, arr){
    return arr.indexOf(element) === index;
});
var repeat = origin.filter(function(element, index, arr){
    return arr.indexOf(element) !== index;
});
console.log(result); // [1, 2, "a", 3, "b"]
console.log(repeat); // [1, "a"]

2. find()

• 用途：尋找陣列中滿足條件的元素。
• 語法：arr.find(callback(element[, index[, array]])[, thisArg])
• 說明：返回第一個滿足條件的元素值，否則返回 undefined。

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find(num => num % 2 === 0);

console.log(firstEvenNumber) //2

3. forEach()

• 用途：迭代陣列的每一個元素。
• 語法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
• 說明：對陣列中的每一個元素執行提供的函數。

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num)); // 1 2 3

4. map()

• 用途：創建一個新的陣列，其結果是該陣列中的每個元素都呼叫一個提供的函數。
• 語法：arr.map(callback(currentValue[, index[, array]])[, thisArg])
• 說明：回傳一個新陣列。

const numbers = [1, 2, 3];
const squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers) //[1, 4, 9]

5. every()

• 用途：檢測陣列所有元素是否都符合條件。
• 語法：arr.every(callback(element[, index[, array]])[, thisArg])
• 說明：若所有元素都通過測試，則返回 true；否則返回 false。

const numbers = [2, 4, 6];
const areAllEven = numbers.every(num => num % 2 === 0);

console.log(areAllEven) //**true**

6. some()

• 用途：檢測陣列中是否有元素符合條件。
• 語法：arr.some(callback(element[, index[, array]])[, thisArg])
• 說明：若至少有一個元素通過測試，則返回 true；否則返回 false。

const numbers = [1, 3, 5, 6];
const hasEvenNumber = numbers.some(num => num % 2 === 0);

console.log(hasEvenNumber) //true

7. reduce()

• 用途：對陣列的每個元素執行一個 reducer 函數並將其減少為單一值。
• 語法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
• 說明：將陣列減少為單一值。

const numbers = [1, 2, 3];
const sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum) //6

JSON處理方法

1. JSON.parse()

• 用途：將一個 JSON 字符串轉換為 JavaScript 物件。
• 語法：JSON.parse(text[, reviver])
• 參數：
  • text：一個有效的 JSON 字符串。
  • reviver（可選）：一個轉換結果的函數。
• 說明：JSON.parse() 會將一個 JSON 字符串轉換為對應的 JavaScript 值或物件。

const jsonString = '{"key": "value"}';
const jsonObj = JSON.parse(jsonString);
console.log(jsonObj.key); // Output: value

2. JSON.stringify()

• 用途：將一個 JavaScript 值（物件或陣列）轉換為 JSON 字符串。
• 語法：JSON.stringify(value[, replacer[, space]])
• 參數：
  • value：要轉換為 JSON 字符串的 JavaScript 值。
  • replacer（可選）：改變行為的函數或陣列。
  • space（可選）：用於插入白空格的字串或數字，以便於閱讀。
• 說明：JSON.stringify() 方法會將 JavaScript 值轉換為 JSON 字符串。

const jsonObj = {key: 'value'};
const arr= [1, 2, 3];
const jsonString = JSON.stringify(jsonObj, null, 2);
const arrtoJson = JSON.stringify(arr, null, 2);

console.log(jsonString);
// Output:
// {
//   "key": "value"
// }

JavaScript 處理物件(Object)的方法

1. Object.keys()

• 用途：獲取一個物件的所有鍵名（key）。
• 語法：Object.keys(obj)

const obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // ['a', 'b', 'c']

補充 – 取出陣列重複/不重複值的方法

var origin = [1, 2, 'a', 3, 1, 'b', 'a'];
var result = {};
origin.forEach(function(item) {
  result[item] = result[item] ? result[item] + 1 : 1;
});
console.log(Object.keys(result)); // ["1", "2", "3", "a", "b"]
console.log(result); // Object {1: 2, 2: 1, 3: 1, a: 2, b: 1}

2. Object.values()

• 用途：獲取一個物件的所有值（value）。
• 語法：Object.values(obj)

const obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // [1, 2, 3]

3. Object.entries()

• 用途：獲取一個物件的所有鍵值對 [key, value]。
• 語法：Object.entries(obj)

const obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // [['a', 1], ['b', 2], ['c', 3]]

4. Object.assign()

• 用途：複製物件或將多個物件合併成一個物件。
• 語法：Object.assign(target, ...sources)

const obj1 = {a: 1};
const obj2 = {b: 2};
const combinedObj = Object.assign({}, obj1, obj2);
console.log(combinedObj); // {a: 1, b: 2}

5. Object.freeze()

• 用途：凍結一個物件，防止物件被修改。
• 語法：Object.freeze(obj)

const obj = {a: 1};
Object.freeze(obj);
obj.a = 2; // TypeError in strict mode, silently fails in non-strict mode

6. Object.seal()

• 用途：封閉一個物件，防止添加新屬性並將所有現有屬性標記為不可配置。現有屬性的值仍然可以修改。
• 語法：Object.seal(obj)

const obj = {a: 1};
Object.seal(obj);
obj.a = 2; // Works fine
obj.b = 3; // TypeError in strict mode, silently fails in non-strict mode

7. Object.defineProperty()

• 用途：直接在一個物件上定義一個新屬性，或修改一個物件的現有屬性，並返回此物件。
• 語法：Object.defineProperty(obj, prop, descriptor)

const obj = {};
Object.defineProperty(obj, 'a', {
  value: 1,
  writable: false,
  enumerable: true,
  configurable: false
});
console.log(obj.a); // 1

8. Object.create()

• 用途：使用指定的原型對象和屬性創建一個新對象。
• 語法：Object.create(proto, [propertiesObject])

const proto = {a: 1};
const obj = Object.create(proto);
console.log(obj.a); // 1

9. Object.getPrototypeOf()

• 用途：返回指定對象的原型。
• 語法：Object.getPrototypeOf(obj)

const proto = {a: 1};
const obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // true