在前端项目中,常用的 JavaScript 处理数据的方法有很多,本文为大家整理了一些常用的方法,感兴趣的小伙伴可以跟随小编一起学习一下
目录
一、数组处理方法二、对象处理方法三、字符串处理方法四、数据转换方法五、Map、Set、Object Array 的用法和区别Array（数组）Object（对象）MapSet区别使用场景建议在前端项目中，常用的 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); // false2. 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]); // 1arr.push(4);console.log(arr); // [1, 'two', true, 4]
Object（对象）
用法：
用于存储键值对，其中键必须是字符串（或可转换为字符串的类型），值可以是任何类型。通过点表示法（.key）或方括号表示法（['key']）访问属性。常用于表示具有特定属性和行为的实体。示例：
const person = { name: 'John', age: 30,};console.log(person.name); // Johnperson.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')); // 100console.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)); // trueconsole.log(set.size); // 2
区别
键的类型：
Object 的键只能是字符串或可转换为字符串的类型。Map 的键可以是任何类型。const arr = [1, 'two', true];console.log(arr[0]); // 1arr.push(4);console.log(arr); // [1, 'two', true, 4]
2. 元素的唯一性：
Array 可以包含重复的元素，通过索引访问。
Set 中的元素是唯一的，不允许重复。
const person = { name: 'John', age: 30,};console.log(person.name); // Johnperson.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')); // 100console.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)); // trueconsole.log(set.size); // 2
