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

發表迴響