当前位置: 首页 > 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.jsqmd.com/news/57122/

相关文章:

  • java17版本,用IDEA开发,在JavaFX中无法找到com.google.gson。
  • 2025手机配件到迪拜物流专线送仓TOP5权威推荐:甄选企业
  • Visual Studio Code 轻量不简陋!VS Code:零基础编程者的第一款「万能编辑器」安装+中文设置步骤
  • 推荐几家海外展会推广公司,五家效果不错的海外展会营销推广平台详细介绍
  • 2025年12月AI 编程代码生成效率实战推荐:技术性能与应用场景的全面分析
  • 我是皇帝
  • 数字屋打包流程
  • 2025年食用油脂企业性价比与满意度排名:油一堂食品性价比好
  • 2025年进口无硫纸厂家权威推荐榜单:防潮纸/硅片间隔纸/丝印白纸源头供应商精选
  • setInterVal长时间运行卡顿,采用setTimeout代替setInterval
  • 2025年下半年四川喷塑优质厂家推荐排行榜:成都汇元满机械制造有限公司领衔十大品牌
  • BetterGI:基于计算机视觉的《原神》游戏自动化辅助工具
  • 2025年下半年工业大吊扇工厂Top 5推荐指南:专业选择与比较
  • 离散对数问题和求解
  • 2025年下半年央国企就业辅导机构综合评估与选择指南
  • 完整教程:【内存管理】深入理解CR3寄存器:进程地址空间切换与虚拟内存管理的核心枢纽
  • 2025年下半年永磁工业风扇工厂综合选购指南
  • 2025年12月优质螺栓厂家电话精选:外六角螺栓/U型螺栓/地脚螺栓/预埋螺栓厂家联系方式 + 实用选择指南建筑 / 工业用螺栓选型参考
  • jkd和notepad++
  • 2025年口碑与实力兼具的通信干扰模拟器品牌排行,光时域反射仪/雷达干扰模拟器/光纤熔接机/无线信号测量仪表通信干扰模拟器企业口碑推荐
  • 开源了我的第一个 Chrome 扩展:CNB Workspace Manager
  • shopify物流、客服配置
  • TDengine 字符串函数 CONCAT 用户手册 - 详解
  • 护手霜挑选必备指南:2025十大防干裂品牌深度剖析!持久保湿滋润呵护双手
  • 部署网站,一替换dll,网站就报错
  • 如何在Stimulsoft图表中创建自动系列(Auto Series)——实战示例解析
  • Spring MVC 响应处理:页面、素材与状态配备详解
  • 深入解析:HTML炫酷烟花⑨
  • 专为不同肤质定制:2025年油皮、干皮、敏感肌最爱的氨基酸洗面奶榜单
  • 2025年度裁断机厂商排名,裁断机厂家哪家售后好