随笔记录---

无双渐离

已于 2024-04-10 17:04:58 修改

阅读量1k

点赞数 32

文章标签： javascript 开发语言

于 2023-12-29 15:21:14 首次发布

本文链接：https://blog.csdn.net/m0_68930485/article/details/135291864

版权

3种JavaScript 对象转数组的方法

方式一：Object.values

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

let arr = Object.values(obj); //对象转化为数组

ps：如果只需要返回键作为数组，可以使用Object.keys()的方式,所以结合Map，也可以实现：

let arr=Object.keys(obj).map(function(i){return obj[i]}); //对象转化为数组

方式二：循环

可以直接利用循环，如for in或者forEach()等：

var arr = []; //定义数组for (var i in obj) {    arr.push(obj[i]); }

方式三：Array.from

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

var arr = Array.from(Object.values(obj),x=>x);

数组去重

方法一：Set（ES6及以上）

使用 Set 数据结构是一种简单、直观的去重方法。Set 只会保留唯一的值

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [...new Set(arr)];
console.log(uniqueArr);  // [1, 2, 3, 4, 5]

方法二：使用 filter 方法

使用数组的 filter 方法，通过判断元素在数组中的第一个索引是否与当前索引相同来进行去重

array.filter(function(value, index, arr), thisValue)
参数说明：
function：函数，规定了过滤条件。必需。该函数接受三个参数：当前元素的值、当前元素的索引和包含该元素的数组。
thisValue：可选项。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略thisValue，则默认是全局对象（浏览器环境下是 window 对象）

用于过滤数组中的元素，并返回一个新数组。

filter（）使用场景总结
过滤数组
最常见的用法是根据指定的条件从数组中筛选出符合要求的元素，形成一个新的子数组。例如，从一个学生成绩数组中筛选出所有及格（大于等于60分）的成绩。

删除数组中的特定元素
可以利用 filter() 方法来删除数组中满足某个条件的元素。例如，从一个商品列表中删除库存为零的商品。

去重数组
如果数组中存在重复的元素，可以使用 filter() 方法去除重复项，生成一个不包含重复元素的新数组。

根据条件获取对象数组
当操作对象数组时，可以使用 filter() 方法根据对象属性的特定条件筛选出所需的对象。例如，在一个用户列表中，筛选出所有年龄大于等于18岁、性别为女性的用户。

条件筛选和转换元素
通过 filter() 方法结合其他方法，如 map()，可以实现对数组元素进行条件筛选和转换。例如，从一个用户评论列表中筛选出所有评分大于等于4星的评论，并提取出评论内容构成一个新数组。

动态过滤
可以根据用户的输入或其他条件动态地使用 filter() 方法对数组进行过滤，实现实时搜索或动态筛选的功能。

使用filter（）的注意事项
第一：回调函数
filter() 方法接受一个回调函数作为参数，用于对数组元素进行判断并返回布尔值。在编写回调函数时，要确保它返回 true 或 false，以指示是否选择该元素。否则，filter() 方法将无法正常工作。

第二：原数组不变
filter() 方法不会修改原始数组，而是返回一个新的筛选后的数组。因此，在使用该方法后，应该使用新的数组来存储结果，或者将结果直接赋给变量，而不是期望原数组被修改。

第三点；处理空数组
如果原始数组为空（即没有任何元素），那么经过过滤后的结果也将是一个空数组。因此，在使用 filter() 方法之前，最好先检查数组是否为空，以避免不必要的操作。

第四点：隐式类型转换
使用 filter() 方法时，要注意 JavaScript 的隐式类型转换规则。回调函数中的条件表达式可能导致意外的结果，例如字符串和数字之间的比较。确保在进行条件判断时，类型一致性与预期一致。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = arr.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArr);  // [1, 2, 3, 4, 5]

方法三：使用 reduce 方法

使用数组的 reduce 方法，通过判断数组中是否已经包含当前元素来进行去重。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = arr.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArr);  // [1, 2, 3, 4, 5]

方法四：使用 indexOf 和 for 循环

使用 indexOf 方法和 for 循环，遍历数组，将不在新数组中的元素添加到新数组中。

let arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr);  // [1, 2, 3, 4, 5]

方法五：使用GROUPBY进行分组

1.OBJECT.GROUPBY

const peopleByAge = Object.groupBy(people, (person) => person.age);

Object.groupBy 返回的是一个空原型对象，这意味着这个对象不会继承任何来自 Object.prototype 的属性。这个特性有一些好处，其中之一是您不会意外覆盖掉 Object.prototype 上的任何属性，从而避免可能导致问题的情况。然而，也需要注意的是，由于没有继承，这个对象不会包含您可能期望的一些常见方法，比如 hasOwnProperty 或 toString。因此，在使用时，您需要谨慎处理这些方法的缺失。

2.MAP.GROUPBY

const ceo = { name: "Jamie", age: 40, reportsTo: null };
const manager = { name: "Alice", age: 28, reportsTo: ceo };
 
const people = [
  ceo,
  manager,
  { name: "Bob", age: 30, reportsTo: manager },
  { name: "Eve", age: 28, reportsTo: ceo },
];
 
const peopleByManager = Map.groupBy(people, (person) => person.reportsTo);
Map.groupBy 几乎和 Object.groupBy 做的事情一样，只是它返回一个 Map 对象而不是普通对象。这就意味着你可以使用所有常规的 Map 方法来处理它，就像你处理其他 Map 一样。同时，由于它是一个 Map，你可以从回调函数中返回任何类型的值，而不仅仅是作为键的字符串。这为你提供了更多的灵活性和功能

peopleByManager.get(ceo);
// => [{ name: "Alice", age: 28, reportsTo: ceo }, { name: "Eve", age: 28, reportsTo: ceo }]
peopleByManager.get({ name: "Jamie", age: 40, reportsTo: null });
// => undefined