ES6的函数、Map集合

一、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

        let m2 = new Map()
        m2.set('id','S1001')
        m2.set('dept','开发部')
        m2.set('phone','029-456')

        for(let key of m2.keys()){ 
            let str = `${key}<===>${m2.get(key)}`
            console.log(str);
        }

强调：

（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.函数没有参数，函数体语句只有一条 

// 1.函数没有参数，函数体语句只有一条        
let fun = () => "woniu"
console.log(fun());
//当箭头函数的函数语句只有一条时，需要注意两点：
(1) {}可以省略
(2)默认含有return，即在没有{}时，省略了return

        2. 函数带有一个参数，可以省略’()’

//2. 函数带有一个参数，可以省略’()’
let f2 = args =>{ //args是形参
console.log(args)
}
f2(1024) //函数调用，将1024传递给形参args

        3. 函数带有多个参数

//3. 函数带有多个参数
let f3 = (arg1,arg2)=> arg1 + arg2
 //等价于
 // let f3 = (arg1,arg2)=> { return (arg1 + arg2) }

        4. 函数体只有一条语句，函数返回对象:必须用’()’将对象包起来

//4. 函数体只有一条语句，函数返回对象:必须用’()’将对象包起来
let f4 = ()=> ({
	name:’张三’,
	age:25
})
console.log(f4())

        5.箭头函数中this绑定

//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

//6. 箭头函数没有内置的arguments
let pt = ()=>{
	console.log(arguments) //Uncaught ReferenceError: arguments is not defined
}
pt(12,23,34)