Set
WeakSet
Map
WeakMap
Object.assign
console.log(Object.assign([1, 2, 3], [4, 5]))
//把数组视为属性民0,1,2的对象,所以后面的[4,5]覆盖了前面的1,2
//[4,5,4]
为对象添加方法
function SomeClass() {
}
Object.assign(SomeClass.prototype, {
add(arg1, arg2) {
return arg1 + arg2
},
multi(arg1, arg2) {
return arg1 - arg2
}
})
let some = new SomeClass()
console.log(some.add(1, 2))
console.log(some.multi(1, 2))
合并对象
let a=[{name:'zhangasn'},{age:12}]
console.log(Object.assign({}, ...a))
// { name: 'zhangasn', age: 12 }
Symbol
const sym = Symbol('foo');
console.log(sym.description) //'foo'
作为属性名Symbol
let mySymbol = Symbol()
let a = {}
a[mySymbol] = 'hello';
console.log(a[mySymbol]) //hello
let b={[mySymbol]:'hello'}
console.log(b[mySymbol]) //hello
let c=Object.defineProperty({},mySymbol,{value:'hello'})
console.log(c[mySymbol])//hello
注意,Symbol值作为对象属性名时,不能用点运算符
const mySymbol = Symbol()
const a = {}
a.mySymbol = 'hello'
console.log(a['mySymbol']) //"hello"
a[mySymbol]//这个是访问不到的
const obj = {}
let a = Symbol('a')
let b = Symbol('b')
obj[a] = 'hello'
obj[b] = 'World'
let cArr = Reflect.ownKeys(obj)
for (let item of cArr) {
console.log(obj[item])
//hello
// World
}
Symbol.for()
Symbol.iterator
判断非空isEmpty
const isEmpty=val=>val===null||!(Object.keys(val)||val).length
判断一个字符串是否有重复的字符
//采用桶排序的思想
const isData = str => {
let flag = Array.from({ length: 128 }, v => 0)
for (let i = 0; i < str.length; i++) {
let c = str.charCodeAt(i)
if (flag[c] > 0) {
return false
} else {
flag[c]++
}
}
return true
}
console.log(isData('abc'))
判断两个字符集是否相同
const equls = (s1, s2) => {
const map = new Map();
for (let i = 0; i < s1.length; i++) {
if (map.get(s1[i]) == null) {
map.set(s1[i], 1)
}
}
for (let i = 0; i < s2.length; i++) {
if (map.get(s2[i]) === null) {
return false
}
}
return true
}
判断是否是旋转词
const joint = (str, s1) => {
let a = ''
let b = [];
for (let i = 0; i < str.length; i++) {
if (i == 0) {
a = str.slice(i)
} else {
a = str.slice(i) + str.slice(0, i)
}
b.push(a)
}
return b.indexOf(s1) > -1 ? true : false
}
String
String.prototype.charAt(index) 0<=index<=length-1 返回特定位置的字符
String.prototype.charCodeAt(index) 返回给定的字符的Unicode值
String.prototype.concat() 连接两个字符串文本,返回新的字符串
String.prototype.includes() 判断字符串是否包含
endsWith() 判断当前字符串是否是以另外一个给定的子字符串'结尾' Boolean
startsWith() '开头' Boolean
String.localeCompare() 'abcsbda'.split('').sort((a, b) => a.localeCompare(b))
String.prototype.padEnd() 两个参数,第一个数字符串的最大长度,第一个参数是添加的字符串,长度不能超过max.length
repeat() 重复的次数
replace() 替换
slice()
比较
| 两个值类型进行比较 | 直接比较数据在序列中的大小 |
| 值类型与引用类型比较 | 将引用类型的数据转换为与值类型数据相同的数据 |
| 两个引用类型比较 | 无意义,总是返回false |
console.log('b' > 'a') //true
for--of的妙用
let arr = {
name: 'zhangsan',
age: 12,
aa: 'cc'
}
for (let [key, value] of Object.entries(arr)) {
console.log(key + '===' + value)
}
对象与数组互转
保镖模式
function transformData(rawData) {
// 检查没有数据的情况
if (!rawData) {
return [];
}
// 具体检查的情况
if (rawData.length == 1) {
return [];
}
// 具体代码
return rawData.map((item) => item);
}
不用switch
const contentTypes = {
post: () => console.log("creating a post..."),
video: () => console.log("creatinga video..."),
default: () => console.log('unrecognized content type')
};
const createType =(item)=> contentTypes[item] || contentTypes['default'];
createType('post')()
CSS篇
width:auto 和height:auto
width,height的默认值都是auto
对于块级元素,width:auto 自动撑满一行
对于内联元素,width:auto 则呈现出包裹性,既由子元素的宽度决定
无论内联元素还是会计元素,height:auto 都是呈现包裹性,即高度由子级元素撑开。但是父元素设置height: auto会导致子元素height: 100%百分比失效。
css的属性非常有意思，正常流下，如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。这就是流体布局的根本所在。
margin:auto 水平垂直居中
实现justify-content: space-between
<div class="ddd">
<div class="ccc"></div>
<div class="ccc"></div>
</div>
<style>
.ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
/*justify-content: space-between;*/
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
margin:0 auto;
}
.ccc:first-child{
margin-right: 0;
}
.ccc:last-child{
margin-left:0;
}
}
</style>
实现space-around
.ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
/*justify-content: space-around;*/
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
margin:0 auto;
}
}
单个元素右浮动
<div class="ddd">
<div class="ccc"></div>
<div class="ccc"></div>
<div class="ccc"></div>
</div>
.ddd{
width: 900px;
height: 500px;
border:1px solid #2c3e50;
display:flex;
.ccc{
width: 100px;
height: 100px;
background-color: darkblue;
}
.ccc:last-child{
margin-left:auto;
}
}
垂直方向居中
父 {
display: flex;
flex-direction:column;
}
子{
margin:auto 0;
}
例如
<div class="g-container">
<p>这是第一行文案</p>
<p>这是第二行文案</p>
<p class="aaa">1、剩余多行文案需要垂直居中剩余空间</p>
<p class="aaa">2、剩余多行文案需要垂直居中剩余空间</p>
<p>这是最后一行文案</p>
</div>
.g-container {
width: 600px;
height: 600px;
border:2px solid #2c3e50;
display: flex;
flex-direction:column;
}
.aaa{
margin:auto 0;
}
css 权重
| 10000 | !important（!important并不是选择器，但是权重却是最高的） |
| 1000 | 内联样式：style="" |
| 100 | ID选择器：#idName{...} |
| 10 | 类、伪类、属性选择器：.className{...} / :hover{...} / [type="text"] ={...} |
| 1 | 标签、伪元素选择器：div{...} / :after{...} |
| 0 | 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~） |
body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}
(body+div+span=3) + (#god+.dad+.son=120) = 123
(body+span=2) + (#god+#test=200) = 202
content
css中的content属性主要用伪元素:after,:before中,其他一般不用
padding
注意点
background-clip 设置元素的背景,是否延伸到边框下面
//三道杠
.icon1{
box-sizing:border-box;
width: 20px;
height: 30px;
border-top:2px solid #2c3e50;
border-bottom:2px solid #2c3e50;
padding:2px 0;
background-color: #2c3e50;
background-clip:content-box;//内容裁剪
}
//圆环
.icon1{
box-sizing:border-box;
width: 20px;
height: 20px;
border:2px solid #2c3e50;
padding:4px;
border-radius:50%;
background-color: #2c3e50;
background-clip:content-box;//内容裁剪
}