ES6的函数、类

不想写，还得写，写就写，慢慢写

已于 2022-11-09 23:57:23 修改

阅读量311

点赞数 1

文章标签： es6 javascript json

于 2022-11-09 18:37:15 首次发布

本文链接：https://blog.csdn.net/m0_74331185/article/details/127775352

版权

本文详细介绍了ES6中的Map数据结构，包括其定义、使用方法和转换为数组的方法。此外，还讲解了函数的默认值和箭头函数的特性，并探讨了面向对象编程中的类的概念及其在ES6中的实现。最后，提到了getter和setter的使用，用于对象属性的访问和修改。

摘要由CSDN通过智能技术生成

一、Map集合

1、数据的存放格式：采用 key-value（键值对）的方式进行存放。采用这种方式存放数据的有

（1）对象：属性对应的是key(键)，属性值对应的是value(值)

let obj = {

name: ‘张三’,

age:25

}

（2）JSON：是常用的一种前后台数据交换的格式

（3）Map

2、Map的定义：Map是一种数据结构（Hash结构），在ES6中是Map一种存放许多键值对的有序列表

3、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、ES5中的函数：

（1）通过function关键字定义函数

function 函数名([参数]){ }

（2）函数表达式

let 变量 = function([参数]){ }

注意：

（1）形参和实参的区别

（2）函数的返回值：return语句来实现

2、ES6中对函数的扩展

（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、面向过程：也是一种开发思想。开发中的每个细节，开发者都要考虑到。

3、类：具有相同属性和行为的对象的集合

4、ES5中实现类的功能：构造函数，在构造函数中封装了属性和方法。缺陷是构造函数和普通函数的定义方式是一样的

5、ES6中类的定义方式：语义性更强、语法更简洁

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)
   }