ES6学习笔记之map、set与数组、对象的对比
ES6
ES5中的数据结构,主要是用Array和Object。在ES6中主要新增了Set和Map数据结构。到目前为止,常用的数据结构有四种Array、Object、Set、Map。下面话不多说了,来一起看看详细的介绍吧。
// 数据结构横向对比,增,查,改,删
1、map和数组对比
{
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和数组对比
{
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);
}
总结
通过对比可以发现,能使用map的优先使用,不使用数组,
考虑数据的唯一性,考虑使用set,不使用Objet
以后的开发中可以优先考虑使用map和set了,并且可以放弃数组和object了
原链:https://www.jb51.net/article/135685.htm
ES6学习笔记之map、set与数组、对象的对比的更多相关文章
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- JS&ES6学习笔记(持续更新)
ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记之块级作用域
ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
随机推荐
- springMVC访问 WEB-INF 下的 jsp 和 html
配置freemarker,记得加上jar包 <?xml version="1.0" encoding="UTF-8"?> <beans xml ...
- vim ctrl+v垂直选取产生 e353错误
原因是/etc/vim/vimrc中map ctrl+v为其他作用了 解决方法: 删除掉map<C-V>...项即可
- gzip: stdin:unexpected end of file
原因是文件下载的不完整,重新下载就好了,
- 无向连通图求割边(桥)hdu4738,hdu3849
点击打开链接 题目链接: hdu 4738 题目大意: 曹操有N个岛,这些岛用M座桥连接起来 每座桥有士兵把守(也可能没有) 周瑜想让这N个岛不连通,但只能炸掉一座桥 并且炸掉一座桥需要派出不 ...
- baidu.com直接访问网站,不跳转www.baidu.com
平常最多的需求是将baidu.com指向全域名www.badu.com,但是往往需求是各种各样,这两天就遇到一个反向需求.将baidu.com直接访问网站,而不做跳转. 最近两天在给域名证书续费,但是 ...
- Saltstack之api
Salt-API 1,htps证书 2,配置文件 3,验证.使用PAM验证 4,启动salt-api 安装salt-api yum -y install salt-api 创建用户 useradd - ...
- CSU1129 送货到家 【状压dp】
哈哈发现这道题竟然没有题解,于是我决定写一份! 状压dp 题目: 懒惰的巫女Reimu因为各种原因在香霖堂的店主Rinnosuke那儿欠下了很多债,于是乎只好靠帮他在幻想乡中送货来偿还掉微不足道的一小 ...
- POJ 3067 - Japan - [归并排序/树状数组(BIT)求逆序对]
Time Limit: 1000MS Memory Limit: 65536K Description Japan plans to welcome the ACM ICPC World Finals ...
- sklearn学习_01
# -*- coding: utf-8 -*- """ Created on Fri Sep 29 11:05:52 2017 机器学习之sklearn @author: ...
- laravel composer install 报错解决方法
composer install 报错信息: 报错原因参考:http://blog.csdn.net/yicixing7/article/details/55050140 解决方法: 把compose ...