小技巧--待补充

1.padStart()如果字符串不足位数从字符串开始位置自动补齐位数

   用法：padStart (位数 , '补位的字符')

              padEnd() 是从字符串末尾向前补齐

2.includes()字符串提供了一个判断是否包含字符串的新方法

   用法：includes("要包含的字符串")

3.当div内的文字超出div，给div设置属性  work-break:break-all 实现自动换行

4.数组去重

(1) filter高阶函数

var r = arr.filter((item, index, self) => {
    return self.indexOf(item) === index;
});          

(2) Set + Array.from

let arr = [1, 1, 1, 2, 3, 3, 4, 5, 5];
arr = Array.from(new Set(arr))

(3) Set + 扩展运算符

let arr = [1, 1, 1, 2, 3, 3, 4, 5, 5];
arr = [...new Set(arr)]

(4) Map + filter

let arr = [1, 1, 1, 2, 3, 3, 4, 5, 5];
let map = new Map();
arr = arr.filter(item=>{
    return !map.has(item) && map.set(item,1)
})

5.字符串去空

$.trim('字符串')

6.jquery选取不带特定Class的元素绑定点击事件

$(document).on(“click” , “#id:not(.class)” , function(){})

7.css磨砂属性 

backdrop-filter: blur(10px);

8.展平数组

//example code
function DeepFlat(array)
{
  return [].concat(...array.map(value=>  (Array.isArray(value) ? DeepFlat(value) : value)));
}
console.log(DeepFlat([1,[2,[4,6,6,[9]],0,],1])) // [1, 2, 4, 6, 6, 9, 0, 1]

9.数字转换数字数组

//example code
const NumberToArray = number => [...`${number}`].map(i => parseInt(i));
console.log(NumberToArray(86734)) //[8,6,7,3,4]

10.简短的 Console.log

var cl = console.log.bind(document)
cl(345) 
cl("JAVASCRIPT")

11.canvas判断点是否在某个区域内

  // 判断是否在区间内
  // checkPoint是点位置组成的数据[x,y]
  // polygonPoints是区域点坐标的数组，为保证图形能够闭合，起点和终点必须相等。
  // 如:[[50,100],[100,100],[80,200],[50,100]]
  function isInPolygon(checkPoint, polygonPoints) {
    var counter = 0;
    var i;
    var xinters;
    var p1, p2;
    var pointCount = polygonPoints.length;
    p1 = polygonPoints[0];

    for (i = 1; i <= pointCount; i++) {
      p2 = polygonPoints[i % pointCount];
      if (
        checkPoint[0] > Math.min(p1[0], p2[0]) &&
        checkPoint[0] <= Math.max(p1[0], p2[0])
      ) {
        if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
          if (p1[0] != p2[0]) {
            xinters =
              ((checkPoint[0] - p1[0]) * (p2[1] - p1[1])) / (p2[0] - p1[0]) +
              p1[1];
            if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
              counter++;
            }
          }
        }
      }
      p1 = p2;
    }
    if (counter % 2 == 0) {
      return false;
    } else {
      return true;
    }
  }

12.文件下载

// 文件下载
export function downloadFile(file, fileName) {
  // 下载doc
  var blob = new Blob([file], { type: "application/msword;charset=utf-8" });
  // 下载zip
  // var blob = new Blob([file], { type: "application/zip;charset=utf-8" });
  // 下载xlsx
  // var blob = new Blob([file], { type: "application/vnd.ms-excel;charset=utf-8"});
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob, `${fileName}.doc`);
  } else {
    // 将lob对象转换为域名结合式的url
    let blobUrl = window.URL.createObjectURL(blob);
    let link = document.createElement("a");
    document.body.appendChild(link);
    link.style.display = "none";
    link.href = blobUrl;
    // 设置a标签的下载属性，设置文件名及格式，后缀名最好让后端在数据格式中返回
    link.download = `${fileName}.doc`;
    // 自触发click事件
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(blobUrl);
  }
}

13. _.debounce 限制操作频率函数，类似防抖

    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)

14.检测数据类型

• typeof     其中数组、对象、null 都会被判断为 object，其他判断都正确。    

  typeof 2  // number
  typeof null // object
  typeof function(){} // function
  typeof undefined // undefined

• instanceof    只能正确判断引用数据类型，而不能判断基本数据类型 

  2 instanceof Number    // false
  true instanceof Boolean    // false
  [] instanceof Array    // true
  function(){} instanceof Function    // true
  {} instanceof Object    // true

• constructor    对象通过constructor访问其构造函数

  (2).constructor    // Number
  (true).constructor    // Boolean
  ('str').constructor    // String
  ([]).constructor    // Array
  ({}).constructor    // Object
  (function(){}).constructor    // Function

• Object.prototype.toString.call()     

  /* toString 是 Object 的原型方法，而Array、function等类型作为 Object 的实例，都重写了 toString 方法,重写后的方法只能将obj转为字符串，所以要调用Object原型上的方法 */
  Object.prototype.toString.call(2)    // '[object Number]'
  Object.prototype.toString.call(true)    // '[object Boolean]'
  Object.prototype.toString.call('str')    // '[object String]'
  Object.prototype.toString.call([])    // '[object Array]'
  Object.prototype.toString.call({})    // '[object Object]'
  Object.prototype.toString.call(function(){})    // '[object Function]'

                

15.原型和原型链图解

（1）构造函数是使用了new关键字的函数，用来创建对象，所有函数都是Function()的实例

---

（2）原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是Object()的实例

---

（3）原型链又叫隐式原型链，是由__proto__属性串联起来，原型链的尽头是Object.prototype

---

16.null 和 undefined 区别

1. null代表空对象用于初始化变量，undefined代表未定义，变量声明未定义就返回undefined
2. undefined不是保留字可以作为变量名，null不可以
3. typeof null会返回object，这是历史遗留问题
4. null == undefined 返回true，null === undefined 返回false

17.实现instanceof功能

instanceof 运算符用于判断对象的原型链中是否存在某个构造函数的prototype属性，也就是判断原型对象是否相等

// left为对象，right为构造函数
function myinstanceof(left,right){
    let leftProto = Object.getPrototypeOf(left); // 也可以通过left.__proto__获取
    let rightProto = right.prototype;
    while(true){
        if(!leftProto) return false
        if(leftProto === rightProto) return true
        leftProto = Object.getPrototypeOf(leftProto);
    }
}

18.Object.is() 与比较操作符 “===”、“==”的区别？

/* Object.is 来进行相等判断时，一般情况下和三等号的判断相同，
它处理了一些特殊的情况，比如 -0 和+0 不再相等，两个NaN是相等的。*/
-0 === +0    // true
NaN === NaN    // false
Object.is(-0,+0)    // false
Object.is(NaN,NaN)    // true

19.javascript包装类型

在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时JavaScript会在后台隐式地将基本类型的值转换为对象，如：

let a = 'str';
a.length    // 3 先将'str'转为String('str')再获取length
a.toUpperCase()    // 'STR'

可以使用 Object() 方法显式将基本类型转为包装类型：

let a = 'str';
Object(a)    // String {'str'}

也可以使用 valueOf() 方法将包装类型转为基本类型：

let a = 'str';
let b = Object(a);    // String {'str'}
b.valueOf()    // 'str'

20.判断空对象

// 1.使用JSON.stringify
let obj = {};
JSON.stringify(obj) === '{}'    // true

// 2.使用Object.keys
Object.keys(obj).length === 0    // true

21.JavaScript 脚本延迟加载的方式有哪些？

延迟加载就是等页面加载完成之后再加载JavaScript 文件。js延迟加载有助于提高页面加载速度。

• defer 属性：给 js 脚本添加 defer 属性，会让脚本的加载与文档的解析同步进行，然后在文档解析完成后再执行这个脚本，多个设置defer属性的脚本一般会按顺序执行但不绝对，因此最好只设置一个defer脚本
• async 属性：给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，多个async属性的脚本的执行顺序是不可预测的
• 动态创建 DOM 方式：动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建script 标签来引入js 脚本。
• 使用 setTimeout 延迟方法：设置一个定时器来延迟加载js 脚本文件
• 让 JS 最后加载：将 js 脚本放在文档的底部，来使js 脚本尽可能的在最后来加载执行。

22.for...in 和 for...of 的区别

1. for of 是ES6新增的遍历方法，for in 是ES3的遍历方法
2. for in 会遍历对象的整个原型链，for of 只会变量对象自身
3. for in 返回数组上所有可枚举属性(包含原型链)，for of 返回数组下标对应的属性值

总结：for in 适用于遍历对象，for of适用于遍历数组、类数组对象，字符串、Set、Map。