javascript原生技巧篇

var 有趣的小东西

// 默认的时候
name // ''
window.name //''
var name=22
window.name // '22'
var name=0x12
window.name // 会先转化为数字,再转成字符串  '18'
其他的变量正常化
var age=12
window.age //12

关于禁用的小知识

  button.setAttribute('disabled',true)

取消禁用

   button.removeAttribute('disabled')
  button.disabled=false;
  button.disabled=null;

不能设置成

  button.setAttribute('disabled',false)
因为最后解析也是字符串,也类似true

ES模块

<script type="module" src="fichero.js"></script>

等效于import 'fichero.js'

let-const

我们发现条件声明也是块级作用域

let a=10;
if (true) {
  let a=1
}
console.log(a); //10

const 声明的限制只适用于它指向的变量引用

for循环不能应用于const ,因为迭代的变量是自增的,但是在for-of和for-in 循环是有意义的

for (const item of [1, 2, 3]) {
  
}
for(const key in ({name:'xx', age: 'xxx'})){
  
}

typeof

无论是声明还是未声明,typeof 返回的都是"undefined"

null

undefined 值是由null值派生而来的,因此ECMA-262将他们定义成表面相等

undefined == null

科学计算法

3.14e2
314

e 原来是科学计算法的简写懂了

当后面为负数的时候

314e-2
3.14

值的范围

Number.MAX_VALUE  最小的数值
Number.MIN_VALUE  最大的数值
Infinity  正无穷
-Infinity 负无穷

NaN

NaN用于表示本来要返回数值的操作失败了,在ECMAScript,0,+0,-0相除的返回NaN

0/0  NaN
0/-0  NaN

分子非0值,分母是正负0,则返回Infinity或者-Infinity

5/0   Infinity
1/-0  -Infinity

isNaN

该函数会尝试把它转换为数值,把某些非数值直接转换成数值

把任何不能转换为数值的值都会会导致这个函数返回true

isNaN('20')   false
isNaN('20s')  true  先强转成数值为NaN,则返回true
isNaN('')  先强转成数值,能转0,则返回false

parseInt

parseInt() 函数更专注于字符串是否包含数值模式,字符串最前面的空格会被忽略

如果第一个字符不是数值字符(加号或者减号),则会返回NaN

一次检测每一个字符,直到字符串末尾,碰到非数值就会把后面都忽略

parseInt('       1')    // 1
parseInt('') 		 // NaN
parseInt('s')		// NaN
parseInt('112s')    // 112

toString

toString() 方法 数值,布尔值,对象和字符串值,都有toString方法,但是null和undefined没有toString 方法

position

absolute 元素会脱离文档流,通过指定元素相对最近的非static定义的祖先元素的偏移

我们发现自己的absolute,也会以父级的absolute为基点

<style>
    .head{
       400px;
      height: 400px;
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }
    .head-1{
       100%;
      height: 100%;
      position: absolute;
      top:0;
      left: 0;
      background-color: black;
    }
</style>
<div class="head">
  <div class="head-1"></div>
</div>

css属性查询

<div class="head">
  <div class="head-1"></div>
  <div class="head-r"></div>
</div>
<style>
   .head div[class^=head-]{
       100%;
      height: 100%;
      position: absolute;
      top:0;
      left: 0;
    }
</style>

发现一个基本且有趣的动画

  <style>
    .head {
       400px;
      height: 400px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .head div[class^=head-] {
       100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .head-1 {
      background: linear-gradient(135deg, #77c8c0 0%, #267aac 100%);
    }

    .head-r {
      background: linear-gradient(135deg, #4AD7B8 0%, #f39c12 100%);
      z-index: 10;
      opacity: 0;
      animation: gradient 3s ease-in-out infinite;
    }

    @keyframes gradient {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }
  </style>
<div class="head">
  <div class="head-1"></div>
  <div class="head-r"></div>
</div>

粒子学习

https://www.youtube.com/watch?v=afdHgwn1XCY&feature=youtu.be

parceljs

0配置编写服务, 返回直接在浏览器使用,避免使用webpack

https://parceljs.org/getting_started.html

css 变量优先级

上代码

<style>
    .aaa {
      --box: #c41b1b;
       100px;
      height: 100px;
      border: 2px solid #00230b;
      background-color: var(--box);
    }
    .bbb{
      --box: #2a7faf;
    }
</style>
<div class="aaa"></div>
<div class="aaa bbb"></div>

我们发现第一个是红色第二个是蓝色

执行上下文

变量或函数的上下文决定了它们可以访问哪些数据,以及它们的行为,每个上下文都有一个关联的变量对象,而这个上下文中定义的所有变量和函数都存在于这个对象上

全局上下文是最外层的上下文,也就是我们常说的window对象,通过var定义的全局变量和函数都会成为window对象的属性和方法

使用let和const 顶级声明不会定义在全局上下文中,但在作用域链解析上效果是一样的,上下文在其执行完毕后会被销毁,包括定义在它上面的所有变量和函数

每个函数调用都有自己的上下文,上下文中的代码在执行时候,会创建变量对象的一个作用域链,这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序

全局上下文的变量对象始终是作用域链的最后一个变量对象

for-await-of

普通的数组

async function add() {
    for await (const item of [1,2,3,4]) {
      console.log(item);
    }
  }
  add();

同步迭代

 const iterable = ['a', 'b']
  const nexts=iterable[Symbol.iterator]();
  console.log(nexts.next());
  // {value: "a", done: false}
  console.log(nexts.next());
  // {value: "b", done: false}
  console.log(nexts.next());
  // {value: undefined, done: false}

for-await-of 同步迭代

 async function add() {
    for (const item of await Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)])) {
      console.log(item);
    }
  }
  add();
// 1
// 2
// 3

简化

async function add() {
    const syncIterator=[Promise.resolve('成功1'),Promise.resolve('成功2')];
    for await (const item of syncIterator){
      console.log(item);
    }
  }
  add();

书

https://exploringjs.com/es2018-es2019/toc.html

图片的有趣小知识

<style>
.ccc {
       300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bbb {
      --overflow: 50px;
      background-size: cover;
      background-position: 50% 50%;
       calc(100% - var(--overflow));
      height: calc(100% - var(--overflow));
    }
</style>
<div class="ccc">
    <div class="bbb" style="background-image: url(img/2.jpg);"></div>
</div>

我们可以保证图片宽高100%的情况下,给固定的尺寸当成空隙

怎么拿到css变量

我首先想到了DOM.getBoundingClientRect()

哈哈哈却发现不行,这个api是拿到dom的css属性信息,但是拿不到css变量

突然想起我们学过getComputedStyle(DOM).getPropertyValue('--prop') 可以拿到属性