箭头函数、字符串、Symbol 类型、set、map

箭头函数

如果函数中只有一句话,并且是使用return 返回的,可以省略{}
    var sum=(a,b)=>a+b;
 如果函数中有且仅有一个参数时,可以省略()
 var getSum=a=>a+10;
如果函数中没有参数,或者有1个以上的参数时,必须使用()
var getSum=()=>10;
箭头函数中 this指向
this指向当前箭头函数外上下文环境的this指向

箭头函数中 this指向

this指向当前箭头函数外上下文环境的this指向

解构赋值

数组解构

 var arr=[1,2,3,4];
        var [a,b]=arr;
        数组解构,将会将数组的元素按位传入到前面的变量上一一赋值,原数组不改变
        没有对应的值就是undefined
         var [a,b,c,d,e=10]=arr;
         如果e没有解构获得值是,默认值为10

           var a=2,b=1;
        var [a,b]=[b,a];

对象解构

对象解构赋值是按照对象的属性解构,不区分先后顺序

var obj={a:1,b:2};
        var {c,d,a,b}=obj;


         var obj={
        a:1,
        b:{
            a:3
        }
    }
 a:a1 这种是起别名  有相同的属性名时必须起别名
    b=5 这种是附默认值,就是解构后没有赋值的默认为5
 var {a,b:{a:a1,b=5,c:c1=10}}=obj;
    console.log(a,a1)
function fn({a,b}){

    }

    fn({b:10,a:1});

    这样写可以不用考虑参数先后顺序

 function fn({a,b,c=10}={a:1,b:2,c:5}){
        console.log(a,b,c);
    }
    fn({b:5,a:6});//6,5,10
    如果没有给参数时,才会启用后面的对象对前面的参数做解构赋值
    fn();//1,2,5

字符串

判断某个字符是不是在字符串的最前面
str.startsWith("a")
判断某个字符是不是在字符串的最后
str.endsWith("f)
判断num是否长度达到两位,如果不足就在前面补0
num.padStart(2,"0");
判断num是否长度达到两位,如果不足就在后面补0
num.padEnd(2,"0");
将某个字符串重复n次
str.repeat(3)

字符串模板

 var str=`
            <div>
                <span></span>
        `
    
    插值
    var str=`小明今年${age}岁了`

    ul.innerHTML=arr.reduce((v,t)=>v+`<li><a href='http://${t.url}'>${t.site}</a></li>`,"")

Symbol 类型 永不重复

去除魔术字符串,让判断的内容是唯一的

对象的key可以是string和symbol,如果不是这两种会隐式转换为string类型

这里可以将对象中key作为唯一key使用,不会产生冲突
        var a=Symbol(),b=Symbol(),c=Symbol();
        var obj={
            [a]:1,
            [b]:2,
            [c]:3
        }
        console.log(obj[a])
        console.log(obj.a);

set 集合 类似于数组

数组是一种紧密结构,插入删除速度慢,数组会有重复元素,优点就是可以排序,根据某个元素找到前一位和后一位元素内容

Set 插入删除速度快,无序,可以只存储数据不需要有key,不会重复,并且有存储数据总数

这四个都是迭代器类型**

arguments  
HTMLCollection
NodeList
Array
var s=new Set(iterable);
        s.add(4); 添加一个元素放在set中
        s.add(3);
        s.clear(); 清空set集合
        s.delete(2);删除元素
    遍历元素
     s.forEach(t=>{
            console.log(t)
        })

         console.log(s.has(2)) 判断在集合中是否有这个元素

         s.size  集合的长度 等同于数组的length
 遍历迭代器类型
         for(let value of s){
             
         }

WeakSet 弱引用Set 只能存储引用类型,不能遍历

Map 类似于object

Object 松散结构,键值对结构,添加删除速度快,无法排序,只能使用string和symbol作为键,对象没有长度

Map 有长度,key可以是任意类型

var m=new Map()
m.set("a",1); 添加键和值

console.log(m.get("a")) 根据键获取值

m.clear() 清除所有的内容

m.delete("a"); 删除键所对应的值

遍历键和值
m.forEach((value,key)=>{
            console.log(value,key)
        })


console.log( m.has("a")) 判断是否有a这个键

console.log(m.size) 判断map中的存储数量

通过for of遍历
 for(var [key,value] of m){
            console.log(key,value)
        }
只遍历值不遍历键
 for(var value of m.values()){
            console.log(value)
        }
只遍历键不遍历值
        for(var key of m.keys()){
            console.log(key)
        }

WeakMap 弱引用Map 只能使用引用类型作为键和值

posted @ 2022-01-01 12:38  满天星可以嘛  阅读(52)  评论(0编辑  收藏  举报