> 웹 프론트엔드 > JS 튜토리얼 > ES6 학습에서 맵셋, 배열, 객체 비교

ES6 학습에서 맵셋, 배열, 객체 비교

零下一度
풀어 주다: 2017-06-25 09:23:13
원래의
2046명이 탐색했습니다.

간단한 비교입니다

주로 추가, 삭제, 수정, 확인의 4가지 측면으로 설명합니다. 자세한 내용은 코드를 참조하세요.  

1. 맵과 배열의 비교

{  // 数据结构横向对比,增,查,改,删
  let map=new Map();
  let array=[];  // 增
  map.set('t',1);
  array.push({t:1});

  console.info('map-array',map,array);  // 查
  let map_exist=map.has('t');
  let array_exist=array.find(item=>item.t);
  console.info('map-array',map_exist,array_exist);  // 改
  map.set('t',2);
  array.forEach(item=>item.t?item.t=2:'');
  console.info('map-array-modify',map,array);  // 删
  map.delete('t');
  let index=array.findIndex(item=>item.t);
  array.splice(index,1);
  console.info('map-array-empty',map,array);
}
로그인 후 복사

  2. 집합과 배열 비교

{  // set和array的对比
  let set=new Set();
  let array=[];  // 增
  set.add({t:1});
  array.push({t:1});

  console.info('set-array',set,array);  // 查
  let set_exist=set.has({t:1});
  let array_exist=array.find(item=>item.t);
  console.info('set-array',set_exist,array_exist);  // 改
  set.forEach(item=>item.t?item.t=2:'');
  array.forEach(item=>item.t?item.t=2:'');
  console.info('set-array-modify',set,array);  // 删
  set.forEach(item=>item.t?set.delete(item):'');
  let index=array.findIndex(item=>item.t);
  array.splice(index,1);
  console.info('set-array-empty',set,array);
}
로그인 후 복사

  3. 맵, 집합, 객체 비교  

{  // map,set,object对比
  let item={t:1};
  let map=new Map();
  let set=new Set();
  let obj={};  // 增
  map.set('t',1);
  set.add(item);
  obj['t']=1;

  console.info('map-set-obj',obj,map,set);  // 查  console.info({
    map_exist:map.has('t'),
    set_exist:set.has(item),
    obj_exist:'t' in obj
  })  // 改
  map.set('t',2);
  item.t=2;
  obj['t']=2;
  console.info('map-set-obj-modify',obj,map,set);  // 删除
  map.delete('t');
  set.delete(item);  delete obj['t'];
  console.info('map-set-obj-empty',obj,map,set);
}
로그인 후 복사

 

  비교해보면 지도 이용이 가능한 분들을 알 수 있어요 배열 대신에 먼저 사용해야 합니다.

데이터의 고유성을 고려하고 Objet 대신 Set 사용을 고려하세요

향후 개발에서는 맵과 세트 사용을 우선으로 할 수 있으며 배열과 객체를 포기할 수 있습니다.

 

위 내용은 ES6 학습에서 맵셋, 배열, 객체 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿