javascript原生技巧篇

this 上下文

const book = {
  title: 'Brave New World',
  author: 'Aldous Huxley',
}

function summary() {
  console.log(`${this.title} was written by ${this.author}.`)
}

summary.apply(book)
summary.call(book)
summary.bind(book)()

=====
console.log([].filter.call('abde',(v,i)=>{
  return i>2
}));
// [ 'e' ]
console.log([].map.call('abcd',(v,i)=>i));
// [ 0, 1, 2, 3 ]
[].slice.call('sss')
//  ["s", "s", "s"]

只能说,只有从内部源码的实现才找到原因,直接上实例应该能看懂,

滚动的进度条

<div id="progressBar"></div>
<div id="progressBarContainer"></div>
<div style='height:200vh'></div>

<style>
// 清空滚动的颜色    
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

#progressBarContainer {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}


#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  height: 0;
  opacity: 0;
}
</style>
<script>
const progressBar = document.querySelector("#progressBar");
// 内容的高度-视口的高度=能滚动的总高度
let totalPageHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = () => {
  // 滚动的多少高度/能滚动的总高度
  let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100;
  progressBar.style.height = `${newProgressHeight}%`;
  progressBar.style.opacity = `${newProgressHeight}%`;
};
</script>

rxjs

defaultIfEmpty

4s 后没发送值,就发送默认的空值

 fromEvent<KeyboardEvent>(document.querySelector('#ccc'),'keydown').pipe(
      map(({code})=>code),
      takeUntil(timer(4000))
    ).pipe(
      defaultIfEmpty('默认')
    ).subscribe(console.log)

css 变量

.icon {
  --size: 32px;
  width: var(--size);
  height: var(--size);
}

.rect {
  --size: 186px; /* [1] */
  --aspect-ratio: 2.35; /* [2] */
  width: var(--size); /* [3] */
  height: calc(var(--size) / var(--aspect-ratio)); /* [4] */
}

Location.reload重新刷新

window.location.reload(true)
强制cog浏览器加载页面
window.location.reload()
不传参,浏览器可能从缓存中读取页面

逻辑分配符

?? 是 null或者 undefined

null 或者 undefined
x??=y
等价于
x??(x=y)
=========
null?? 3 // 3
let x=null;
x??=3;
// x

&& 不是 0 ,'', null, undefined, NaN

1&&2
// 2
0&&2
// 0
let x=3;
x&&=4;
//x=4

||

跟上面相反
0||1
//1 
''||2
// 2
let x=NaN;
x||=3;
// 3;

ECMAScript

ECMAScript 标准是 ECMA-262, 责任人是 ECMA国际技术委员会(TC39) 成员

ECMA-402 就是 ECMAScript国际化API规范

有趣的点

在浏览器中控制台中

var name=42
console.log(typeof name) // 'string'

在浏览器中,全局对象是页面的窗口对象,自己的定义的name不能被全局变量隐藏,他的值还是一个字符串

所以let 和concat 就是为了解决这类问题

const

const obj={name: 'xxx'};
obj={}; // 报错了
因为改变了引入指向的地址

删除对象的属性

深入理解的下
删除对象的属性还是用 delete 好一些
效率高

while ,do-while

块有自己的环境对象,因为它没有for的初始化表达式
for (let i = 0; i < 4; i++) {
  console.log(i);
}
// 每次循环会创造一个新的作用域
但是while没有,可以知道while没有对let的重新定义
let a=1;
while (a < 4) {
  setTimeout(()=>{
    console.log(a);
  })
  ++a;
}
我们会发现打印的一直是4
如果这种问题,我们的解决方式也就是添加let,形成崭新的作用域变量
let a=1;
while (a < 4) {
  let b=a;
  setTimeout(()=>{
    console.log(b); // 1,2,3
  })
  ++a;
}

右操作符又叫逗号操作符

let a=10,12
a //12

箭头函数没有原型

默认参数

function add(a, b = 1, c) {

}

console.log(add.length);// 1
在计算长度的时候不计算默认值的参数, 但是它阻止了对后续参数的计算

块的函数声明

function simple(){
  function add1(){
    console.log(1);
    return 1
  }
}
// 块中的函数声明
simple()
add1();// 报错...

应该改成

function simple() {
  const a = function add1() {
    console.log(1);
    return 1
  }
}

simple()

get,set

class Colors {
  constructor(r = 0, g = 0, b = 0) {
    this.r = r;
    this.g = g;
    this.b = b;
  }

  get rgb() {
    return `rgb${this.r},${this.g},${this.b}`
  }

  set rgb(value) {
    this.r=value
  }
    // 静态函数
  static [6*5](){
    console.log('xxx');
  }
}

let a = new Colors();
a.rgb=10;
console.log(a.rgb);
// rgb10,0,0

let count = 0;
let obj = {
  [count++]: count++,
  [count++]: count++,
};
console.log(obj);
// { '0': 1, '2': 3 }

const add = (first, two) => ({first, two});
console.log(add(10, 20));
// { first: 10, two: 20 }

正则

console.log('   s   skkk  ddds     '.trim().split(/^|\s+/));
// [ 's', 'skkk', 'ddds' ]

小萌新疑问| 干嘛用的

在MDN RegExp 解释是 用于带有多个判断

let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'
let lines = text.split(/\r\n|\r|\n/)
// [ 'Some text', 'And some more', 'And yet', 'This is the end' ]

这个例子大概懂啦吧