一、Map集合
1、数据的存放格式:采用 key-value(键值对) 的方式进行存放。采用这种方式存放数据的有
(1)对象:属性对应的是key(键),属性值对应的是value(值)
let obj = {
name: ‘张三’,
age:25
}
(2)JSON:是常用的一种前后台数据交换的格式
(3)Map
2、Map的定义:Map是一种数据结构(Hash结构),在ES6中是Map一种存放许多键值对的有序列表
(1)属性:size —- 存放的是Map中的元素个数
(2)方法:
a、Map():构造方法。用来创建Map对象,不带参数表示创建空的Map,即size属性值为0
b、set(key,value):向Map中添加数据
c、get(key):获取键为key的value
d、has(key):判断Map中是否存在key
e、delete(key):删除key
f、clear():清空Map
g、keys():返回Map中的所有key
课堂练习1:以“key” <===> “value”,显示一个Map
(1)Map中的key不能重复,但是value可以重复
(2)keys()返回的是Map中所有key集合 —— keys()返回的集合类型是Set
(3)在Map中通过key可以得到对应的value,反之则不行
h、values():返回Map中的所有value
i、entries():可以获取Map的所有成员(即所有的key-value)
j、forEach循环遍历:
m2.forEach(function(value,key){ //函数的第一个参数是value,第二个参数是key
console.log(`${key}:${value}`)
})
练习2:Map数组(数组的每个单元都是一个key-value)的使用
let m1 = new Map()
m1.set('XA','西安')
m1.set('XY','咸阳')
let m2 = new Map()
m2.set('K1','重庆')
m2.set('K2','成都')
let m3 = new Map()
let arr = [m1,m2,m3] //arr是Map数组
console.log(arr)
//输出'西安'
console.log(arr[0].get('XA'))
4、Map转换为数组
(1)解构整个Map:
let m4 = new Map([
[‘one’,’北京’],
[‘two’,’上海’],
[‘three’,’深圳’]
])
let arr = [...m4.entries()] //将m4转换成数组.arr本质是3行2列的二维数组
(2)解构keys()
let a1 = [...m4.keys()] //将Map的所有key转换成数组
console.log(a1)
(3)解构values()
let a2 = [...m4.values()]
console.log(a2)
二、函数
(1)通过function关键字定义函数
function 函数名([参数]){ }
(2)函数表达式
let 变量 = function([参数]){ }
注意:
(1)形参和实参的区别
(2)函数的返回值:return语句来实现
(1)函数形参的默认值
function fun(a,b,c=45){ //形参c的默认值为45,如果调用函数时没有给c传递参数值,则使用默认值
console.log('a=',a)
console.log('b=',b)
console.log('c=',c)
}
let a = 10,b = 20,c = 30
fun(a,b)
2)箭头函数:在定义函数时使用“=>”符号。在定义回调函数(高阶函数)、函数表达式时使用。可以简化代码
//1. 函数没有参数,函数体语句只有一条
let fun = ()=> “woniu”
console.log(fun())
//当箭头函数的函数语句只有一条时,需要注意两点:
(1){}可以省略。
(2)默认含有return。即在没有{}的时,省略了return
//2. 函数带有一个参数,可以省略’()’
let f2 = args =>{ //args是形参
console.log(args)
}
f2(1024) //函数调用,将1024传递给形参args
//3. 函数带有多个参数
let f3 = (arg1,arg2)=> arg1 + arg2
//等价于
// let f3 = (arg1,arg2)=> { return (arg1 + arg2) }
//4. 函数体只有一条语句,函数返回对象:必须用’()’将对象包起来
let f4 = ()=> ({
name:’张三’,
age:25
})
console.log(f4())
//5. 箭头函数中this绑定
let obj = {
id: ‘S101’,
f5: function(){
console.log(this.id) //this代表的是obj
},
f6: ()=>{
console.log(this.id) //输出undefined,在箭头函数中没有绑定this,this默认绑定的是window对象
}
}
//6. 箭头函数没有内置的arguments
let pt = ()=>{
console.log(arguments) //Uncaught ReferenceError: arguments is not defined
}
pt(12,23,34)
```
三、类
1、面向对象:是一种开发思想,一切皆为对象。对象是属性和行为的结合体
2、面向过程:也是一种开发思想。开发中的每个细节,开发者都要考虑到。
4、ES5中实现类的功能:构造函数,在构造函数中封装了属性和方法。缺陷是构造函数和普通函数的定义方式是一样的
class 类名{
属性
行为
}
class 是关键字,专门用来定义类。
课堂练习1:
(1)定义一个Book类,包含ISDN、author、publish、price 4个属性,包含show()方法用于显示图书信息
(2)定义一个数组,在数组中存储了5个Book对象,遍历数组输出price最高的Book对象
(3)将数组中的5个Book对象显示在html页面的table中
<body>
<!--
1.定义一个Book类,包括编号Isdn, 作者author, 出版社publish, 价格pirice 4个属性,以及show()方法用于显示图书信息
2.定义一个数组,在数组中存储5个Book对象,遍历输出其中价格最高的对象
3.将数组中的5个对象显示在html页面中的table中
-->
<table id="t1" border="1">
<tr>
<td width="100">isdn</td>
<td width="100">书名</td>
<td width="100">作者</td>
<td width="100">价格</td>
</tr>
</table>
<script>
class Book {
constructor(Isdn, author, publish, pirice) {
this.Isdn = Isdn
this.author = author
this.publish = publish
this.pirice = pirice
}
show() {
console.log("书的编码是", this.Isdn)
console.log("书的作者是", this.author)
console.log("书的出版社是", this.publish)
console.log("书的价格是", this.pirice)
}
}
let b1 = new Book(1, "岸本", "日本出版社", 30)
let b2 = new Book(2, "尾田", "小鬼子出版社", 20)
let b3 = new Book(3, "哈哈哈", "中国出版社", 60)
let b4 = new Book(4, "哒哒哒", "中华人民出版社", 13)
let b5 = new Book(5, "巴拉巴拉", "巴拉出版社", 98)
let arr = [b1, b2, b3, b4, b5]
let max
for (let i = 0; i < arr.length - 1; i++) {
if (arr[i].pirice < arr[i + 1].pirice) {
max = arr[i + 1]
}
}
console.log(max)
//获取table
let tb = document.querySelector("#t1")
//遍历数组,创建tr,td
for(let i=0;i<arr.length;i++){
//创建tr标签
let tr = document.createElement("tr")
//遍历对象的属性,把属性值放到创建的td中
for(let key in arr[i]){
let td = document.createElement("td") //创建td
let txt = document.createTextNode(arr[i][key])//创建文本节点,节点内容是对象属性值
td.appendChild(txt)//将文本加入td
tr.appendChild(td) //将td加到tr中
}
tb.appendChild(tr)//将tr加入table中
}
</script>
6、ES6中支持getter/setter来获取属性值、设置属性值
(1)定义get方法、set方法的目的是:用于隐藏对象的属性名
(2)在使用get方法、set方法方法时不用带’()’
// 定义Patient类表示在门诊中的病人,此类包括name,sex,age,status属性。定义属性的获取(getter)及修改(setter)方法。生成两个Patient对象,设置其状态并将信息显示在屏幕上。
class Patient{
constructor(name,sex,age,status){
this._name=name
this._sex=sex
this._age=age
this._status=status
}
//定义get方法
get name(){
return this._name
}
get sex(){
return this._sex
}
get age(){
return this._age
}
get status(){
return this._status
}
//定义set 方法
set name(val){
this._name=val
}
set sex(val){
this._sex=val
}
set age(val){
this._age=val
}
set status(val){
this._status=val
}
}
let Patient1 =new Patient("成楠","男",55,"脚气")
let Patient2 =new Patient("博文","中性",75,"智力低下")
// Patient1.name ="富豪"
let arr = [Patient1,Patient2]
for(let i = 0;i<arr.length;i++){
let tb =document.querySelector("#t1")
let tr = document.createElement("tr")
for(let k in arr[i]){
let td = document.createElement("td")
let txt = document.createTextNode(arr[i][k])
td.appendChild(txt)
tr.appendChild(td)
}
tb.appendChild(tr)
}