javascript权威指南第七版读书笔记(一)

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<c  所以为true

??

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