博文的跑路笔记

HTML CSS

Flex布局

使用flex布局

1. 容器

   .box {
     display: flex;
   }
   

2. 行内元素

   .box {
     display: inline-flex;
   }
   

flex布局后，float、vertical-align、clear失效。

容器属性

1. flex-direction：主轴方向

   属性值

   • row：子元素起点在左，左到右。
   • row-reverse：起点在右，右到左。
   • column：起点在上，上到下。
   • column-reverse

2. flex-wrap：换行

   • nowarp：不换行，缩小各子元素宽度。
   • warp：换行。
   • warp-reverse：换行，但从下至上，原第一排在最下方。

3. flex-flow：flex-direction和flex-wrap缩写。

   flex-flow: column nowarp;
   

4. justify-content：项目在主轴上对齐方式

   • flex-start：左对齐，默认值。
   • flex-end：右对齐。
   • center：居中。
   • space-between：两端对齐，项目间间隔相等。
   • space-around：项目间间隔相等。

5. align-items：项目在交叉轴的对齐方式

   • flex-start
   • flex-end
   • center
   • base-line：和项目第一行文字基线对齐。
   • strench：默认值，没有高度将撑满容器。

6. align-content：多根轴线的对齐方式

   • flex-start：左对齐，默认值。
   • flex-end：右对齐。
   • center：居中。
   • space-between：两端对齐，项目间间隔相等。
   • space-around：项目间间隔相等。
   • stretch

项目属性

1. order：项目排列顺序，默认0，越小越靠前。

2. flex-grow：项目放大比例，默认0。

   如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3. flex-shrink：项目缩小比例，默认1。

   所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4. flex-basis：项目占据的主轴空间，默认为auto即项目原本大小。

5. flex：flex-grow、flex-shrink、flex-basis三者合一。

   flex:1代表flex-grow:1、flex-shrink:1、flex-basis:0%，项目将自动平分剩余空间。

6. align-self：覆盖align-items属性，允许单个项目在交叉轴上有不一样的对齐方式。

Canvas

线条

• moveTo(x,y)：起点
• lineTo(x,y)：终点
• stroke()：绘制

矩形

fillRect(*x,y,width,height)

参数：

• x、y：左上角坐标
• width、height：宽高

圆

• beginPath()

  开始一条路径，或重置当前的路径。

• arc(x, y, r, startAngle, endAngle)

  参数：

  • x、y：圆中心坐标
  • r：圆半径
  • startAngle、endAngle：起始角、结束角。

• stroke()

文本

• font：设置属性

  ctx.font = '30px Arail'
  

• fillText(str, x, y)：绘制实心文本。

• strokeText(str, x, y)：绘制空心文本。

图像

drawImage(image,x,y*)

注意需图片加载出来onload后再调用。

渐变

• 线性渐变

  createLinearGradient(x,y,x1,y1)

• 圆/径向渐变

  createRadialGradient(x,y,r,x1,y1,r1)

• 颜色停止

  addColorStop(location, color)

const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

ctx.fillStyle = grd;
ctx.fillRect(50, 125, 150, 75);

水印实战

原理：生成单个canvas水印，放到大div中，此大div设置absolute定位、高z-index、background-img:url()，依靠背景图片默认repeat。

css解读

1. position: absolute：将元素从文档流拖出来，对其最接近的一个具有定位属性的父定位包含框进行绝对定位。如果不存在这样的定位包含框，则相对于浏览器窗口。
2. pointer-events: none：该元素永远不会成为鼠标事件的 target。当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素。

/*
 * @Author: cbw
 * @Date: 2022-09-23 16:21:05
 * @LastEditors: cbw
 * @LastEditTime: 2022-09-26 11:22:07
 * @Description:
 */
class WaterMark {
  #canvasOptions; // canvas默认配置
  #canvasIndividualOptions; //canvas个性化配置
  #waterMarkStyle; // 水印默认配置
  #waterMarkIndividualStyle; // 水印个性化配置
  #wm; // 水印DOM
  #Uuid; // 唯一id
  #waterMarkStyleStr; // style字符串

  constructor(canvasOptions = {}, waterMarkStyle = {}) {
    // canvas默认配置
    this.#canvasOptions = {
      width: 400, // canvas宽
      height: 400, // canvas高
      font: "normal 16px 思源黑体_ Regular",
      fillStyle: "rgba(10, 100, 80, .2)", // 文本颜色
      textAlign: "center",
      fillTextArr: ["Boen", "3150987521986"], // 文本
      rotate: -20, // 旋转角度
      fillTextX: 100, // 文本横坐标
      fillTextY: 100, // 文本纵坐标
    };
    // 水印默认配置
    this.#waterMarkStyle = {
      position: "absolute",
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      "z-index": "99999",
      "pointer-events": "none", // 永远不成文鼠标事件的 target
      container: document.body, // 水印创建位置
    };
    // canvas个性化配置
    this.#canvasIndividualOptions = canvasOptions;
    // 水印个性化配置
    this.#waterMarkIndividualStyle = waterMarkStyle;
    // 初始化
    this.#init();
  }

  /**
   * 创建canvas
   * @param {Object} options 选项
   * @returns canvasUrl
   */
  createCanvasUrl(options = {}) {
    const canvas = document.createElement("canvas"); // 创建canvas
    // 设置属性
    canvas.setAttribute("width", options?.width ?? this.#canvasOptions.width);
    canvas.setAttribute(
      "height",
      options?.height ?? this.#canvasOptions.height
    );
    const ctx = canvas.getContext("2d");
    ctx.font = options?.font ?? this.#canvasOptions.font;
    ctx.fillStyle = options?.fillStyle ?? this.#canvasOptions.fillStyle;
    ctx.textAlign = options?.textAlign ?? this.#canvasOptions.textAlign;
    ctx.rotate(
      (Math.PI / 180) * (options?.rotate ?? this.#canvasOptions.rotate)
    );
    const fillTextArr = options?.fillTextArr || this.#canvasOptions.fillTextArr;
    for (let i = 0; i < fillTextArr.length; i++) {
      const fillText = fillTextArr[i];
      // 防止多文本重叠
      ctx.fillText(
        fillText,
        options?.fillTextX ?? this.#canvasOptions.fillTextX,
        (options?.fillTextY ?? this.#canvasOptions.fillTextY) + 20 * i
      );
    }
    const canvasUrl = canvas.toDataURL(); // 获取base64图片URL
    return canvasUrl;
  }

  /**
   * 创建水印
   * @param {String} bgcImgUrl
   * @param {Object} options
   */
  createWaterMark(bgcImgUrl, options = {}) {
    this.#Uuid = this.getUuid();
    const waterMark = document.createElement("div");
    waterMark.setAttribute("id", this.#Uuid);
    this.#waterMarkStyleStr = "";
    // 拼接成style字符串
    for (let key in this.#waterMarkStyle) {
      this.#waterMarkStyleStr +=
        key + `:${options?.[key] ?? this.#waterMarkStyle[key]};`;
    }
    this.#waterMarkStyleStr += `background-image:url(${bgcImgUrl});`;
    waterMark.setAttribute("style", this.#waterMarkStyleStr); // 设置style属性
    options?.container?.appendChild(waterMark) ??
      this.#waterMarkStyle.container.appendChild(waterMark);
    return waterMark;
  }

  /**
   * 生成uuid
   * @returns
   */
  getUuid() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
      /[xy]/g,
      function (c) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      }
    );
  }

  /**
   * 初始化
   */
  #init() {
    const base64Url = this.createCanvasUrl(this.#canvasIndividualOptions); // base64图片
    this.#wm = this.createWaterMark(base64Url, this.#waterMarkIndividualStyle); // 创建水印
    this.#observer();
  }

  /**
   * 移除水印
   */
  #remove() {
    const wmDiv = document.getElementById(this.#Uuid);
    // 防止预移出节点不存在
    if (!wmDiv) {
      this.#waterMarkIndividualStyle?.container?.removeChild(this.#wm) ??
        this.#waterMarkStyle.container.removeChild(this.#wm);
    }
  }

  /**
   * 防止控制台删除水印
   */
  #observer() {
    const targetNode =
      this.#waterMarkIndividualStyle?.container ??
      this.#waterMarkStyle.container; // 监听节点
    // 监听配置
    const observerConfig = {
      subtree: true,
      childList: true,
      attributes: true,
    };
    // 创建observer对象
    const observer = new MutationObserver(() => {
      const wmDiv = document.getElementById(this.#Uuid);
      // wmDiv不存在
      if (!wmDiv) {
        this.init();
        return;
      }
      // css样式被修改
      if (wmDiv.getAttribute("style") !== this.#waterMarkStyleStr) {
        wmDiv.setAttribute("style", this.#waterMarkStyleStr);
      }
    });
    // 开始监听
    observer.observe(targetNode, observerConfig);
  }
}

const wm = new WaterMark();
const wm2 = new WaterMark(
  {},
  (waterMarkStyle = { left: "150px", top: "150px" })
);

JavaScript

ES6

Symbol-新数据类型

Symbol是JavaScript的第七种数据类型。常用于表示独一无二的字符串，例如函数名等。

定义

1. Symbol()

   局部，相同的串并不代表是同一个Symbol。

2. Symbol.for()

   全局，开辟内存空间，相同的串代表是同一个Symbol。

描述

1. symbol.description：通用。
2. Symbol.keyfor()：由Symbol.for()建立的对象独享。

用途

1. 唯一的key。

2. 对象私有属性。

   遍历时，将无法取到以Symbol对象为key的属性。

注意事项

1. for...in取不到以Symbol对象为key的属性。
2. Object.getOwnPropertySymbols()可以拿到以Symbol对象为key的属性。
3. Reflect.ownKeys()能够获取所有属性。

数据结构

Set

类似数组，但所有value唯一。

常用

• 属性：size
• 方法：
  1. 增：add
  2. 查：has
  3. 删：delete
  4. clear：清空。
  5. values：获得Set迭代对象。

与数组互转

• 转数组：Array.from()、[...set]
• 转Set：new Set(arr)

WeakSet

和Set差不多，但是WeakSet有几个不同点：

1. 只能存放引用数据类型。

2. WeakSet的对象是弱引用。

   WeakSet对对象的引用不会被考虑进垃圾回收机制，只要没有引用该对象，该对象就会被回收，无论是否在WeakSet中被引用。因此容易被弱引用造成影响的方法都不被提供，如values、size、for of等。

   const objs = new WeakSet();
   let obj = { qq: "123" };
   objs.add(obj);
   objs.add({
     a: "123",
     b: {
       c: "hello",
     },
   });
   console.log(objs);
   setTimeout(() => {
     console.log(objs);
   }, 5000);
   

Map

类似对象，但所有key唯一，且key可以是任意值（对象key本质是字符串）。

常用

1. 属性
2. 方法
   • 增：
     • set，key同样时，即为更改。
     • new Map([[key, value], [], ...])
   • 删：delete
   • 查：has、get
3. 遍历
   • entries，可以解构一下[key, value]
   • keys
   • values
   • for...of
   • forEach

与数组互转

• 转数组：[...map]
• 转map：new Map([[key, value], [], ...])

WeakMap

与map差不多，但键key必须是引用数据类型，且WeakMap是弱引用类型。

变化：size、keys等方法都用不了，因为是弱引用，不加入垃圾回收机制。

运算符的扩展（ES6）

指数运算符**

num1 ** num2 = num1^num2
// 右结合
num1 ** num2 * num3 = num1^(num2^num3)
// 新赋值运算符
num1 **= 3 // num1 ^3

链判断运算符?.

三种用法：

1. 对象属性

   obj是否存在？obj.obj2是否存在？obj.obj2.data是否存在？顺序着来，不存在直接返回undefined。

   const data = obj?.obj2?.data || {}
   

2. 对象方法

   obj?.func()
   

3. 函数调用

   func?.()
   

Null判断运算符??

通常赋默认值是以||方式提供，但 如null、undefined、NaN、0、""、false也会出现会被囊括其中。Null判断运算符??只有运算符左侧的值为undefined、null时才会返回右侧的值。

const num = 0 ?? 1 // num = 0
const num = obj?.num ?? 1 // num = 1

文字翻转

split('').reverse().join('')

类型判断

typeof

type of 1 // number
type of '1' // string
type of {} // object
type of [1, 2, 3] // object
type of function run() {} // function
type of hdcms // hdcms未定义情况下：undefined
type of hdcms // hdcms已声明情况下：undefined，因为初始值为undefined

instanceof

[] instanceof Array // true
{} instanceof Object // true

同源、跨域页面间通信

同源页面

同源：协议、url、端口号一致。

1. A页面

   window.addEventListener('storage', (e)=>{
     console.log(e)
   })
   

2. B页面

   localStorage.setItem(key, value)
   

跨域页面

跨域：协议、url、端口号至少一个不一样。

1. A页面

   window.addEventListener('message', (e) => {
     console.log(e)
     // e.origin 查看源地址
   })
   

2. B页面

   const targetWindow = window.open('http://localhost:10001/user');
   setTimeout(()=>{
        targetWindow.postMessage('来自10002的消息', 'http://localhost:10001')
   }, 3000)
   

内存泄漏

不再用到的内存，没有及时释放，叫做内存泄漏。

引起的原因

1. 全局变量
2. 定时器
3. 闭包使用不当
4. 网络回调函数
5. DOM元素（js、DOM树都清理）

Garbage Collection（GC）

1. 标记清除法

   根对象开始寻找可引用的对象，未被引用的对象移出。

2. 引用计数法

   新引用+1，移出引用-1，引用为0的对象回收。

Websocket

基本用法

方法

1. close()：主动关闭连接。
2. send()：客户端想服务端发送数据。

事件

1. close：连接断开触发。
2. error：连接错误触发。
3. message：收到服务端发送的数据。
4. open：打开连接时触发。

例子

const ws = new WebSocket(url)
// 建立连接
ws.addEventListener('open', () => {
  ws.send('hello server') // 向服务端发送数据
})
// 接受消息
ws.addEventListener('message', (e) => {
  // e.data
})
// 断开连接
ws.addEventListener('close', () => {
})
// 断开连接
ws.addEventListener('error', () => {
})

对于后端，每创建一个新的连接，都会有一个conn对象。

try…catch

语法

try {
  
}catch (err) {
  throw new Error()
}finally {
  // 总会做的事情
}

注意事项

function func() {
  try {
    return 1;
  } catch (err) {
    /* ... */
  } finally {
    alert( 'finally' );
  }
}

这个例子，先alert、后return。

全局变量污染

1. 立即执行函数

   (function (window) {
     function show() {
       console.log(`js2.js ---`);
     }
   
     window.js2 = {
       show,
     };
   })(window);
   

2. 块作用域

   {
     let show = function () {
       console.log(`js1.js ---`);
     };
   
     window.js1 = {
       show,
     };
   }
   

Web Workers

基本使用

1. 检测浏览器是否支持Web Workers

   if(window.Worker) {}
   

2. 创造一个worker

   const worker1 = new Worker(aURL, options)
   

   此worker指定一个脚本来执行线程。

   脚本里(main.js)可以写一个事件处理函数作为响应

   onmessage = function (e) {
     // e.data
     postMessage(data);
   }
   

3. 向worker发送数据

   worker1.postMessage(data)
   

4. 监听worker返回的消息

   worker1.onmessage = function (e) {}
   

5. 杀掉worker

   worker1.terminate()
   

字符串常用方法

查找

1. indexOf、lastIndexOf(char, loc)

2. includes

3. startsWith(str)

   是否以str开头。

截取

1. substr(start, num)
2. slice(start, end)
3. subString(start, end)：start和end为非负的整数。

替换

replace(word, replaceWord)

重复

str.repeat(num)

数组常用方法

检测

Array.isArray()

数组与字符串互转

转为字符串

1. join()

2. String()、toString()

   默认间隔英文逗号“,”。

转为数组

1. split()

2. Array.from(obj, map)

3. [...arr] = str

   原理解构赋值+rest操作符。str本身是有 length属性的字符串，所以每个字符都放到了变量arr里。

元素操作

添加

1. push

2. unshift

   添加到数组头部。

3. splice(start, delNum, ele1,...)

删除

1. pop

2. shift

   删除数组尾部元素。

3. splice(start, delNum)

移动

1. splice

   function itemMove(arr, from, to) {
     arr.splice(to, 0, ...arr.splice(from, 1));
     return arr;
   }
   

替换

以obj替换已有数组[start, end)所有元素。

arr.fill(obj, start, end)

清空数组

1. arr = []
2. 推荐：arr.length = 0
3. arr.splice(0, arr.length)

创建数组

1. Array.of(params,...)

   const arr = Array.of(1, 2, 3, true, "123");
   

2. Array.from()

   通过拥有 length 属性的对象或可迭代的对象来返回一个数组。

   Array.from(obj, mapFunc, this)
   

   可实现浅拷贝，如

   const arr = Array.from([{a: '1'}, 'b'])
   

3. new Array()

   仅传一个参数num，即创建num个为undefined的元素。多个参数与Array.of一致。

数组截取

1. slice

   截取数组[start, end)部分，返回一个新数组。不对原数组操作。

   arr.slice(start, end)
   

   注意

   1. 只传一个参数时，end代表arr.length。
   2. slice(0)是浅拷贝！！！

2. splice

   此函数会修改数组本身，返回被修改的内容。

   arr.splice(start) 
   

查找

以下查找，针对数组里的对象都是“址”查找，不是一样的地址，不会匹配。

1. indexOf

   查找在数组中某一指定元素（必须===）的第一次出现的位置。返回index、-1。

   arr.indexOf(obj)
   

2. includes

   判断一个数组是否包含一个指定的值，返回true、false。

   arr.includes(ele)
   

3. find

   查找通过测试的第一个值，返回查到的值、undefined。

   arr.find(item => item > 18)
   
   // 手撕
   Array.prototype.find(callback) {
     for(let item of this) {
       if(callback(item)) return item;
     }
     return undefined;
   }
   

4. findIndex

   查找通过测试的第一个值，返回查到的值的索引、-1。

   arr.findIndex(item => item > 18)
   

5. some

   查找是否有通过测试的值，返回true、false。

   arr.some((item, index) => item > 18)
   

6. every

   类some，查找是否都有通过测试，返回true、false。

7. filter

   过滤不符合条件的元素，返回一个新数组（浅拷贝）。

   arr2 = arr.filter(item => item > 18)
   

   原理：

   Array.prototype.filter = function (callback) {
     const arr = [];
     for (const iterator of this) {
       callback(iterator) && arr.push(iterator);
     }
     return arr;
    };
   

合并

1. arr.concat(array2,...)

   返回一个新数组，将arr、arr2,…连接。传入的参数如果是数组，将被展开一层。如果是非数组，将直接作为元素添加。

2. [...arr1, ...arr2]

3. Object.assign()

排序

arr.sort((a,b) => a-b) // 小于0升序，大于0降序

原理：

Array.prototype.swap = function (index_a, index_b) {
  const box = this[index_a];
  this[index_a] = this[index_b];
  this[index_b] = box;
};

Array.prototype.sort = function (callback) {
  for (let i = 0; i < this.length; i++) {
    for (let j = i + 1; j < this.length; j++) {
      if (callback(this[i], this[j]) > 0) {
        this.swap(i, j);
      }
    }
  }
};

翻转

arr.reverse() 

集合运算

去重

[...new Set(arr)]

交集

function show(arr1, arr2) {
  const arr = [];
  const set1 = new Set(arr1);
  const set2 = new Set(arr2);
  return [...set1].filter((item) => set2.has(item));
}

并集-交集

function show(arr1, arr2) {
  const set1 = new Set(arr1);
  const set2 = new Set(arr2);

  const fn = (s1, s2) => {
    const arr = [];
    for (let item of s1) {
      if (!s2.has(item)) {
        arr.push(item);
      }
    }
    return arr;
  };

  const res1 = fn(set1, set2);
  const res2 = fn(set2, set1);
  return [...res1, ...res2];
}

差集

arr1.filter((item) => !new Set(arr2).has(item))

高阶

1. 累计：array.reduce(function(pre, currentValue, currentIndex, arr), initialValue)

   参数：pre是上次的返回值，第一次为initialValue ?? array[0]。

   原理

   Array.prototype.reduce = function (callback, initValue) {
     // 检查数组是否为null或undefined
     if (this == undefined) throw new TypeError("this is null or undefined");
     // 检查callback是否是函数
     if (typeof callback !== "function")
       throw new TypeError(`${callback} is not a function`);
   
     const arr = Object(this); // 确保arr为对象
     const arrLength = arr.length >>> 0; // 确保length为正数
   
     let index = 0; // 第一个有效值索引
     if (initValue === undefined) {
       // 寻找第一个有效值
       while (index < arrLength && !(index in arr)) index++;
       // index超出数组范围，证明是空数组
       if (index >= arrLength) {
         throw new TypeError("empty array");
       }
       // 设置初始值
       initValue = initValue ? initValue : arr[index++];
     }
     let res = initValue; // 初始化结果
     // 计算结果
     for (let i = index; i < arrLength; i++) {
       if (i in arr) res = callback(res, this[i], i, this);
     }
     return res;
   };
   

2. 映射：map

   原理

   Array.prototype.map = function (callback = (item) => item) {
     const newArr = [];
     this.forEach((element) => {
       newArr.push(callback(element));
     });
     return newArr;
   };
   

对象

属性

属性特征

1. 设置属性特征

   Object.defineProperty(obj, property, {
     writable: false, // 不可写
     enumerable: false, // 不可遍历
     configurable: false, // 不可配置、删除
     value
   });
   
   Object.definePropertys(obj,{property1, property2,...})
   

2. 读取属性特征

   Object.getOwnPropertyDescriptor(obj, propertyStr)
   
   Object.getOwnPropertyDescriptors(obj)
   

删除属性

delete obj.property

禁止添加属性

Object.preventExtensions(obj)

检测是否禁止：Object.isExtensible()

封闭对象

禁止添加属性，且对象不可配置

Object.seal(obj)

检测是否被封禁：Object.isSealed()

冻结对象

对象不能被修改，不可增删属性、不可配置、不可写，原型不可修改。

Object.freeze(obj)

检测某属性是否存在

1. hasOwnProperty：不查原型链
   ​
2. in：查原型链

访问器

const data = {
  set property(value) {
    
  },
  get property() {
    
  }
}

注意，set和打点访问赋值同时针对一个属性，set优先。

遍历

for in

拷贝

浅拷贝

1. Object.assign({}, obj1, obj2)
2. {...obj1, ...obj2}

深拷贝

1. 老版

   function cloneDeep(obj) {
     if (Array.isArray(obj)) {
       const arr = [];
       for (const ele of obj) {
         arr.push(cloneDeep(ele));
       }
       return arr;
     } else if (obj instanceof Object) {
       const copy_obj = {};
       for (const key in obj) {
         // for in会遍历所有可枚举属性
         if (obj.hasOwnProperty(key)) {
           copy_obj[key] = cloneDeep(obj[key]);
         }
       }
       return copy_obj;
     } else {
       return obj;
     }
   }
   

2. 新版

   function cloneDeep(obj) {
     if (obj instanceof Object) {
       const res = Array.isArray(obj) ? [] : {};
       for (const [key, value] of Object.entries(obj)) {
         res[key] = cloneDeep(value);
       }
       return res;
     } else {
       return obj;
     }
   }
   

创建对象

Object.create(prototype, properties)

if()表达式和==原理

if()

if(1) // true ---> if(Boolean(1))
if(undefined) // fasle
if({}) // true 
if([]) // true ---> if(Boolean([]))

if()里，其实就是执行Boolan()方法。

==

1 == true // true
2 == true // false ---> Number(2) == Number(true) ---> 2 == 1
[1] == true // true

==，本质是执行Number()方法。

Boolean()

类型	值	Boolean()
undefined	undefined	false
null	null	false
string	‘’	false
string	‘0’	true
number	0	false
number	1	true
boolean	false	false
boolean	true	true
object	{}	true
object	{num:0}	true
object	[]	true
object	[0]	true

总结：

1. undefined、null都为false。
2. 字符串只有’'为false。
3. 数值类型只有0为false。
4. 引用数据类型都为true。
5. 布尔类型看本身。

Number()

类型	值	Number()
undefined	undefined	NaN
null	null	0
string	‘’	0
string	‘0’	0
string	‘1’	1
string	‘1a’	NaN
number	0	0
number	1	1
boolean	false	0
boolean	true	1
object	{}	NaN
object	{num:0}	NaN
object	[]	0
object	[0]	0
object	[0,1]	NaN

总结：

1. undefined为NaN。
2. null为0。
3. 字符类型长度为0必为0。长度不为0看value是否包含非数字，不包含就是去掉引号后的值。否则NaN。
4. 数值类型保持原值。
5. 布尔类型true为1，false为0。
6. 引用数据类型。
   • 对象{}为NaN。
   • 数组长度为0即为0。长度为1则转那一个数值，长度大于1则NaN。

Math

1. max、min

   可以使用spread、rest或apply、call来改变传入参数是列表还是数组。

2. ceil、floor

   ceil：天花板，floor：地板。

3. round

   四舍五入。

4. random

   取[0, num]的整数：Math.floor(Math.random() * (num + 1))。

   取[num1, num2]的整数：本质还是[0 ,num]

   function getRandom(num1,  num2) {
     return (
       Math.min(num1, num2) + Math.floor(Math.random() * (num2 - num1 + 1))
     );
   }
   

Date

获取时间戳

1. +date
2. Number(date)
3. date.valueOf()
4. date.getTime

时间戳转ISO时间

new Date(timeStamp)

格式化

好库：moment.js

1. 年：getFullYear
2. 月：getMonth，从0开始。
3. 日：getDate
4. 小时：getHours
5. 分钟：getMinutes
6. 秒：getSeconds

const d = new Date("1999-11-10 03:03:12");

function formatDate(date, format) {
  const config = {
    YY: date.getFullYear(),
    MM: date.getMonth(),
    DD: date.getDate(),
    HH: date.getHours(),
    mm: date.getMinutes(),
    SS: date.getSeconds(),
  };

  for (let item in config) {
    format = format.replace(item, config[item]);
  }

  return format;
}

console.log(formatDate(d, "YY年MM月"));

原型

含义

• 显式原型：prototype
• 隐式原型:__proto__

查找

1. Object.getPrototypeOf()

设置原型

1. Object.setPropertyOf(o. proto)
2. __proto__

constructor

Fn.prototype.constructor === Fn

Vue2

创建全局组件

Vue.component(name, {
  template: '', // html代码
  props: ,
})

​ 需要在创建实例之前使用该方法。

计算属性

计算属性是基于响应式依赖进行缓存的，相比方法，只有在相关响应式依赖发生变化时才重新求值。

原理

src/core/instance/state.js，参考链接。

1. initState函数中，initComputed初始化computed。

2. initComputed中

   1. 遍历computed，获取(key, value)，即属性名和计算的方法。
   2. 对每一个计算属性
      1. 创建Watcher实例
      2. 初始化getter、deps（依赖哪些属性）、dep（发布者，以备未来有被订阅）
      3. defineComputed — 定义set、get(createComputedGetter)计算方法，然后通过Object.defineProperty()设置vue实例的属性的set、get方法。

3. 针对createComputedGetter

   1. watcher.evaluate()

      如果已创建的Watcher实例，是计算方法，执行evaluate()获取值。evaluate本质是调用之前定义的Watcher实例的getter方法。如果要求是depp深度监听，将重新收集所有依赖。

   2. watcher.depend()：如果存在Dep.target，收集依赖。

   当对一个对象使用getters时，同样会调用其子属性的getters。这样每一个属性对应的watcher都会被推入Dep类的静态属性target，从此每一个属性都将被收集到计算属性的依赖。

key

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可。

v-for

1. 永远不要把v-if 和 v-for 同时用在同一个元素上。

   v-for的优先级比v-if的优先级更高，因此每次重渲染时，都会遍历整个列表，不论活跃用户是否发生了变化，因此浪费性能。

   解决方法：

   • 先使用计算属性筛选一次。
   • 将v-if转移到容器元素上。

2. key不能使用index

   不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

   index代表当前项的索引（0,1,2,3,4,…），当发生删除、增加等操作时，其后面的元素的index都会发生变化，此时diff算法就认为后面的key-index映射全部发生了变化，将全部重新渲染，严重影响性能。因此推荐key使用唯一值，如时间戳+new Date()、身份证号、学号等…

同步组件和异步组件

同步组件

import componentA from './componentA.vue'

异步组件

只在组件需要渲染的时候才进行加载渲染并进行缓存，以备下次访问。

componentA: () => import('./componentA.vue')

调用异步组件的方法-延时

setTimeout(() => {
  this.$nextTick(() => {
    console.log(this.$refs.com);
  });
}, 100);

优点：提升首页渲染速度。

区别

1. nextTick

   父组件获取子组件时：

   同步组件：nextTick可以获取组件。

   异步组件：第一次nextTick之后无法获取组件。

2. 打包

   打包成单独的js文件存储在static/js文件夹里面

3. 生命周期顺序

   异步组件：父组件beforeCreate、created、beforeMount、mounted —>挨个子组件beforeCreate、created、beforeMount、mounted

   同步组件：父组件beforeCreate、created、beforeMount —>挨个子组件beforeCreate、created、beforeMount—>挨个子组件mounted—> 父组件mounted

组件

1. 当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用于创建多个实例。

   否则，会出现多个组件使用一个数据对象的情况。

2. 使用事件抛出值

   • 子组件

     <button @click="$emit('put', 999)"><button />
     

   • 父组件

     num接收来自子组件传来的值num

     <Father @put="num = $event"/>
     

     或者

     <Father @put="change"/>
     
     methods:{
       change(num)
       {
         // change方法的第一个形参即子组件传来的值
       }
     }
     

3. 组件使用v-model

   • 父组件

     // 法一：有缺陷，初始值传不过去
     
     // 法二：刨根问底
     
     // or
     
     

   • 子组件

     Vue.component('Son', {
       props: ['message'],
       template: `
         
       `
     })
     

   小知识：update:myPropName模式可以用.sync修饰符使父子组件通信的prop进行双向绑定。

   • 子组件

     数据发生变化时

     this.$emit('update:title', newtitle)
     

   • 父组件

     • 刨根问底

       <text-document
         v-bind:title="doc.title"
         v-on:update:title="doc.title = $event"
       ></text-document>
       

     • .sync修饰符

       <text-document v-bind:title.sync="doc.title"></text-document>
       

prop

1. 子组件接收prop并作为本地数据使用。

   props: ['initCount'],
   data() {
     return {
       count: this.initCount
     }
   }
   

2. 带有默认值的对象

   对象或数组默认值必须从一个工厂函数获取

   props: {
     propA: {
       type: Object,
       // 对象或数组默认值必须从一个工厂函数获取
       default: function () {
      		return { message: 'hello' }
       }
     }
   }
   

插槽

使用

1. a.vue

2. App.vue

   
     
     
     
   main
   
   

插槽内容使用子组件数据

子组件

// propName是子组件内部数据

插槽内容

注意事项

1. 不带name的默认名称为“default”。
2. v-slot只能添加在