Làm cách nào để có được các giá trị khác biệt từ một mảng các đối tượng trong JavaScript?

Giả sử tôi có những điều sau đây:

var array = 
    [
        {"name":"Joe", "age":17}, 
        {"name":"Bob", "age":17}, 
        {"name":"Carl", "age": 35}
    ]

Cách tốt nhất để có thể có được một mảng của tất cả các độ tuổi khác nhau là gì để tôi có được một mảng kết quả:

[17, 35]

Có cách nào đó tôi có thể thay thế cấu trúc dữ liệu hoặc phương pháp tốt hơn để tôi không phải lặp lại qua từng mảng kiểm tra giá trị của "tuổi" và kiểm tra xem có tồn tại mảng khác không và thêm vào nếu không?

Nếu có cách nào đó tôi có thể rút ra những thời đại khác biệt mà không cần lặp lại ...

Cách không hiệu quả hiện tại tôi muốn cải thiện ... Nếu điều đó có nghĩa là thay vì "mảng" là một mảng các đối tượng, nhưng một "bản đồ" của các đối tượng với một khóa duy nhất (ví dụ "1,2,3") sẽ là cũng được Tôi chỉ tìm kiếm cách hiệu quả nhất.

Sau đây là cách tôi hiện đang làm, nhưng đối với tôi, việc lặp đi lặp lại dường như chỉ là hiệu quả cho dù nó hoạt động ...

var distinct = []
for (var i = 0; i < array.length; i++)
   if (array[i].age not in distinct)
      distinct.push(array[i].age)

Nếu đây là PHP tôi sẽ xây dựng một mảng với các khóa và lấy array_keysở cuối, nhưng JS không có sự xa xỉ như vậy. Thay vào đó, hãy thử điều này:

var flags = [], output = [], l = array.length, i;
for( i=0; i<l; i++) {
    if( flags[array[i].age]) continue;
    flags[array[i].age] = true;
    output.push(array[i].age);
}

Nếu bạn đang sử dụng ES6 / ES2015 trở lên, bạn có thể thực hiện theo cách này:

const unique = [...new Set(array.map(item => item.age))];

Dưới đây là một ví dụ về cách làm điều đó.

sử dụng ES6

let array = [
  { "name": "Joe", "age": 17 },
  { "name": "Bob", "age": 17 },
  { "name": "Carl", "age": 35 }
];
array.map(item => item.age)
  .filter((value, index, self) => self.indexOf(value) === index)

> [17, 35]

Bạn có thể sử dụng một cách tiếp cận từ điển như thế này. Về cơ bản, bạn chỉ định giá trị bạn muốn là khác biệt như một khóa trong "từ điển" (ở đây chúng tôi sử dụng một mảng làm đối tượng để tránh chế độ từ điển). Nếu khóa không tồn tại thì bạn thêm giá trị đó là khác biệt.

Đây là một bản demo làm việc:

var array = [{"name":"Joe", "age":17}, {"name":"Bob", "age":17}, {"name":"Carl", "age": 35}];
var unique = [];
var distinct = [];
for( let i = 0; i < array.length; i++ ){
  if( !unique[array[i].age]){
    distinct.push(array[i].age);
    unique[array[i].age] = 1;
  }
}
var d = document.getElementById("d");
d.innerHTML = "" + distinct;

<div id="d"></div>

Đây sẽ là O (n) trong đó n là số lượng đối tượng trong mảng và m là số lượng giá trị duy nhất. Không có cách nào nhanh hơn O (n) vì bạn phải kiểm tra từng giá trị ít nhất một lần.

Phiên bản trước của điều này đã sử dụng một đối tượng và trong. Đây là những bản chất nhỏ và đã được cập nhật nhỏ ở trên. Tuy nhiên, lý do cho sự tiến bộ về hiệu suất giữa hai phiên bản trong jsperf ban đầu là do kích thước mẫu dữ liệu quá nhỏ. Do đó, so sánh chính trong phiên bản trước đã xem xét sự khác biệt giữa bản đồ nội bộ và sử dụng bộ lọc so với tra cứu chế độ từ điển.

Tôi đã cập nhật mã ở trên, như đã lưu ý, tuy nhiên, tôi cũng đã cập nhật jsperf để xem qua 1000 đối tượng thay vì 3. 3 bỏ qua nhiều cạm bẫy hiệu suất liên quan ( jsperf lỗi thời ).

Hiệu suất

https://jsperf.com/filter-vs-dipedia-more-data Khi tôi chạy từ điển này nhanh hơn 96%.

Đây là cách bạn sẽ giải quyết vấn đề này bằng cách sử dụng Bộ mới thông qua ES6 cho Bản in vào ngày 25 tháng 8 năm 2017

Array.from(new Set(yourArray.map((item: any) => item.id)))

Sử dụng các tính năng ES6, bạn có thể làm một cái gì đó như:

const uniqueAges = [...new Set( array.map(obj => obj.age)) ];

Tôi chỉ cần lập bản đồ và xóa dups:

var ages = array.map(function(obj) { return obj.age; });
ages = ages.filter(function(v,i) { return ages.indexOf(v) == i; });

console.log(ages); //=> [17, 35]

Chỉnh sửa: Aight! Không phải là cách hiệu quả nhất về hiệu suất, nhưng IMO đơn giản nhất dễ đọc nhất. Nếu bạn thực sự quan tâm đến tối ưu hóa vi mô hoặc bạn có lượng dữ liệu khổng lồ thì một forvòng lặp thông thường sẽ "hiệu quả" hơn.

var unique = array
    .map(p => p.age)
    .filter((age, index, arr) => arr.indexOf(age) == index)
    .sort(); // sorting is optional

// or in ES6

var unique = [...new Set(array.map(p => p.age))];

// or with lodash

var unique = _.uniq(_.map(array, 'age'));

Ví dụ ES6

const data = [
  { name: "Joe", age: 17}, 
  { name: "Bob", age: 17}, 
  { name: "Carl", age: 35}
];

const arr = data.map(p => p.age); // [17, 17, 35]
const s = new Set(arr); // {17, 35} a set removes duplications, but it's still a set
const unique = [...s]; // [17, 35] Use the spread operator to transform a set into an Array
// or use Array.from to transform a set into an array
const unique2 = Array.from(s); // [17, 35]

Đối với những người muốn trả về đối tượng với tất cả các thuộc tính duy nhất theo khóa

const array =
  [
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
  ]

const key = 'age';

const arrayUniqueByKey = [...new Map(array.map(item =>
  [item[key], item])).values()];

console.log(arrayUniqueByKey);

   /*OUTPUT
       [
        { "name": "Bob", "age": 17 },
        { "name": "Carl", "age": 35 }
       ]
   */

 // Note: this will pick the last duplicated item in the list.

Đã có nhiều câu trả lời hợp lệ, nhưng tôi muốn thêm một câu trả lời chỉ sử dụng reduce()phương pháp vì nó sạch và đơn giản.

function uniqueBy(arr, prop){
  return arr.reduce((a, d) => {
    if (!a.includes(d[prop])) { a.push(d[prop]); }
    return a;
  }, []);
}

Sử dụng nó như thế này:

var array = [
  {"name": "Joe", "age": 17}, 
  {"name": "Bob", "age": 17}, 
  {"name": "Carl", "age": 35}
];

var ages = uniqueBy(array, "age");
console.log(ages); // [17, 35]

Các forEachphiên bản của câu trả lời @ travis-j của (hữu ích trên các trình duyệt hiện đại và thế giới Node JS):

var unique = {};
var distinct = [];
array.forEach(function (x) {
  if (!unique[x.age]) {
    distinct.push(x.age);
    unique[x.age] = true;
  }
});

Nhanh hơn 34% trên Chrome v29.0.1547: http://jsperf.com/filter-versus-dipedia/3

Và một giải pháp chung có chức năng ánh xạ (chậm hơn so với bản đồ trực tiếp, nhưng đó là điều được mong đợi):

function uniqueBy(arr, fn) {
  var unique = {};
  var distinct = [];
  arr.forEach(function (x) {
    var key = fn(x);
    if (!unique[key]) {
      distinct.push(key);
      unique[key] = true;
    }
  });
  return distinct;
}

// usage
uniqueBy(array, function(x){return x.age;}); // outputs [17, 35]

Tôi đã bắt đầu gắn Underscore trong tất cả các dự án mới theo mặc định vì vậy tôi không bao giờ phải suy nghĩ về những vấn đề nhỏ về dữ liệu này.

var array = [{"name":"Joe", "age":17}, {"name":"Bob", "age":17}, {"name":"Carl", "age": 35}];
console.log(_.chain(array).map(function(item) { return item.age }).uniq().value());

Sản xuất [17, 35].

Đây là một cách khác để giải quyết điều này:

var result = {};
for(var i in array) {
    result[array[i].age] = null;
}
result = Object.keys(result);

Tôi không biết giải pháp này nhanh như thế nào so với các giải pháp khác, nhưng tôi thích cái nhìn gọn gàng hơn. ;-)

EDIT: Được rồi, ở trên dường như là giải pháp chậm nhất trong tất cả ở đây.

Tôi đã tạo một trường hợp thử nghiệm hiệu suất tại đây: http://jsperf.com/distinc-values-from-array

Thay vì kiểm tra độ tuổi (Số nguyên), tôi chọn so sánh tên (Chuỗi).

Phương pháp 1 (giải pháp của TS) rất nhanh. Thật thú vị, Phương pháp 7 vượt trội hơn tất cả các giải pháp khác, ở đây tôi đã loại bỏ .indexOf () và sử dụng triển khai "thủ công" của nó, tránh việc gọi hàm lặp:

var result = [];
loop1: for (var i = 0; i < array.length; i++) {
    var name = array[i].name;
    for (var i2 = 0; i2 < result.length; i2++) {
        if (result[i2] == name) {
            continue loop1;
        }
    }
    result.push(name);
}

Sự khác biệt về hiệu suất khi sử dụng Safari & Firefox là đáng kinh ngạc và có vẻ như Chrome thực hiện công việc tối ưu hóa tốt nhất.

Tôi không chắc chắn chính xác tại sao các đoạn trên quá nhanh so với các đoạn khác, có lẽ ai đó khôn ngoan hơn tôi có câu trả lời. ;-)

sử dụng lodash

var array = [
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
];
_.chain(array).pluck('age').unique().value();
> [17, 35]

Sử dụng Lodash

var array = [
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
];

_.chain(array).map('age').unique().value();

Trả về [17,35]

function get_unique_values_from_array_object(array,property){
    var unique = {};
    var distinct = [];
    for( var i in array ){
       if( typeof(unique[array[i][property]]) == "undefined"){
          distinct.push(array[i]);
       }
       unique[array[i][property]] = 0;
    }
    return distinct;
}

gạch dưới _.uniq(_.pluck(array,"age"))

Đây là một giải pháp linh hoạt sử dụng giảm, cho phép ánh xạ và duy trì thứ tự chèn.

mục : Một mảng

mapper : Một hàm unary ánh xạ mục theo tiêu chí hoặc để trống để ánh xạ chính mục đó.

function distinct(items, mapper) {
    if (!mapper) mapper = (item)=>item;
    return items.map(mapper).reduce((acc, item) => {
        if (acc.indexOf(item) === -1) acc.push(item);
        return acc;
    }, []);
}

Sử dụng

const distinctLastNames = distinct(items, (item)=>item.lastName);
const distinctItems = distinct(items);

Bạn có thể thêm nó vào nguyên mẫu Array của bạn và bỏ qua tham số vật phẩm nếu đó là phong cách của bạn ...

const distinctLastNames = items.distinct( (item)=>item.lastName) ) ;
const distinctItems = items.distinct() ;

Bạn cũng có thể sử dụng Set thay vì Array để tăng tốc độ khớp.

function distinct(items, mapper) {
    if (!mapper) mapper = (item)=>item;
    return items.map(mapper).reduce((acc, item) => {
        acc.add(item);
        return acc;
    }, new Set());
}

Chỉ cần tìm thấy cái này và tôi nghĩ nó hữu ích

_.map(_.indexBy(records, '_id'), function(obj){return obj})

Một lần nữa sử dụng dấu gạch dưới , vì vậy nếu bạn có một đối tượng như thế này

var records = [{_id:1,name:'one', _id:2,name:'two', _id:1,name:'one'}]

nó sẽ cung cấp cho bạn các đối tượng duy nhất.

Điều gì xảy ra ở đây là indexBytrả về một bản đồ như thế này

{ 1:{_id:1,name:'one'}, 2:{_id:2,name:'two'} }

và chỉ vì đó là bản đồ, tất cả các phím đều là duy nhất.

Sau đó, tôi chỉ ánh xạ danh sách này trở lại mảng.

Trong trường hợp bạn chỉ cần các giá trị riêng biệt

_.map(_.indexBy(records, '_id'), function(obj,key){return key})

Hãy nhớ rằng chuỗi keyđược trả về dưới dạng một chuỗi vì vậy, nếu bạn cần số nguyên thay thế, bạn nên làm

_.map(_.indexBy(records, '_id'), function(obj,key){return parseInt(key)})

tôi nghĩ rằng bạn đang tìm kiếm chức năng groupBy (sử dụng Lodash)

_personsList = [{"name":"Joe", "age":17}, 
                {"name":"Bob", "age":17}, 
                {"name":"Carl", "age": 35}];
_uniqAgeList = _.groupBy(_personsList,"age");
_uniqAges = Object.keys(_uniqAgeList);

tạo ra kết quả:

17,35

Bản demo jsFiddle: http://jsfiddle.net/4J2SX/201/

Nếu giống như tôi, bạn thích một "chức năng" hơn mà không ảnh hưởng đến tốc độ, ví dụ này sử dụng tra cứu từ điển nhanh được bọc bên trong để giảm sự đóng cửa.

var array = 
[
    {"name":"Joe", "age":17}, 
    {"name":"Bob", "age":17}, 
    {"name":"Carl", "age": 35}
]
var uniqueAges = array.reduce((p,c,i,a) => {
    if(!p[0][c.age]) {
        p[1].push(p[0][c.age] = c.age);
    }
    if(i<a.length-1) {
        return p
    } else {
        return p[1]
    }
}, [{},[]])

Theo thử nghiệm này, giải pháp của tôi nhanh gấp đôi so với câu trả lời được đề xuất

[...new Set([
    { "name": "Joe", "age": 17 },
    { "name": "Bob", "age": 17 },
    { "name": "Carl", "age": 35 }
  ].map(({ age }) => age))]

Tôi biết mã của tôi có độ dài nhỏ và độ phức tạp thời gian ít nhưng nó có thể hiểu được vì vậy tôi đã thử theo cách này.

Tôi đang cố gắng phát triển chức năng dựa trên nguyên mẫu ở đây và mã cũng thay đổi.

Ở đây, Phân biệt là chức năng nguyên mẫu của riêng tôi.

<script>
  var array = [{
      "name": "Joe",
      "age": 17
    },
    {
      "name": "Bob",
      "age": 17
    },
    {
      "name": "Carl",
      "age": 35
    }
  ]

  Array.prototype.Distinct = () => {
    var output = [];
    for (let i = 0; i < array.length; i++) {
      let flag = true;
      for (let j = 0; j < output.length; j++) {
        if (array[i].age == output[j]) {
          flag = false;
          break;
        }
      }
      if (flag)
        output.push(array[i].age);
    }
    return output;
  }
  //Distinct is my own function
  console.log(array.Distinct());
</script>

Nếu bạn có Array.prototype.includes hoặc sẵn sàng polyfill nó, điều này hoạt động:

var ages = []; array.forEach(function(x) { if (!ages.includes(x.age)) ages.push(x.age); });

Mã dưới đây của tôi sẽ hiển thị mảng tuổi duy nhất cũng như mảng mới không có tuổi trùng lặp

var data = [
  {"name": "Joe", "age": 17}, 
  {"name": "Bob", "age": 17}, 
  {"name": "Carl", "age": 35}
];

var unique = [];
var tempArr = [];
data.forEach((value, index) => {
    if (unique.indexOf(value.age) === -1) {
        unique.push(value.age);
    } else {
        tempArr.push(index);    
    }
});
tempArr.reverse();
tempArr.forEach(ele => {
    data.splice(ele, 1);
});
console.log('Unique Ages', unique);
console.log('Unique Array', data);```

Tôi đã tự viết bằng TypeScript, cho một trường hợp chung, giống như trong Array.distinctBy {}...

function distinctBy<T, U extends string | number>(array: T[], mapFn: (el: T) => U) {
  const uniqueKeys = new Set(array.map(mapFn));
  return array.filter((el) => uniqueKeys.has(mapFn(el)));
}

Trường hợp Ucó thể băm, tất nhiên. Đối với Đối tượng, bạn có thể cần https://www.npmjs.com/package/es6-json-urdy-opesify

Trong trường hợp bạn cần duy nhất của toàn bộ đối tượng

const _ = require('lodash');

var objects = [
  { 'x': 1, 'y': 2 },
  { 'y': 1, 'x': 2 },
  { 'x': 2, 'y': 1 },
  { 'x': 1, 'y': 2 }
];

_.uniqWith(objects, _.isEqual);

[Đối tượng {x: 1, y: 2}, Đối tượng {x: 2, y: 1}]

Trả lời câu hỏi cũ này là khá vô nghĩa, nhưng có một câu trả lời đơn giản nói lên bản chất của Javascript. Các đối tượng trong Javascript vốn là bảng băm. Chúng ta có thể sử dụng điều này để có được một hàm băm của các khóa duy nhất:

var o = {}; array.map(function(v){ o[v.age] = 1; });

Sau đó, chúng ta có thể giảm hàm băm thành một mảng các giá trị duy nhất:

var a2 = []; for (k in o){ a2.push(k); }

Đấy là tất cả các thứ bạn cần. Mảng a2 chỉ chứa các lứa tuổi duy nhất.

Một lớp lót đơn giản với hiệu suất tuyệt vời. Nhanh hơn 6% so với các giải pháp ES6 trong các thử nghiệm của tôi .

var ages = array.map(function(o){return o.age}).filter(function(v,i,a) {
    return a.indexOf(v)===i
});