Javascript对象数组操作参考

发表于 | 更新于: | 分类于
字数统计: 1.2k | 阅读时长 ≈ 6

前言

起源

  • 对象数组与二维数据表相似
  • 工作中大部分接触对象数组，很多时候都是在对对象数组进行操作以及对其中的数据进行处理

所用数据

不说明的情况，所用的数据一般指以下。

数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
let student = [
  {
    id: 1,
    stuNo: 20190801,
    name: "王二二",
    age: 21,
    major: "计算机科学与技术",
    isParty: 1,
    sex: 0,
  },
  {
    id: 2,
    stuNo: 20190802,
    name: "李冬梅",
    age: 20,
    major: "计算机科学与技术",
    isParty: 0,
    sex: 1,
  },
  {
    id: 3,
    stuNo: 20190803,
    name: "张晓芳",
    age: 21,
    major: "汉语言文学",
    isParty: 1,
    sex: 1,
  },
  {
    id: 4,
    stuNo: 20190804,
    name: "张雨",
    age: 24,
    major: "汉语言文学",
    isParty: 1,
    sex: 0,
  },
  {
    id: 5,
    stuNo: 20190805,
    name: "张子豪",
    age: 22,
    major: "通信工程",
    isParty: 0,
    sex: 0,
  },
];

数据含义说明

属性名称 中文含义 备注
id id
stuNo 学号 8 位
name 名字
age 年龄
major 专业
isParty 是否是党员 否:0,是:1
sex 性别 男:0, 女:1

目录

根据 id 检索名字(id 唯一)

1
2
3
4
5
const getName = (id, arr) => {
  const filterArr = arr.filter((item) => item.id == id);
  return filterArr.length > 0 ? filterArr[0].name : "";
};
console.log(getName(5, student)); // 张子豪

普通截取

  • 截取 1
1
2
3
4
5
6
7
8
student.map(({ id, name }) => ({ id, name }));

/*-----res-----*/
[
  { id: 1, name: "王二二" },
  { id: 2, name: "李冬梅" },
  { id: 3, name: "张晓芳" },
];
  • 截取 2
1
2
3
student.map(({ id }) => id);
/*----- res-----*/
[1, 2, 3];

截取属性并去重

  • 去重 1: 返回对象数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
getUniqueArray(array, item){
    let uniqueArray = [];
    for (let i = 0; i < array.length; i++) {
      let flag = true;
      for (let j = 0; j < uniqueArray.length; j++) {
        if ((uniqueArray[j][item] === array[i][item])) {
          flag = false;
        }
      }
      if (flag) {
        uniqueArray.push(array[i]);
      }
    }
    return uniqueArray;
  }
  • 去重 2: 返回一维数组
1
2
3
4
[...new Set(student.map(({ sex }) => sex))];

/*----- res -----*/
[0, 1];

过滤

    1. 比较运算符及逻辑运算: = > < >= ,<=, !=,<> ,|| &&
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
student.filter((item) => item.age > 20);
/*-----res-----*/
[
  { id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 },
  { id: 3, stuNo: 20190620, name: "张晓芳", age: 21, major: "汉语言文学", isParty: 1, sex: 1 },
];

student.filter((item) => item.sex === 0);
/*----- res -----*/
[{ id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 }];

student.filter((item) => item.age > 20 && item.age < 22);
/*----- res -----*/
[
  { id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 },
  { id: 3, stuNo: 20190620, name: "张晓芳", age: 21, major: "汉语言文学", isParty: 1, sex: 1 },
];
  1. in 范围
    查询学号为[20190601,20190614]的数组
1
2
3
4
5
6
7
let range = [20190601, 20190614];
let res = student.filter((item) => range.includes(item.stuNo));
/*----- res -----*/
[
  { id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 },
  { id: 2, stuNo: 20190614, name: "李冬梅", age: 20, major: "计算机科学与技术", isParty: 0, sex: 1 },
];
  1. 模糊查询
    查询名字为’张’的学生
1
2
3
4
5
6
student.filter((item) => item.name.includes("张"));
/*----- res ------*/
[
  { id: 3, stuNo: 20190620, name: "张晓芳", age: 21, major: "汉语言文学", isParty: 1, sex: 1 },
  { id: 4, stuNo: 20190620, name: "张雨", age: 24, major: "汉语言文学", isParty: 1, sex: 0 },
];

排序

  1. 升序
1
2
3
4
5
6
7
8
9
/*------ 按年龄从小到大排序 ------ */
student.sort((a, b) => a.age > b.age);
/*------ res ------*/
[
  { id: 2, stuNo: 20190614, name: "李冬梅", age: 20, major: "计算机科学与技术", isParty: 0, sex: 1 },
  { id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 },
  { id: 3, stuNo: 20190620, name: "张晓芳", age: 21, major: "汉语言文学", isParty: 1, sex: 1 },
  { id: 4, stuNo: 20190620, name: "张雨", age: 24, major: "汉语言文学", isParty: 1, sex: 0 },
];
  1. 降序
1
2
3
4
5
6
7
8
9
/*----- 按年龄从大到小排序 ------ */
student.sort((a, b) => a.age < b.age);
/*------ res ------*/
[
  { id: 4, stuNo: 20190620, name: "张雨", age: 24, major: "汉语言文学", isParty: 1, sex: 0 },
  { id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 },
  { id: 3, stuNo: 20190620, name: "张晓芳", age: 21, major: "汉语言文学", isParty: 1, sex: 1 },
  { id: 2, stuNo: 20190614, name: "李冬梅", age: 20, major: "计算机科学与技术", isParty: 0, sex: 1 },
];

插入数据

1
2
3
4
5
6
7
8
9
[...student, ...newStudent];
/*----- res ----- */
[
  { id: 1, stuNo: 20190601, name: "王二二", age: 21, major: "计算机科学与技术", isParty: 1, sex: 0 },
  { id: 2, stuNo: 20190614, name: "李冬梅", age: 20, major: "计算机科学与技术", isParty: 0, sex: 1 },
  { id: 3, stuNo: 20190620, name: "张晓芳", age: 21, major: "汉语言文学", isParty: 1, sex: 1 },
  { id: 4, stuNo: 20190620, name: "张雨", age: 24, major: "汉语言文学", isParty: 1, sex: 0 },
  { id: 5, stuNo: 2019067, name: "马宇", age: 23, major: "旅游管理", isParty: 1, sex: 1 },
];

操作对象数组

转为对象数组

数据如下

1
2
3
4
5
let price = {
  空调: 12200,
  冰箱: 14440,
  洗衣机: 1222
};

具体操作

1
2
3
4
5
6
let newPrice = [];
for (let [k, v] of Object.entries(price)) {
  newPrice = [...newPrice, { name: k, value: v }];
}
/*------ 结果 -----*/
[{"name":"空调","value":12200},{"name":"冰箱","value":14440},{"name":"洗衣机","value":1222}]
0%