前端数据处理系列文章目录🐲
提示:日常笔记,主要记录一些常用的数据处理方式,与人方便与己方便
例如:前端常用的数据处理方法
提示:如果你也有更好的处理方式,也可以在文章后面留言
文章目录
- 前端数据处理系列文章目录🐲
- 前言
- 一、数据处理
-
- 1.只筛选出数组中的某一个属性,形成新的数据
- 2.如何保留数组中两个及以上的属性
- 3.将数组转化为字符串
- 4.判断该数据中某个值是否存在
- 5.使用`Object.keys()`返回一个新的数组,这个对象包含该对象中所有的`key`
- 6.使用`Object.values()` 返回一个数组,这个数组包含obj对象中的所有`value`
- 7.将对象 obj 的键和值分别归类在一起
- 8.使用 `filter()` 方法从数组中过滤出符合条件的元素
- 9.使用` indexOf() `方法从数组中查询符合条件的元素
- 9.使用`concat()`拼接多个数组
- 10.将数据中的字段为`null`的全部改为`""`
- 11、通过id去除重复的数据
- 总结
前言
提示:本文章主要记录前端常用的数据处理方式:
例如:随着前端的不断发展,数据处理对于前端也越来越重要,本文就介绍了前端JS的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、数据处理
1.只筛选出数组中的某一个属性,形成新的数据
代码如下(示例):
在JavaScript中,你可以使用数组的map()
方法来处理一个数组中的元素,并将它们放入一个新的集合中。下面是一个示例代码:
// 原始数组
const originalArray = [
{
id: 1, name: 'John' },
{
id: 2, name: 'Alice' },
{
id: 3, name: 'Bob' }
];
// 用map()方法提取id并放入新集合
const idCollection = originalArray.map(item => item.id);
// 输出新集合
console.log(idCollection); // [1, 2, 3]
上述代码中,我们定义了一个名为
originalArray
的原始数组,其中包含了一些对象,每个对象都有一个id属性。然后,我们使用map()
方法遍历原始数组的每个元素,并返回一个新的集合,其中只包含每个元素的id
属性。最后,我们将新集合打印到控制台上。
运行上述代码,你会得到以下输出:
[1, 2, 3]
2.如何保留数组中两个及以上的属性
// 原始数组
const originalArray = [
{
id: 1, name: 'John', age: 18 },
{
id: 2, name: 'Alice', age: 19 },
{
id: 3, name: 'Bob', age: 20 }
];
// 使用map()方法提取id和name,并放入新集合
const idNameCollection = originalArray.map(item => {
return {
id: item.id,
name: item.name
};
});
// 输出新集合
console.log(idNameCollection);
运行上述代码,你会得到以下输出,这就是将原始数组中的
id
和name
属性提取出来并放入新集合的结果。你可以根据需要调整代码,适应不同的数据结构和要求。
[
{
id: 1, name: