检查Javascript中嵌套的对象数组中是否存在Key？

Question

下面是一个代码示例。我想编写一个if（ condition ）来检查对象 Obj 中是否存在键“chart”并返回true或false。

我不知道如何为数组

做这件事

var Obj = {
  carousel: {
    container: [{
      title: 'First slide 01',
      image: 'img 1',
      buttons: ['OK', 'Cancel', 'Submit', 'Send', 'Abort']
    }, {
      title: 'Second slide 02',
      chart: {},
      buttons: ['Alpha', 'Beta']
    }, {
      title: 'Third slide 03',
      video: 'video 1'
    }, {
      title: 'Fourth slide 04',
      audio: 'audio 1',
      buttons: ['link', 'embed']
    }]
  }
}
if('chart' in Obj){
	alert('true')
}
else {
	alert('false')
}

Answer 1

您可以使用ES6 filter来执行此操作。

const
  Obj = {
    carousel: {
      container: [{
        title: 'First slide 01',
        image: 'img 1',
        buttons: ['OK', 'Cancel', 'Submit', 'Send', 'Abort']
      }, 
      {
        title: 'Second slide 02',
        chart: {},
        buttons: ['Alpha', 'Beta']
      }, 
      {
        title: 'Third slide 03',
        video: 'video 1'
      }, 
      {
        title: 'Fourth slide 04',
        audio: 'audio 1',
        buttons: ['link', 'embed']
      }]
    }
  };
  
function getChartContainers(containers) {
  // Filter returns an array with items from the source array that meet your
  // condition. In this case filter only includes the objects where chart is
  // not undefined.
  return containers.filter(item => item.chart !== undefined);
}

const 
  charts = getChartContainers(Obj.carousel.container);
  
if (charts.length === 0) {
  console.log('there are no charts');
} else {
  console.log(`there are ${charts.length} charts`);
}

console.log(charts);

更通用

如果你想过滤除chart以外的其他内容，你也可以使它更通用。

const
  Obj = {
    carousel: {
      container: [{
        title: 'First slide 01',
        image: 'img 1',
        buttons: ['OK', 'Cancel', 'Submit', 'Send', 'Abort']
      }, 
      {
        title: 'Second slide 02',
        chart: {},
        buttons: ['Alpha', 'Beta']
      }, 
      {
        title: 'Third slide 03',
        video: 'video 1'
      }, 
      {
        title: 'Fourth slide 04',
        audio: 'audio 1',
        buttons: ['link', 'embed']
      }]
    }
  };
  
function getContainersWithTypeOfContent(containers, contentType) {
  // Filter returns an array with items from the source array that meet your
  // condition. In this case filter only includes the objects where chart is
  // not undefined.
  return containers.filter(item => item[contentType] !== undefined);
}

const 
  charts = getContainersWithTypeOfContent(Obj.carousel.container, 'chart'),
  audio = getContainersWithTypeOfContent(Obj.carousel.container, 'audio');
  
if (charts.length === 0) {
  console.log('there are no charts');
} else {
  console.log(`there are ${charts.length} charts`);
}

if (audio.length === 0) {
  console.log('there is no audio');
} else {
  console.log(`there are ${audio.length} audio slides`);
}

ES5解决方案

如果您对ES6不满意，也可以在ES5中执行此操作。

var
  Obj = {
    carousel: {
      container: [{
        title: 'First slide 01',
        image: 'img 1',
        buttons: ['OK', 'Cancel', 'Submit', 'Send', 'Abort']
      }, 
      {
        title: 'Second slide 02',
        chart: {},
        buttons: ['Alpha', 'Beta']
      }, 
      {
        title: 'Third slide 03',
        video: 'video 1'
      }, 
      {
        title: 'Fourth slide 04',
        audio: 'audio 1',
        buttons: ['link', 'embed']
      }]
    }
  };

function getContainersWithTypeOfContent(containers, contentType) {
  var result = [];
  
  // Iterate over all the items in the containers array.
  for (var index = 0; index < containers.length; index++) {
    // Get the item at the current index.
    var currentItem = containers[index];
    // Check if the current item has the content type specified.
    if (currentItem[contentType] !== undefined) {
      // Push the item in the result array when it meets the content criteria.
      result.push(currentItem);
    }
  }
  
  // Return the array with items that match the specified content type.
  return result;
}

var 
  charts = getContainersWithTypeOfContent(Obj.carousel.container, 'chart'),
  audio = getContainersWithTypeOfContent(Obj.carousel.container, 'audio');

if (charts.length === 0) {
  console.log('there are no charts');
} else {
  console.log('there are ' + charts.length + ' charts');
}

if (audio.length === 0) {
  console.log('there is no audio');
} else {
  console.log('there are ' + audio.length + ' audio slides');
}

Answer 2

最懒的方法是使用lodash或下划线_.get和/或_.find函数。像

这样的东西

var element = _.find(
   obj.carousel.container, 
   function(value) { return 'chart' in value; }
);
if (!!element) alert ('Here we are!');

Answer 3

试试这个Obj.hasOwnProperty（＆＃39; chart＆＃39;）;

if ( Obj.hasOwnProperty('chart') ) { alert('true'); }
else { alert('false'); }

检查here以获取文档