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

2024-03-22 09:32:10

箭头函数

如果函数中只有一句话，并且是使用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 只能使用引用类型作为键和值

码农公寓