当前位置: 首页 > news >正文

JavaScript基础笔记碎片-对象、数组、Map与Set

注意:本篇学习笔记基于原网站: JavaScript教程 - 廖雪峰的官方网站
笔记仅作学习留档使用

本篇目录

对象
循环
Map和Set
iterable

对象

let object ={...}表示一个对象,键值对 以xxx: xxx形式申明,,隔开。最后一个键值对不需要在末尾加,,加了有的浏览器(如低版本的IE)将报错。

ps.Array也是对象,它的每个元素的索引被视为对象的属性

通过object.prop的形式访问一个属性,如果属性名包含特殊字符,必须用'',访问这个属性必须用['xxx']来访问:

let xiaohong = {name: '小红','middle-school': 'No.1 Middle School'
};xiaohong.name; // '小红'
xiaohong['middle-school']; // 'No.1 Middle School'//这么写也行,但是显然很麻烦
xiaohong['name']; // '小红'

JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型;

访问不存在的属性不报错,而是返回undefined ,而且对象是动态类型,可以随时地给对象添加或删除属性

检测xiaoming 以及其继承得到的是否拥有某一属性,用in操作符:

xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错'name' in xiaoming; // true
'grade' in xiaoming; // false

因为这里toString定义在object对象中,而所有对象最终都会在原型链上指向object,所以xiaoming也拥有toString属性。

要判断属性是否是xiaoming自身拥有的,而不是继承得到的,可以用hasOwnProperty()方法:

'toString' in xiaoming; // truelet xiaoming = {name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

循环

for ... in

可以把一个对象的所有属性依次循环出来,要过滤掉对象继承的属性,用hasOwnProperty()来实现。

由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for ... in循环可以直接循环出Array的索引(不是内容):

let o = {name: 'Jack',age: 20,city: 'Beijing'
};
for (let key in o) {if (o.hasOwnProperty(key)) {console.log(key); // 'name', 'age', 'city'}
}//Array:
let a = ['A', 'B', 'C'];
for (let i in a) {console.log(i); // '0', '1', '2'console.log(a[i]); // 'A', 'B', 'C'
}

Map和Set

ES6标准新增的数据类型,遍历MapSet无法使用下标。

Map是一组键值对的结构,具有极快的查找速度,一个key只能对应一个value,value的值为最后一次放入的值。

Map具有以下方法:

let m = new Map(); // 空Map
//或者创建时赋值
let m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);// 添加新的key-value
m.set('Adam', 67);
m.set('Adam', 88);//改变value对应的值
//获取key对应的值
m.get('Adam'); // 88// 是否存在key
m.has('Adam'); // true// 删除key 'Adam'
m.delete('Adam'); 
m.get('Adam'); // undefined

SetMap类似,但是只有key,且ket不能重复(比较像无序且会去重的数组)

let s1 = new Set(); // 空Set
let s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}//添加元素
****s.add(4);
s; // Set {1, 2, 3, "3", 4}
//重复添加不会有效果
s.add(4);
s; // 仍然是 Set {1, 2, 3, "3", 4}//删除元素
s.delete(3);
s; // Set {1, 2, "3", 4}

iterable

ES6标准引入新的iterable类型,ArrayMapSet都属于iterable类型。具有iterable类型的集合可以通过for ... of循环来遍历。

let a = ['A', 'B', 'C'];
let s = new Set(['A', 'B', 'C']);
let m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (let x of a) { // 遍历Arrayconsole.log(x);
}
for (let x of s) { // 遍历Setconsole.log(x);
}
for (let x of m) { // 遍历Mapconsole.log(x[0] + '=' + x[1]);/*运行显示:1=x2=y3=z*/
}

for ... infor ... of 的区别:

  • for ... in遍历的实际上是对象的属性名称,循环将把name包括在内,但Arraylength属性却不包括在内。
  • for ... of循环则完全修复了这些问题,它只循环集合本身的元素
let a = ['A', 'B', 'C'];
a.name = 'Hello';
//in:
for (let x in a) {console.log(x); // '0', '1', '2', 'name'
}
//of:
for (let x of a) {console.log(x); // 'A', 'B', 'C'
}

还有一个iterable内置forEach方法,它接收一个函数,每次迭代就自动回调该函数,方法由ES5.1标准引入。

let a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {// element: 指向当前元素的值// index: 指向当前索引// array: 指向Array对象本身console.log(`${element}, index = ${index}`);
});
/*运行显示:
A, index = 0
B, index = 1
C, index = 2
*///Set没有索引,因此回调函数的前两个参数都是元素本身
let s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {console.log(element);//运行显示每个一行的ABC
});///Map的回调函数参数依次为value、key和map本身
let m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {console.log(value);//这里指定value,所以会显示每个一行的xyz
});
http://www.gsyq.cn/news/67402.html

相关文章:

  • 数字屋打包流程
  • 2025年12月优质螺栓厂家电话精选:外六角螺栓/U型螺栓/地脚螺栓/预埋螺栓厂家联系方式 + 实用选择指南建筑 / 工业用螺栓选型参考
  • 2025年下半年工业风扇工厂综合推荐指南:十佳厂家全方位解析
  • jkd和notepad++
  • 开源了我的第一个 Chrome 扩展:CNB Workspace Manager
  • 护手霜挑选必备指南:2025十大防干裂品牌深度剖析!持久保湿滋润呵护双手
  • 如何在Stimulsoft图表中创建自动系列(Auto Series)——实战示例解析
  • 2025年度裁断机厂商排名,裁断机厂家哪家售后好
  • xxl-job打包出现Could not determine gpg version异常
  • 冰蓝科技正式发布全新纯前端文档编辑产品 —— Spire.WordJS
  • 第一天敏捷冲刺博客
  • 2025年北京天津河北上海江苏印刷精品定制公司推荐:专业的印
  • top flow
  • 裁断机厂家选哪家好?裁断机服务商价格哪个合理?
  • 2025年日化产品袋制袋机优质厂家权威推荐榜单:高速三边封直立袋全自动制袋机‌/咖啡袋制袋机‌/塑料制袋机‌源头厂家精选
  • 视频汇聚平台EasyCVR助力打造太阳能供电远程视频监控系统
  • 相册链接
  • Elasticsearch 7.0 介绍与配置详解 - 指南
  • 企业管理 AI 应用服务商推荐:从场景覆盖到生态整合,用友BIP端到端解决方案引领行业
  • 2025年12月护墙板定制工厂TOP10实力榜:更有实木楼梯/衣柜/橱柜/木门等全品类对比,市场口碑+行业数据选购指南
  • 嵌入式工程师往后怎么发展?
  • 在曲阳县老家农村盖房子,靠谱的自建房公司去哪里找?河北保定曲阳县自建房公司/机构权威测评推荐排行榜
  • 曲阳县农村自建房公司口碑推荐榜。2026年自建房公司权威测评优选。
  • 全球主流3D砂型打印品牌权威推荐 探索工业制造革命性技术,解析顶级砂型打印品牌核心竞争力
  • 实用指南:Flink集群部署以及作业提交模式详解
  • 2025年下半年徐州旅游租车/包车/商务车出租公司口碑排行前十指南
  • 2025年高口碑应急启动电源公司推荐榜单
  • 2025年景观喷泉厂家权威推荐榜单:波光喷泉/人工湖喷泉/水池喷泉源头厂家精选
  • 别墅防水防潮五大品牌深度解析:左工防潮领衔结构性防护新标杆
  • Python实现公历转农历