js高级：es6es11第五天

 基础模板字符串的使用

利用``来创建字符串，使用${}插入

标签模板字符串

let name = &＃39;aaa&＃39;let age = 14function fn(...args){console.log(args);}fn`my name is ${name},age is ${age}`

第一个是普通的数组，放入被分割之后的字符串，后面的参数就是调用的字符串

展开运算符

const aaa = [123,&＃39;ooo&＃39;,234,&＃39;oio&＃39;]const bbb = &＃39;hello&＃39;function foo(a,b,...c){console.log(a,b,c);}foo(...aaa)foo(...bbb)


也就是说...可以将字符串或者数组拆开

对于对象，在构建对象字面量的时候可以使用，但是不能像上面那样传入函数

const obj = {name : 111,age :12}function foo(a,b,...c){console.log(a,b,c);}//foo(...obj)这是不允许的const obj1 ={...obj,sex:1}console.log(obj1);

 数字表示

//二进制console.log(0b100);//8进制console.log(0o100);//16进制console.log(0x100);

输出还是按照十进制来的

长数字，用下划线分割

const bignum = 100_000_212_221console.log(bignum);

Symbol

也是基本数据类型

 比如

const obj = {fn:111}function foo(obj){obj.fn = function(){}}foo(obj)


当我带入函数时，我其实是想添加新的属性fn，但是我不能确定原本的obj中是否有fn属性

symbol就是为了解决这种问题，为了创造一个独一无二的值

symbol可以作为对象的key

const ss = Symbol()const obj1 = {ss:111,[ss]:1222}console.log(obj1);


 这样是不会冲突的

之前的函数可以改为：

const obj = {fn:111}function foo(obj){const fn = Symbolobj[fn] = function(){}}foo(obj)console.log(obj);

这样就不会冲突了

得到对象中的symbol

const s1 = Symbol()const obj = {age :111,[s1]:222,name :000}console.log(Object.keys(obj));


只会得到age  name

可以采用下面的方法得到symbol里面的值

const s1 = Symbol()const s2 = Symbol()const obj = {age :111,[s1]:222,[s2]:2122,name :000}console.log(Object.getOwnPropertySymbols(obj));for(let i of Object.getOwnPropertySymbols(obj)){console.log(i);//只能输出symbol，不能输出s1 s2console.log(obj[i]);// 222 2122}


symbol在创建的时候可以传入description

const s3 = Symbol(&＃39;ccc&＃39;)console.log(s3.description);

可以利用这个创造两个相同的symbol

const s3 = Symbol(&＃39;ccc&＃39;)console.log(s3.description); const s4 =Symbol.for(s3.description)const s5 =Symbol.for(s3.description)console.log(s4 === s5);//true

这个用的不多 很特殊的情况才会用

可以获取描述

console.log(Symbol.keyFor(s4));//ccc

Set

这两个都是新的数据结构

set是集合

 基本调用

const s = new Set()s.add(123)s.add(2828)s.add(2828)console.log(s);//123,2828

 数组去重

const old = [123,123,222,222,333,333]//数组去重const new1 =new Set(old)const newarray = Array.from(new1)console.log(newarray);


其他方法 

 WeakSet

weakset只能放对象类型，对所有对象的引用都是弱引用

也就是时候其引用的对象 有可能在后期被销毁，所以不能遍历

这个用的不多

Map

表示一种映射关系，跟对象很类似 

如果我们想要使用对象作为key，例如

const ss = {name :12}const ss1 = {age:22}const obj ={[ss]:2222,[ss1]:2121}console.log(obj);

 但是这样不是将对象作为的key，只是把对象转换为了字符串，所以最后打印结果只有一个映射关系

使用map就可以

const mapp = new Map()mapp.set(ss,&＃39;aaaa&＃39;)mapp.set(ss1,2322)console.log(mapp);

 WeakMap

key只能为对象对所有对象的引用都是弱引用，跟weakset类似

字符串填充

padstart(a,b)，向前填充，一共长度为a，填充为b

 padend向后填充

const ss = &＃39;1&＃39;.padStart(3,&＃39;0&＃39;)const ss1 = &＃39;1&＃39;.padEnd(3,&＃39;0&＃39;)console.log(ss);//001console.log(ss1);//100

应用，敏感信息遮盖

const ss = &＃39;12345678901234&＃39;const slicess = ss.slice(-4);console.log(slicess.padStart(ss.length,&＃39;*&＃39;));

尾部逗号

就是可以在参数末尾加逗号

function fn(a,b,){}

flat

 例子

const ss = [1,2,3,4,[2,3],[2,4],[[2,3],[6,7]]]console.log(ss.flat(1));//[1, 2, 3, 4, 2, 3, 2, 4, Array(2), Array(2)]console.log(ss.flat(2));//[1, 2, 3, 4, 2, 3, 2, 4, 2, 3, 6, 7]

将数组在n维上平坦化

flatMap() 

const aa = [&＃39;aaa bbb ccc&＃39;,&＃39;ddd eee fff&＃39;,&＃39;ggg hhh mmm&＃39;]const bb = aa.map(item =>item.split(&＃39; &＃39;));const cc = bb.flat(1)console.log(cc);//[&＃39;aaa&＃39;, &＃39;bbb&＃39;, &＃39;ccc&＃39;, &＃39;ddd&＃39;, &＃39;eee&＃39;, &＃39;fff&＃39;, &＃39;ggg&＃39;, &＃39;hhh&＃39;, &＃39;mmm&＃39;]const dd = aa.flatMap(item =>item.split(&＃39; &＃39;))console.log(dd);//和上面一样

 entries

将对象转换为数组

const obj = {name:123,age:222}const sss =Object.entries(obj)//[[&＃39;name&＃39;, 123],[&＃39;age&＃39;, 222]]const sss1 =Object.fromEntries(sss)

bigint

在很大的值后面加n  以确保其准确性

console.log(Number.MAX_SAFE_INTEGER);//9007199254740991const bigg = 9007199254740996nconsole.log(bigg);//9007199254740996n

但是如果要运算，都必须加n

console.log(bigg-100000n)

空值合并运算符

obj?.fn?.run()

​​​​​​​

function fn(aa){aa = aa??&＃39;默认&＃39;console.log(aa);}fn()//默认fn(null)//默认fn(0)//0


当aa是未定义undefined或者null，就赋予 默认，否则保持原值

可选链

对于

const obj ={fn:{run:function(){console.log(111);}}}if(obj.fn && obj.fn.run){obj.fn.run()}


加if判断的原因是，经常这个obj有没有那些属性和方法我们是不知道的，为了防止报错就用if判断一下

现在可以更简洁

obj?.fn?.run?.()