小知识---

1、yarn与npm

yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn 是为了弥补 npm 的一些缺陷而出现的。

• npm与yarn的区别

  • 并行安装: yarn安装包会同时执行多个任务，npm 需等待上一个任务安装完成才能运行下一个任务
  • 离线模式: 如果你已经安装过一个包，用 yarn 再次安装会从缓存中获取，而 npm 会从网络下载
  • 版本锁定: yarn 默认有一个 yarn.lock 文件锁定版本，保证环境统一，而 npm 默认从网络下载最新的最稳定的，版本锁定可以解决包之间版本不兼容问题，npm 也可以通过命令实现版本锁定
  • 更简洁的输出: yarn安装包时输出的信息比较少, npm输出信息冗余

• yarn安装

  npm install -g yarn
  

• 常用命令对比

  npm	yarn
  npm install	yarn
  npm install 模块名 --save-dev	yarn add 模块名 --dev
  npm run serve	yarn serve
  npm run build	yarn build

2、数组方法Splice()

arr.splice(i)

• i 为非负整数：删除数组中索引为 i 及 i 之后位置上所有的元素
• i 为负整数：索引从后往前计算，最后一位索引是 -1，倒数第二位是 -2，依次类推。删除 i 及 i 之后的所有元素。

例子

// 删除数组中最后三个元素
var a = [1, 2, 3, 4, 5]
a.splice(-3)
console.log(a) // [1, 2]
// 清空数组
var a = [1, 2, 3, 4, 5]
a.splice(0) // 或 a.splice(-5)
console.log(a) // []

arr.splice(i, j)

表示 从i开始删除j个元素

案例

// 删除数组中开头的 3 个元素
var a = [1, 2, 3, 4, 5]
a.splice(0, 3)
console.log(a) // [4, 5]

arr.splice(i, j, e1, e2, …)

表示从索引为 i 位置开始删除 j 个元素，然后在从 i 位置添加 e1,e2,...，返回删除的元素，原地修改。

3、数组 slice()

使用的时候很容易混淆 splice 和 slice 方法，记住 splice 方法只能用于数组，而 slice 方法可以用于数组和字符串，表示 “切片”。

arr.slice(i, j)
// 或 str.slice(i, j)

arr.slice(i, j) 表示将数组/字符串从 [i, j)（分界是前开后闭）切片，然后返回取出的片段，非原地操作，不改变原数组/字符串。

案例：

// 取出字符串剔除了首个和末尾的子串：
var str = 'abcdef'
var sub = str.slice(1, -1)
console.log(sub) // 'bcde'
// slice 也能作用于数组：
var arr = [1, 2, 3, 4, 5]
var sub = arr.slice(1, 4)
console.log(sub) // [2, 3, 4]

4、reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值

arr.reduce(function(prev,cur,index,arr){
...
}, init);

• prev 必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值，或者初始值 init;
• cur 必需。表示当前正在处理的数组元素；
• index 可选。表示当前正在处理的数组元素的索引，若提供 init 值，则起始索引为- 0，否则起始索引为1；
• arr 可选。表示原数组；
• init 可选。表示初始值。

举例：

• 没有设置函数的初始迭代值

  const arr = [1,2,3,4,5];
  const sum = arr.reduce(function(prev,cur,index,arr){
      console.log(prev,cur,index);
      return prev + cur;
  });
  console.log('arr:',arr,'sum:',sum);
  

• 设置了函数的初始迭代值

  const arr = [1,2,3,4,5];
  const sum = arr.reduce((prev,cur,index,arr) => {
      console.log(prev,cur,index);
      return prev + cur;
  },5); 
  console.log('arr:',arr,'sum:',sum);
  

5、定位与float

==文档流：==处于网页的最底层，表示一个页面的位置

我们创建的元素默认都处于文档流当中

float

• none - 默认值
• left - 元素向页面的左侧浮动
• right - 元素向页面的右侧浮动

==注意：==使用float可以脱离文档流。

position

relative

• 相对定位是相对于元素在文档流中原来的位置进行定位。
• 相对定位不会脱离文档流
• 相对定位会使元素提升一个层级
• 相对定位不会改变元素的性质，块还是块，内联还是内联。

absolute

• 开启绝对定位，会使元素脱离文档流。
• 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的
  • 开启了子元素的绝对定位都会同时开启父元素的相对定位（父元素开启相对定位，子元素相对于父元素进行绝对定位）
  • 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
• 绝对定位会使元素提升一个层级。
• 绝对定位会改变元素的性质 内联元素会变成块元素，块元素的宽度和高度默认都被内容撑开

6、contenteditable属性

contenteditable 属性是 HTML 新增的

7、Js之 ! 判断空值

1、js可以将变量转换为Boolean类型，null、undefined和空字符串取反都为false，其余都为true

2、!!做类型判断

if(!!a){
    //a有内容才执行的代码...  
}

a是有实际含义的变量才执行方法，否则变量null，undefined和’'空串都不会执行以下代码。

8、Js的同步异步执行顺序

js代码执行顺序是自上而下的。同步代码就正常顺序执行，异步代码会先存在队列里，在同步代码执行完成后在执行。

同步任务没有优先级区分，但是异步任务是分微任务和宏任务的

微任务(例)： process.nextTick ，promise ，MutationObserver函数

宏任务(例)：script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI renderingspa

async,await:是建立在 promise 的基础上的 ，一般成对出现。当一个函数前加了async，就表示这个函数里很大可能有异步函数，而在第一个await表达式出现之前，异步函数内部的代码都是按照同步方式执行的。await所在表达式是同步的。

9、input原生事件

1.onfocus 当input 获取到焦点时触发

2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。

3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。

4.onkeydown 按下按键时的事件触发，

5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过

6.onclick 主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件

7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中

8.oninput 当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）