css 尺寸的小技巧
1vw等于1/100的视口宽度
1vh等于1/100的视口高度
vh和vw依据于视口的高度和宽度
vmax vmin 可以解决横屏的问题
vmin vw和vh中较小的值
vmax vw和vh较大的值
width:100vmin;
有意思的滤镜
将HTML DOM元素转换为交互式纹理平面
https://www.curtainsjs.com/
离开页面的时候删去 function removePlanes() { // remove all planes for(var i = 0; i < planes.length; i++) { webGLCurtain.removePlane(planes[i]); } // reset our arrays planes = []; }
渐变函数 radial-gradient
创建一个图片,从原点辐射开,可以有两个或者多个颜色之前的渐变组成
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle, #542482, black); }
可扩展的媒体播放器
http://clappr.io/
全景图
https://pchen66.github.io/Panolens/#Example
忽略点的css小技巧
内容会被修剪,其余内容不可见
overflow:hidden
内容会被修剪,浏览器会出现滚动条查看其他内容
overflow:scroll
如果内容被修剪,就会显示滚动条
overflow:auto
一个图片占位图的地址
默认效果http://temp.im/ + 尺寸
http://temp.im/640x260
背景色 http://temp.im/ + 尺寸 + 背景色
http://temp.im/640x260/ccc
字体颜色 http://temp.im/ + 尺寸 + 背景色 +字体颜色
http://temp.im/640x260/ff5a5f/fff
解决reduce在Typescript报错问题
([] as any[]).reduce(() => 0, 0); // any
([] as unknown[]).reduce(() => 0, 0); // unknown
([] as never[]).reduce(() => 0, 0); // number
比较两个值
'two'>'three'
//true 'tw'的字母顺序大于'th'
分号问题
第一个分号可以省略
let a=3
let b=4
如果是同一行,第一行分号必须的
let a=3;let b=4
let a=3,b=4;
注意并不会每一行结束当成分号
let a
a
=
3
console.log(a);//3
最后解释成
let a;a=3;console.log(a)
function add(x, y) {
return x+y
}
let y=10+add
(1,2);
console.log(y);//13
如果一个语句已
,[+-可能是前面语句的延续,虽然平常比较小件,但是已([并不少见所以我们会见过人喜欢在任何语句开头加上一个分号
let x=0 ;[x,x+1,x+2].forEach(console.log)// 这是一种防御模式在return,throw,yield,break,continue语句,通常是独立的,所以后面加上分隔符 const add = () => { return true; }; console.log(add());// undefined 实际是 return ;true;
数字文字中的分隔符
let a=1000_000_000
// 1000000000
let b=0.123_456_789
// 123456789
Number某些不常用,但是项目可能遇到的属性
// 是一个整数,-2**53< x <2**53
console.log(Number.isSafeInteger(12));// true
console.log(Number.isSafeInteger(Infinity));// false
//是一个整数
console.log(Number.isInteger(12)); //true
console.log(Number.isInteger(12.12));//false
//是一个有限的数
console.log(Number.isFinite(12));//true
console.log(Number.isFinite(Infinity));//false
BigInt 内置对象
提供一种大于
2**53-1的整数,typeof 1n === 'bigint'; // true 当使用BigInt时,带小数运算会被取整 5n/2n //2n 0n===0 //false 0n==0 //true Number和BigInt可以进行比较 1n<2//true 当做条件判断的,跟Number类似,可以通过Boolean转化的
String.raw
返回文本在反斜杠没有任何处理反斜杠转义
`\n`.length
1
String.raw`\n`.length
解构
const {min} = Math;
console.log(min(1, 3,-1));// -1
const {min: m} = Math;
console.log(m(1, -2, 12));// -2
属性访问
let a={b:null}
a.b?.c.d //undefined
let a={b:{}}
a.b?.c?.d // undefined
function square(x, log) {
if (log) {// 如果有菜执行
log(x);
}
return x.age * 100;
}
function square1(x, log) {
log?.(x);// 如果是函数就执行
return x ** x;
}
对象创建表达式
创建一个新对象并调用一个函数来初始化改对象的属性
new Object()
new Point(2,3)
如果在对象对象的时候没有传递参数给构造函数,则括号可以省略
但是注意一点没有调用this上下文;
new Date;
new Object
运算顺序
w=x=y=z;
q=a?b:c?d:e?f:g;
-------
w=(x=(y=z));
q=a?b:(c?d:(e?f:g));
y=a**(b**c)
求幂,一元,赋值和三元条件具有从右到左
'11'<'3' //true
为什么是true,因为进行的字符串比较比较
'abc'<'acc'// 比较的是 ab ac b??
undefined??11
// 11
null??22
// 22
好像只有这个作用
发现一个void使用的点
第一个是undefined
void 0
第二个是刚刚发现应用于箭头函数上
let i = 1;
const add = () => void i++;
add();// 打印的话会返回undefined
console.log(i);
//发现一个for循环有趣的写法
let a = [];
for (let i = 0; i < 10; a[i++] = i) ;
console.log(a);
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
不带括号
if(x==null)
x='123'
一行显示
if(x==null) x='123'
valueOf和toString的复习
let point = {
x: 1,
y: 2,
valueOf: function () {
return this.x + this.y
}
};
let b={
x: 10,
y: 4,
toString: function () {
return this.x + this.y
}
};
let c={
x:12,
y:15,
toString(){
return 1
},
valueOf(){
return 2
}
};
console.log(+point); // 3
console.log(+b);// 14
console.log(+c);// 2 ,valueOf的优先级大于toString
--------
解构
let x=1,y=2;
let o={x, y};
console.log(o);
// { x: 1, y: 2 }
----
function add() {
return 'p2'
}
let p = {
[add()]: 32
};
console.log(p);
// { p2: 32 }
---
let b = [1, 2, 3, 4];
delete b[3];
console.log(3 in b);// false
delete 只是删除对象的属性,不影响数组长度
----
const rect=(width,height=width*2)=>({width, height});
console.log(rect(10, 30));
// { width: 10, height: 30 }
console.log(rect(10));
// { width: 10, height: 20 }
Function 忽略的点
方法调用和函数调用在一个重要的不同:调用上下文
let a={ b:1, add(){ this.c=3 } } console.log(a.c) // undefined a.add(); console.log(a.c) // 3 console.log(a) // { b: 1, add: [Function: add], c: 3 } ============================== let a = { b: 1, add(m) { this.b += m return this }, demo(m) { this.b -= m return this } } a.add(2).demo(3) // 1+2-3 console.log(a.b) // 0 ========== let a = { b: 1, add() { let self = this console.log(this === a)//true fn() function fn() { console.log(this === a) // false 这里的this指向window console.log(self === a) // true 这个还是本身 } } } a.add(); ============= function add(){ return {age:12} // 写惯了箭头函数,注意这样写的时候不需要带括号 } const add1=()=>({age: 12}); ============= const f = ([a, b, ...c], ...d) => [a, b, ...d, ...c] console.log(f([1, 2, 3, 4], 5, 6)) // [ 1, 2, 5, 6, 3, 4 ] ------------------- x,y变 z默认 w固定 变化倍数2倍 const vector = ({x, y, z = 0, ...props}, scale) => { return {x: x * scale, y: y * scale, z: z * scale, ...props} } console.log(vector({x: 1, y: 2, w: 3}, 2)) // { x: 2, y: 4, z: 0, w: 3 } ------------------- let a = [x => x + 10, 12] console.log(a[0](10))// 20 ========= const add = () => add.count++ add.count = 0; console.log(add()) //0 console.log(add()) //1 console.log(add()) //2 console.log(add.count)// 3 本质上是闭包 const unique = (function () { let count = 0 return () => { return count++ } })() console.log(unique()) //0 console.log(unique()) //1 console.log(unique()) //2 ===== const counter = () => { let n = 0 return { add() { return n++ }, reset() { n = 0 }, get() { return n } } } let c = counter() c.add()//1 c.add()//2 c.add()//3 c.add()//4 console.log(c.get())//4 c.reset()//清空 console.log(c.get())//0