最近遇见的一些问题

171 阅读1分钟

1.从数组中操作函数

 同时过滤几个无序的元素
 arr.tagNames = arr.filter(item => item !== '1'|| item !== '2')
 过滤一些值
 arr.tagNames = arr.filter(item => item === '1')
 
 检查是否有一个值等于一个数
 arr.tagNames = arr.some(item => item === '1')
 
 检查是否每个值都等于一个数
 arr.tagNames = arr.every(item => item === '1')
 
 数组扁平化
 Infinity 相当于最深层级数组
 let arr = [1,2,[3,[4,[5]]]] 
 const reasut = arr.flat()  
 console.log(reasut) 
 // [1, 2, 3, [4,[5]]]

2.css

html经常忽略空格

(1)white-space

属性说明
normal以浏览器默认解析。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。

(2)word-break

break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

div 文本分列

<div class="parent">
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
</div>

.parent{
    column-count:3;  // 文本分成三列
    column-gap:40px; // 列之间距离
    .child{
       break-inside: avoid; 
    }
}
   

3.url加密

用url传递参数的时候,一些标点符号等经常无法解析,所以需要对url进行转化

encodeURIComponent 对url参数进行编码
btoa  base64编码


decodeURIComponent 进行解码
atob base64解码

4.合并数组

const a = [1,2,3]; 
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]