ES6中函数和集合的用法

 

目录

1、函数的参数

2、箭头函数

3.箭头函数的this指向使用

4、Iterator迭代器

5、Set集合

6、Map集合

---

1、函数的参数

 

/*
 * @Author: [jsh]
 * @Date: 2021-09-27 09:06:58
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-27 17:26:05
 * @Description: 
 */
let myFun=function(a,b,c){
    console.log(a,b,c); 
}
myFun(1,2,3); //1 2 3

let myFun1=function({a,b,c}){
    console.log(a,b,c);
}
myFun1({a:1,b:2,c:'jsh'});//1 2 jsh

let myFun2=function([a,b,c]){
    console.log(a,b,c);
}
myFun2([,2,3]); //undefined 2 3

//...用在函数形参的位置，叫做rest参数，也叫拓展运算符的逆运算
let myFun3=function(a,...b){
    console.log(a,b);
}
myFun3(1,2,3,4,5,6); //1 [ 2, 3, 4, 5, 6 ]

let myFun4=function(...c){
    console.log(c);
}
myFun4('I','love','you'); //[ 'I', 'love', 'you' ]

2、箭头函数

/*
 * @Author: [jsh]
 * @Date: 2021-09-27 09:29:05
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-27 18:24:55
 * @Description: 
 */
let arr = ['tom','larry','jacky'];
let res1 = arr.filter(function(item){
    return item == 'tom';
});
console.log(res1); //[ 'tom' ]

let res2 = arr.filter((item)=>{
    return item == 'larry'
});
console.log(res2); //[ 'larry' ]

//有且只有一条返回语句，才能用极简形式
let res3 = arr.filter(item=>item == 'jacky');
console.log(res3); //[ 'jacky' ]

3.箭头函数的this指向使用

3.1、外部指向：

/*
 * @Author: [jsh]
 * @Date: 2021-09-27 09:37:50
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-27 18:54:00
 * @Description: 
 */
let arrowFun=()=>{
    console.log(this);//指向外部作用域即全局
}
let obj = {
    name:'zs',
    age:12,
    gender:'male',
    // sayName(){
    //     console.log(this.name);
    // }, //ES6中声明函数的简写形式
    // sayName:()=>{
    //     console.log(this);
    // },
    sayName(){
        //return ()=> {
        //   console.log(this); //有自己的this,指向内部作用域
        // }
         return arrowFun(); //外部声明时的this指向外层作用域
    }
}
this.name='ls';
console.log('全局',this); //全局 { name: 'ls' }
obj.sayName(); //{ name: 'ls' }  

 3.2、内部指向：

let arrowFun=()=>{
    console.log(this);//指向外部作用域即全局
}
let obj = {
    name:'zs',
    age:12,
    gender:'male',
    // sayName(){
    //     console.log(this.name);
    // }, //ES6中声明函数的简写形式
    // sayName:()=>{
    //     console.log(this);
    // },
    sayName(){
        return ()=> {
            console.log(this); //有自己的this,指向内部作用域
        }
        // return arrowFun(); //外部声明时的this指向外层作用域
    }
}
this.name='ls';
console.log('全局',this); //全局 { name: 'ls' }
obj.sayName()(); //{ name: 'zs', age: 12, gender: 'male', sayName: [Function: sayName] }

4、Iterator迭代器

/*
 * @Author: [jsh]
 * @Date: 2021-09-27 09:59:59
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-27 19:20:24
 * @Description: 
 */
let arr1 = ['tom','vicky','jacky'];
let keys = arr1.keys();
let values = arr1.values();
let entries = arr1.entries();
// console.log(keys.next());
// console.log(values.next());
// console.log(entries.next());
// console.log(values.next());
// console.log(values.next());
// console.log(values.next());


// let item;
// while(!(item = values.next()).done){
//     console.log(item.value);
// }  结果和下面的for value of 一样

//for of
for(let value of values){
    console.log(value);
}

for( let entry of entries) {
    console.log(entry);
}

5、Set集合

/*
 * @Author: [jsh]
 * @Date: 2021-09-27 11:04:37
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-27 19:38:53
 * @Description: 
 */
//set可以本身就有去重的方法
let arr =  [1,2,3,4,5,2,3,2,1,7];
let set = new Set(arr);
// set.add(100);
console.log(Array.from(set));//set集合转化成数组
console.log(set.size);//集合内元素的个数
// console.log(set.delete(1));
console.log(set);//set集合输出

set.forEach((value)=>{
    console.log(value);
}); //遍历输出

     注意：set本身含有数组去重的功能

6、Map集合

/*
 * @Author: [jsh]
 * @Date: 2021-09-27 11:18:28
 * @LastEditors: [jsh]
 * @LastEditTime: 2021-09-27 20:11:51
 * @Description: 
 */
let obj1 = {
    name:'zs',
    age:12,
    gender:'male'
}
// let a=Object.entries(obj1);//转换成数组
// console.log(a);
// let set=new Set(a);
// console.log(set);//转换成集合
// set.forEach((value)=>{
//     console.log(value);//数组遍历输出
// }); //遍历输出
let map = new Map(Object.entries(obj1));
console.log(map); //Map(3) { 'name' => 'zs', 'age' => 12, 'gender' => 'male' }
map.set(true,0);
map.set({a:1,b:2},['tom','vicky']);
console.log(map);
map.forEach((value,key)=>{
    console.log(value,key); //[ 'tom', 'vicky' ] { a: 1, b: 2 }
})