js 数据去重

###1.最容易想到的方案 支持IE8+

function unique(arr) {
  var ret = []

  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    if (ret.indexOf(item) === -1) {
      ret.push(item)
    }
  }

  return ret
}

###2.IE6-IE8 for两次 性能一般

var indexOf = [].indexOf ?
    function(arr, item) {
      return arr.indexOf(item)
    } :
    function indexOf(arr, item) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === item) {
          return i
        }
      }
      return -1
    }

function unique(arr) {
  var ret = []

  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    if (indexOf(ret, item) === -1) {
      ret.push(item)
    }
  }

  return ret
}

##ES6写法
用之前先了解下Array.from()
###Array.from()将类数组转换成数组

let arrayLike = {
    0: 'wen', 
    1: '18',
    2: '男',
    3: ['haha','hehe','heihei'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['wen','18','男',['haha','hehe','heihei']]

如果上面数据没有length属性呢?

let arrayLike = {
    0: 'wen', 
    1: '18',
    2: '男',
    3: ['haha','hehe','heihei'],
}
let arr = Array.from(arrayLike)
console.log(arr) // []空数组

我们得到了一个结论 类数组想要通过 Array.form()转换
该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。\color{red}{该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。}lengthlength

###将字符串转换为数组

let  str = 'hello world!';
console.log(Array.from(str)) ///["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

###Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。如下:

let arr = [12,34,56,78,9,520]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) 
//[13, 35, 57, 79, 10, 521]

##1.Set + Array.from() 只能去重一阶数组

Array.from()方法可以将类数组对象(array−likeobj)和可迭代对象(iterableobjects−−eg:Map或者Set)转为常规数组\color{red}{Array.from()方法可以将类数组对象(array-like obj)和可迭代对象(iterable objects -- eg:Map或者 Set)转为常规数组}Array.from()(arraylikeobj)(iterableobjectseg:MapSet)

 let arr = Array.from(new Set([1,2,3,5,7,1,2,1]))
 console.log(arr); //[1,2,3,5,7]
 console.log(arr.length);//5
 for (let i = 0; i < arr.length; i++) {
 	console.log(arr[i]);
 	//1
 	//2
 	//3
 	//5
 	//7
 };

这个例子说明了转换之后的数据可以遍历 有长度。

 let arr = Array.from(new Set([1,2,3,5,7,1,2,1,[1,1,1]]))
 console.log(arr);
 /[,2,3,5,7,[1,1,1]]

二阶数组去重不能用Set+Array.form()

2 …[拓展运算符] + Set

 let arr = [...new Set([1,2,3,5,7,1,2,1])] 
console.log(arr);// [1,2,3,5,7]
### JavaScript API Response Data Deduplication Methods For handling duplicate entries within an array of objects received from a JavaScript API call, several approaches can be utilized to ensure that only unique items are processed or displayed. #### Using Set with Map for Simple Objects When dealing with simple values like strings or numbers, converting the data into a `Set` will automatically remove duplicates since sets cannot contain duplicate elements. However, this method does not work directly on complex structures such as arrays of objects because two different object instances are never considered equal even if they have identical properties and values[^1]. To address more complicated scenarios involving objects: ```javascript // Example function using JSON.stringify() combined with new Set() function getUniqueObjectsByKey(arrayOfObjects, key) { const seenKeys = new Set(); return arrayOfObjects.filter(item => { let k = item[key]; return !seenKeys.has(k) && seenKeys.add(k); }); } ``` This code snippet demonstrates how one might filter out duplicate objects based on specific keys by utilizing both `filter()` and `Set`. #### Leveraging lodash Library Lodash is another powerful tool which provides utility functions including _.uniqBy(), allowing developers to specify criteria upon which uniqueness should be determined easily without manually implementing logic each time[^2]: ```javascript const _ = require('lodash'); let users = [ { 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }, { 'user': 'barney', 'age': 36 } ]; _.uniqWith(users, _.isEqual); // [{ user: 'barney', age: 36 }, { user: 'fred', age: 40 }] ``` In cases where deep comparison between nested objects is required, Lodash's `_.uniqWith()` along with `_.isEqual()` proves particularly useful. #### Custom Comparison Function Approach A custom comparator may also serve well when needing fine-grained control over what constitutes equality among records returned via APIs. This approach involves defining rules explicitly about under what conditions two entities shall be treated alike during de-duplication process[^3]: ```javascript function deduplicateArray(arr, compareFn) { var result = []; outer: for (var i = 0; i < arr.length; ++i) { for (var j = 0; j < result.length; ++j) { if (compareFn(result[j], arr[i])) continue outer; } result.push(arr[i]); } return result; } // Usage example comparing full names instead of just IDs. deduplicateArray(peopleData, (a,b)=>a.firstName+a.lastName===b.firstName+b.lastName) ``` The above examples illustrate various techniques available in JavaScript for removing redundancies found within datasets obtained through web service calls. Depending on project requirements and personal preference, any combination thereof could prove effective at achieving desired outcomes efficiently while maintaining readability and maintainability standards expected today’s software development practices.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值