一、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）Map中的key不能重复，但是value可以重复
（2）keys()返回的是Map中所有key集合 —— keys（）返回的集合类型是Set
（3）在Map中通过key可以得到对应的value，反之则不行
h、values()：返回Map中的所有value
i、entries()：可以获取Map的所有成员（即所有的key-value）
j、forEach循环遍历
课堂练习1：以“key” <===> “value”，显示一个Map
<body>
<script>
// 以'key' <===> 'value',显示一个Map
let m2 = new Map()
m2.set('id','007')
m2.set('dept','工程部')
m2.set('phone','029-456')
//keys()返回Map中所有的key
for(let k of m2.keys()){
let str = `${k} <===> ${m2.get(k)}`
console.log(str)
}
console.log(m2.keys())
//values()返回的是Map中所有的value
for(let val of m2.values()){
console.log(val)
}
//entries()获取Map的所有成员(key-value)
for(let temp of m2.entries()){
console.log(temp)
}
for(let [key,value] of m2.entries()){
console.log(`${key}:${value}`)
}
//forEach()循环遍历
//函数的第一个参数是value，第二个是key
m2.forEach(function(value,key){
console.log(`${key}:${value}`)
})
</script>
</body>课堂练习2：Map数组（数组的每个单元都是一个key-value）的使用
<body>
<script>
let m1 = new Map([
['one','北京'],
['two','上海'],
['three','广州']
])
console.log(m1)
//解构整个Map
let str = [...m1.entries()]
console.log(str) //str为二维数组
let m2 = new Map()
m2.set('a','西安')
m2.set('b','咸阳')
let m3 = new Map()
m3.set('c','重庆')
m3.set('d','成都')
let m4 = new Map()
let arr = [m2,m3,m4]
console.log(arr) //arr为Map函数数组
//输出西安
console.log(arr[0].get('a'))
</script>
</body>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）箭头函数：在定义函数时使用“=>”符号。在定义回调函数(高阶函数)、函数表达式时使用。可以简化代码
<body>
<script>
//默认值
function fun(a,b,c = 45){
console.log('a:',a)
console.log('b:',b)
console.log('c:',c)
}
let a = 10,b = 20, c = 30
fun(a,b)
//箭头函数 '=>' 作用：简化代码
/*
1.函数没有参数，函数体语句只有一条
注意：
(1) 可以省略{}
(2) 默认含有return
*/
let s1 = () => 'woniu'
console.log(s1()) //woniu
//2.函数带有一个参数，可以省略'()'
let s2 = args => { //args是形参
console.log(args) //1024
}
s2(1024)
//3.函数带有多个参数，'()'不能省略
let s3 = (arg1,arg2) => arg1 + arg2
console.log(s3(1,2)) //3
//4.函数体只有一条语句，函数返回对象：必须用'()'将对象包起来
let s4 = () => ({
name:'aaa',
age:18
})
console.log(s4()) //{name: 'aaa', age: 18}
//5.箭头函数中this的绑定
//箭头函数中不存在this，this默认绑定为window对象
window.name = 'ccc'
let obj = {
name:'bbb',
s5:function(){
console.log(this.name) //this代表obj bbb
},
s6:() => {
console.log(this.name) //ccc
}
}
obj.s5()
obj.s6()
//6.箭头函数中没有内置的arguments
let pt = () => {
console.log(arguments) //arguments is not defined
}
pt(12,23,34)
</script>
</body>三、类
1、面向对象：是一种开发思想，一切皆为对象。对象是属性和行为的结合体
2、面向过程：也是一种开发思想。开发中的每个细节，开发者都要考虑到。
<body>
<script>
//1.用class定义Student类
class Student{
constructor(id,name,sex){
this.id = id
this.name = name
this.sex = sex
}
display(){
console.log('id:',this.id)
console.log('name:',this.name)
console.log('sex:',this.sex)
}
}
//2.使用Student类创建对象
let s1 = new Student(1007,'孙悟空','男')
s1.display()
console.log('------------------------')
let s2 = new Student(1008,'猪八戒','男')
s2.display()
console.log('------------------------')
let s3 = new Student(1009,'白龙马','男')
s3.display()
</script>
</body>4、ES5中实现类的功能：构造函数，在构造函数中封装了属性和方法。缺陷是构造函数和普通函数的定义方式是一样的
class 类名{
属性
行为
}
class 是关键字，专门用来定义类。
课堂练习1：
（1）定义一个Book类，包含ISDN、author、publish、price 4个属性，包含show()方法用于显示图书信息
（2）定义一个数组，在数组中存储了5个Book对象，遍历数组输出price最高的Book对象
（3）将数组中的5个Book对象显示在html页面的table中
<style>
table{
border: 1px solid red;
}
table tr{
border: 1px solid red;
}
table td{
border: 1px solid red;
}
</style>
<body>
<!-- <tbody></tbody> -->
<script>
class Book{
constructor(ISDN,author,publish,price){
this.ISDN = ISDN //编号
this.author =author //作者
this.publish = publish //出版社
this.price = price //价格
}
show(){
console.log('编号为：',this.ISDN)
console.log('作者为：',this.author)
console.log('出版社为：',this.publish)
console.log('价格为：',this.price)
}
}
let b1 = new Book(001,'余华','西安出版社',30)
let b2 = new Book(002,'村上春树','西安出版社',40)
let b3 = new Book(003,'路遥','西安出版社',50)
let b4 = new Book(004,'大冰','西安出版社',60)
let all = new Set()
all.add(b1).add(b2).add(b3).add(b4)
let arr = [...all]
for(let i = 0;i < arr.length;i++){
arr[i].show()
}
let max = arr[0]
for(let k in arr){
if (max.price < arr[k].price) {
max = arr[k]
}
}
console.log(max)
// let tbody = document.querySelector('tbody')
let table = document.createElement('table')
for(let i = 0;i < arr.length;i++){
let tr = document.createElement('tr')
table.appendChild(tr)
for(let j in arr[i]){
let td = document.createElement('td')
// let txt = document.createTextNode(arr[i][j])
td.innerHTML = arr[i][j]
// td.appendChild(txt)
tr.appendChild(td)
}
}
document.querySelector('body').appendChild(table)
</script>
</body>6、ES6中支持getter/setter来获取属性值、设置属性值
（1）定义get方法、set方法的目的是：用于隐藏对象的属性名
（2）在使用get方法、set方法方法时不用带’()’
<body>
<script>
/*
(1)定义get方法、set方法的目的是：用于隐藏对象的属性名
(2)在使用get方法、set方法时不用带()
*/
class Account{
constructor(accountID,pwd){
//加_的属性，称为私有属性(语义上的区分)
this._accountID = accountID
this._pwd = pwd
}
//1.定义get方法：获取属性的值
get accountID(){
return this._accountID
}
get pwd(){
return this._pwd
}
//2.定义set方法：设置属性值
set accountID(value){
this._accountID = value
}
set pwd(value){
this._pwd = value
}
}
let a1 = new Account('1001','123456')
//a1.accountID实际调用的是accountID()方法
console.log('账号：',a1.accountID)
//pwd实际调用的是pwd()，因为pwd()方法前有get，因此调用时不用带()
console.log('账号：',a1.pwd)
console.log('-----------------')
a1.accountID = '9999'
a1.pwd = '987654'
console.log('账号：',a1.accountID)
console.log('账号：',a1.pwd)
</script>
</body> 
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
