JavaScript常用数据处理方法：数组、对象及Map/Set用法对比

在前端开发中，JavaScript提供了丰富的数据处理工具，以下是几种高频使用的方法。

一、数组处理方法

1.map()

该方法用于遍历数组，对每个元素执行指定操作，并返回一个包含新元素的新数组。
例如：

   const numbers = [1, 2, 3];
   const doubledNumbers = numbers.map(num => num * 2);
   console.log(doubledNumbers); // [2, 4, 6]

2. filter()

用于筛选数组元素，仅返回满足特定条件的元素，生成一个新的过滤后数组。

例如：

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

3. reduce()

该方法对数组元素进行累积计算，最终返回一个单一的值。

例如：

   const numbers = [1, 2, 3, 4, 5];
   const sum = numbers.reduce((acc, curr) => acc + curr, 0);
   console.log(sum); // 15

4. forEach()

用于遍历数组，对每个元素执行给定的回调函数，不返回新数组。

例如：

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

5. concat()

用于合并两个或多个数组，返回一个包含所有元素的新数组，不修改原数组。

例如：

   const arr1 = [1, 2];
   const arr2 = [3, 4];
   const combinedArray = arr1.concat(arr2);
   console.log(combinedArray); // [1, 2, 3, 4]

二、对象处理方法

1.Object.keys()、Object.values()、Object.entries()

Object.keys()返回包含给定对象所有可枚举属性键的数组。
Object.values()返回包含给定对象所有可枚举属性值的数组。
Object.entries()返回包含给定对象自身可枚举属性键值对数组的数组。

例如：

   const person = { name: 'John', age: 30 };
   console.log(Object.keys(person)); // ['name', 'age']
   console.log(Object.values(person)); // ['John', 30]
   console.log(Object.entries(person)); // [['name', 'John'], ['age', 30]]

2. Object.assign()

该方法将源对象中所有可枚举属性的值复制到目标对象，并返回修改后的目标对象。

例如：

   const target = { a: 1 };
   const source = { b: 2 };
   const mergedObject = Object.assign(target, source);
   console.log(mergedObject); // { a: 1, b: 2 }

3. JSON.stringify() 和 JSON.parse()

JSON.stringify()用于将JavaScript对象序列化为JSON字符串。

JSON.parse()用于将JSON字符串反序列化为JavaScript对象。

例如：

   const person = { name: 'John', age: 30 };
   const jsonString = JSON.stringify(person);
   console.log(jsonString); // '{"name":"John","age":30}'
   const parsedObject = JSON.parse(jsonString);
   console.log(parsedObject); // { name: 'John', age: 30 }

三、字符串处理方法

1.split()

将字符串按照指定分隔符分割为数组。
例如：

   const str = 'Hello, world!';
   const words = str.split(', ');
   console.log(words); // ['Hello', 'world!']

2. join()

将数组元素使用指定分隔符连接成一个字符串。

例如：

   const arr = ['Hello', 'world!'];
   const joinedString = arr.join(' ');
   console.log(joinedString); // 'Hello world!'

3. slice()、substring()、substr()

这些方法用于提取字符串的指定部分。

例如：

   const str = 'Hello, world!';
   console.log(str.slice(0, 5)); // 'Hello'
   console.log(str.substring(0, 5)); // 'Hello'
   console.log(str.substr(0, 5)); // 'Hello'

4. trim()

用于移除字符串首尾的空白字符。

例如：

   const str = '   Hello, world!   ';
   console.log(str.trim()); // 'Hello, world!'

四、数据转换方法

1.Number()、String()、Boolean()

用于将值显式转换为数字、字符串或布尔类型。
例如：

   const num = Number('123');
   console.log(num); // 123

   const str = String(123);
   console.log(str); // '123'

   const bool = Boolean(0);
   console.log(bool); // false

2. parseInt() 和 parseFloat()

用于将字符串解析为整数或浮点数。

例如：

   const intValue = parseInt('123');
   console.log(intValue); // 123

   const floatValue = parseFloat('123.45');
   console.log(floatValue); // 123.45

五、Map、Set、Object Array 的用法和区别

在JavaScript中，Map、Set、Object和Array是常用的数据结构，各自具有特定的用途和差异：

Array（数组）

用法：

用于存储有序数据集合，可包含不同类型元素。
通过从0开始的索引访问元素。
支持多种数组方法，如 push、pop、slice、map、filter 等。

示例：

const arr = [1, 'two', true];
console.log(arr[0]); // 1
arr.push(4);
console.log(arr); // [1, 'two', true, 4]

Object（对象）

用法：

用于存储键值对，键通常为字符串（或可转换为字符串的类型），值可为任意类型。
通过点表示法（.key）或方括号表示法（['key']）访问属性。
常用于表示具有特定属性和行为的实体。

示例：

const person = {
  name: 'John',
  age: 30,
};
console.log(person.name); // John
person.gender = 'male';
console.log(person); // { name: 'John', age: 30, gender: 'male' }

Map

用法：

用于存储键值对，键可以是任意类型（包括对象），值也可以是任意类型。
提供 set（设置键值对）、get（获取对应键的值）、has（检查是否存在某个键）等方法。

示例：

const map = new Map();
map.set('key1', 100);
map.set({ key: 'custom' }, 'custom value');
console.log(map.get('key1')); // 100
console.log(map.get({ key: 'custom' })); // undefined (因为对象作为键时，必须是同一个对象引用才能获取到值)

Set

用法：

用于存储唯一值集合，自动去除重复元素。
提供 add（添加元素）、has（检查是否存在某个元素）、delete（删除元素）等方法。

示例：

const set = new Set();
set.add(1);
set.add(2);
set.add(1); // 重复的值不会被添加
console.log(set.has(1)); // true
console.log(set.size); // 2

区别

键的类型：

Object的键只能是字符串或可转换为字符串的类型。
Map的键可以是任何类型。

const arr = [1, 'two', true];
console.log(arr[0]); // 1
arr.push(4);
console.log(arr); // [1, 'two', true, 4]

2. 元素的唯一性：

Array可以包含重复元素，通过索引访问。

Set中的元素唯一，不允许重复。

const person = {
  name: 'John',
  age: 30,
};
console.log(person.name); // John
person.gender = 'male';
console.log(person); // { name: 'John', age: 30, gender: 'male' }

3. 迭代方式：

Array和Object通常使用 `for` 循环或数组方法进行迭代。

Map和Set可以使用 `for...of` 循环、`forEach` 方法等进行迭代，且迭代顺序为插入顺序（Map）或不确定（Set）。

const map = new Map();
map.set('key1', 100);
map.set({ key: 'custom' }, 'custom value');
console.log(map.get('key1')); // 100
console.log(map.get({ key: 'custom' })); // undefined (因为对象作为键时，必须是同一个对象引用才能获取到值)

使用场景建议

使用 Array: 当需要按顺序存储数据，并频繁进行排序、过滤、映射操作时。
使用 Object: 当需要存储键值对，且键多为字符串，希望快速通过键访问值时。
使用 Map: 当需要使用非字符串键或需高效操作键值对时。
使用 Set: 当需要存储唯一值集合或进行去重操作时。

const set = new Set();
set.add(1);
set.add(2);
set.add(1); // 重复的值不会被添加
console.log(set.has(1)); // true
console.log(set.size); // 2

一、数组处理方法

本文介绍了JavaScript中处理数据的常用方法，更多相关内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

JavaScript数据处理核心方法：数组、对象与数据结构详解

一、数组处理方法

二、对象处理方法

三、字符串处理方法

四、数据转换方法

五、Map、Set、Object Array 的用法和区别

Array（数组）

Object（对象）

Map

Set

区别

使用场景建议

实用工具推荐