wheel

目录

• 1.5万字概括ES6全部特性(已更新ES2020)
• 前端图片上传、预览、裁剪等
• 「面试题」20+Vue面试题整理
• 各种源码实现，你想要的这里都有
• Promise+原生ajax
• jsonp实现
• 函数柯里化之实现sum(1,2,3)==sum(1)(2)(3)
• 把id放入pid的子集
• js十大排序算法
  • 冒泡排序
  • 选择排序
  • 插入排序
  • 希尔排序
  • 归并排序
  • 快速排序
  • 堆排序
  • 计数排序
  • 桶排序
  • 基数排序
• JavaScript数组去重（12种方法，史上最全）
  • 利用ES6 Set去重（ES6中最常用）
  • 利用ES6 Set去重（ES6中最常用）
  • 利用for嵌套for，然后splice去重（ES5中最常用）
  • 利用indexOf去重
  • 利用sort()
  • 利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进）
  • 利用includes
  • 利用hasOwnProperty
  • 利用filter
  • 利用递归去重
  • 利用Map数据结构去重
  • 利用reduce+includes
  • […new Set(arr)]
• 算法
  • 全排列
  • 二分搜索
• 常用字符串
  • charAt(x)
  • charCodeAt(x)
  • concat(v1,v2..)
  • fromCharcode(c1,c2)
  • indexOf(substr, [start])
  • lastIndexOf(substr, [start])
  • match(regexp)
  • replace(regexp/substr, replacetext)
  • search(regexp)
  • slice(start, [end])
  • split(delimiter, [limit])
  • substr(start, [length])
  • substring(from, [to])
  • toLowerCase()
  • toUpperCase()
  • includes()
  • endsWith()
  • repeat()
  • valueOf()
  • trim()
• 原生js实现api
  • 用ES5实现数组的map方法
  • 用ES5实现数组的reduce方法
  • 实现call/apply
  • 实现Object.create方法(常用)
  • 实现bind方法
  • 实现new关键字
  • 实现instanceof的作用
  • 实现单例模式
  • 实现数组的flat
  • 实现防抖功能
  • 实现节流功能
  • 用发布订阅模式实现EventEmit
  • 实现深拷贝
  • 实现Promise
  • 使用ES5实现类的继承效果
• 实用的WEB API
  • querySelector
  • querySelectorAll
  • closest
  • dataset
  • URLSearchParams
  • hidden
  • contenteditable
  • spellcheck
  • classList
  • getBoundingClientRect
  • contains
  • online state
  • battery state
  • vibration
  • page visibility
  • deviceOrientation
  • toDataURL
  • customEvent
  • notification
  • fullScreen
  • orientation
• 常用数组
• 表达式全集
• 常用正则表达式
• HTTP 常用请求头

---

1.5万字概括ES6全部特性(已更新ES2020)

作者：JowayYoung
链接：https://juejin.im/post/5d9bf530518825427b27639d
来源：掘金

概览图

ES6: ES5:

前端图片上传、预览、裁剪等

作者：chess
链接：https://juejin.im/post/5db6e288e51d455b450a6846
来源：掘金

「面试题」20+Vue面试题整理

作者：童欧巴
链接：https://juejin.im/post/5e649e3e5188252c06113021
来源：掘金

各种源码实现，你想要的这里都有

作者：前端技匠
链接：https://juejin.im/post/5dc3894051882517a652dbd7
来源：掘金

Promise+原生ajax

作者：何时夕
链接：https://juejin.im/post/5e91b01651882573716a9b23
来源：掘金

Promise+原生ajax

const ajax = (url, method, async, data) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      // 已经接收到全部响应数据，而且已经可以在客户端使用了
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else if (xhr.status > 400) {
          reject('发生错误')
        }
      }
    }
    xhr.open(url, method, async)
    xhr.send(data || null)
  })
}

jsonp实现

作者：LinDaiDai_霖呆呆
链接：https://juejin.im/post/5eb55ceb6fb9a0436748297d
来源：掘金

霖呆呆的近期面试128题汇总(含超详细答案) | 掘金技术征文

function JSONP({
    url,
    params = {},
    callbackKey = 'cb',
    callback
}) {
  // 定义本地的唯一callbackId，若是没有的话则初始化为1
  JSONP.callbackId = JSONP.callbackId || 1;
  let callbackId = JSONP.callbackId;
  // 把要执行的回调加入到JSON对象中，避免污染window
  JSONP.callbacks = JSONP.callbacks || [];
  JSONP.callbacks[callbackId] = callback;
  // 把这个名称加入到参数中: 'cb=JSONP.callbacks[1]'
  params[callbackKey] = `JSONP.callbacks[${callbackId}]`;
  // 得到'id=1&cb=JSONP.callbacks[1]'
  const paramString = Object.keys(params).map(key => {
      return `${key}=${encodeURIComponent(params[key])}`
  }).join('&')
  // 创建 script 标签
  const script = document.createElement('script');
  script.setAttribute('src', `${url}?${paramString}`);
  document.body.appendChild(script);
  // id自增，保证唯一
  JSONP.callbackId++;
}
JSONP({
  url: 'http://localhost:8080/api/jsonps',
  params: {
    a: '2&b=3',
    b: '4'
  },
  callbackKey: 'cb',
  callback (res) {
    console.log(res)
  }
})
JSONP({
  url: 'http://localhost:8080/api/jsonp',
  params: {
    id: 1
  },
  callbackKey: 'cb',
  callback (res) {
    console.log(res)
  }
})

函数柯里化之实现sum(1,2,3)==sum(1)(2)(3)

作者：winty
链接：https://juejin.im/post/5e97fe876fb9a03c2e542c1e
来源：掘金

十道大厂面试题(含答案)总结

function sum(...args){
  function currySum(...rest){
    args.push(...rest)
    return currySum
  }
  currySum.toString= function(){ 
    return args.reduce((result,cur)=>{
      return result + cur
    })
  }
  currySum.toNumber= function(){ 
    return args.reduce((result,cur)=>{
      return result + cur
    })
  }
  return currySum
}

把id放入pid的子集

把id放入pid的子集

let arr = [
  { id: 1, code: 'hubei' },
  { id: 433456, code: 'wuhan', pid: 1 },
  { id: 635436, code: 'wuchang', pid: 433456 },
  { id: 2, code: 'henan' },
  { id: 1234135, code: 'zhengzhou', pid: 2 },
  { id: 3, code: '四川' },
  { id: 43345, code: '雅安', pid: 3 },
  { id: 32823828, code: '遂宁', pid: 43345 },
  { id: 323482, code: '达州', pid: 43345 },
]
let newarr = []
for (let i = 0, len = arr.length; i < len; i++) {
  for (let j = i; j < arr.length; j++) {
    if (arr[j].pid === arr[i].id) {
      if (!arr[i].children) arr[i].children = []; // 防止有多个子集的时候重置成空数组
      arr[i].children.push(arr[j]);
      if (!arr[i].pid) newarr.push(arr[i])
    }
  }
}
console.log(JSON.stringify(newarr, null, 2))

找到第一个不重复的字符

找到第一个不重复的字符

function noRepeat(str) {
  for (let i = 0; i < str.length; i++) {
    for (let j = i; j < str.length; j++) {
      if (str.indexOf(str[i]) === str.lastIndexOf(str[j])) {
        return str[i]
      }
    }
  }
}
console.log(noRepeat('aabbccdeeg'))
// d

js十大排序算法

转自: https://www.cnblogs.com/AlbertP/p/10847627.html

对比：

1.冒泡排序

function bubbleSort(arr) {
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j+1]) {        //相邻元素两两对比
        var temp = arr[j+1];        //元素交换
        arr[j+1] = arr[j];
        arr[j] = temp;
      }
    }
  }
  return arr;
}

2.选择排序

function selectionSort(arr) {
  var len = arr.length;
  var minIndex, temp;
  for (var i = 0; i < len - 1; i++) {
    minIndex = i;
    for (var j = i + 1; j < len; j++) {
      if (arr[j] < arr[minIndex]) {     //寻找最小的数
        minIndex = j;                 //将最小数的索引保存
      }
    }
    temp = arr[i];
    arr[i] = arr[minIndex];
    arr[minIndex] = temp;
  }
  return arr;
}

3.插入排序

function insertionSort(arr) {
  var len = arr.length;
  var preIndex, current;
  for (var i = 1; i < len; i++) {
    preIndex = i - 1;
    current = arr[i];
    while(preIndex >= 0 && arr[preIndex] > current) {
      arr[preIndex+1] = arr[preIndex];
      preIndex--;
    }
    arr[preIndex+1] = current;
  }
  return arr;
}

4.希尔排序

function shellSort(arr) {
  var len = arr.length,
      temp,
      gap = 1;
  while(gap < len/3) {          //动态定义间隔序列
    gap =gap*3+1;
  }
  for (gap; gap > 0; gap = Math.floor(gap/3)) {
    for (var i = gap; i < len; i++) {
      temp = arr[i];
      for (var j = i-gap; j >= 0 && arr[j] > temp; j-=gap) {
        arr[j+gap] = arr[j];
      }
      arr[j+gap] = temp;
    }
  }
  return arr;
}

5.归并排序

function mergeSort(arr) {  //采用自上而下的递归方法
  var len = arr.length;
  if(len < 2) {
    return arr;
  }
  var middle = Math.floor(len / 2),
    left = arr.slice(0, middle),
    right = arr.slice(middle);
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  var result = [];

  while (left.length && right.length) {
    if (left[0] <= right[0]) {
      result.push(left.shift());
    } else {
      result.push(right.shift());
    }
  }

  while (left.length)
    result.push(left.shift());

  while (right.length)
    result.push(right.shift());

  return result;
}

6.快速排序

function quickSort(arr, left, right) {
  var len = arr.length,
    partitionIndex,
    left = typeof left != 'number' ? 0 : left,
    right = typeof right != 'number' ? len - 1 : right;

  if (left < right) {
    partitionIndex = partition(arr, left, right);
    quickSort(arr, left, partitionIndex-1);
    quickSort(arr, partitionIndex+1, right);
  }
  return arr;
}

function partition(arr, left ,right) {     //分区操作
  var pivot = left,                      //设定基准值（pivot）
    index = pivot + 1;
  for (var i = index; i <= right; i++) {
    if (arr[i] < arr[pivot]) {
      swap(arr, i, index);
      index++;
    }        
  }
  swap(arr, pivot, index - 1);
  return index-1;
}

function swap(arr, i, j) {
  var temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

7.堆排序

var len;    //因为声明的多个函数都需要数据长度，所以把len设置成为全局变量

function buildMaxHeap(arr) {   //建立大顶堆
  len = arr.length;
  for (var i = Math.floor(len/2); i >= 0; i--) {
    heapify(arr, i);
  }
}

function heapify(arr, i) {     //堆调整
  var left = 2 * i + 1,
    right = 2 * i + 2,
    largest = i;

  if (left < len && arr[left] > arr[largest]) {
    largest = left;
  }

  if (right < len && arr[right] > arr[largest]) {
    largest = right;
  }

  if (largest != i) {
    swap(arr, i, largest);
    heapify(arr, largest);
  }
}

function swap(arr, i, j) {
  var temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
}

function heapSort(arr) {
  buildMaxHeap(arr);

  for (var i = arr.length-1; i > 0; i--) {
    swap(arr, 0, i);
    len--;
    heapify(arr, 0);
  }
  return arr;
}

8.计数排序

function countingSort(arr, maxValue) {
  var bucket = new Array(maxValue+1),
    sortedIndex = 0;
    arrLen = arr.length,
    bucketLen = maxValue + 1;

  for (var i = 0; i < arrLen; i++) {
    if (!bucket[arr[i]]) {
      bucket[arr[i]] = 0;
    }
    bucket[arr[i]]++;
  }

  for (var j = 0; j < bucketLen; j++) {
    while(bucket[j] > 0) {
      arr[sortedIndex++] = j;
      bucket[j]--;
    }
  }

  return arr;
}

9.桶排序

function bucketSort(arr, bucketSize) {
  if (arr.length === 0) {
    return arr;
  }

  var i;
  var minValue = arr[0];
  var maxValue = arr[0];
  for (i = 1; i < arr.length; i++) {
    if (arr[i] < minValue) {
      minValue = arr[i];                //输入数据的最小值
    } else if (arr[i] > maxValue) {
      maxValue = arr[i];                //输入数据的最大值
    }
  }

  //桶的初始化
  var DEFAULT_BUCKET_SIZE = 5;            //设置桶的默认数量为5
  bucketSize = bucketSize || DEFAULT_BUCKET_SIZE;
  var bucketCount = Math.floor((maxValue - minValue) / bucketSize) + 1;   
  var buckets = new Array(bucketCount);
  for (i = 0; i < buckets.length; i++) {
    buckets[i] = [];
  }

  //利用映射函数将数据分配到各个桶中
  for (i = 0; i < arr.length; i++) {
    buckets[Math.floor((arr[i] - minValue) / bucketSize)].push(arr[i]);
  }

  arr.length = 0;
  for (i = 0; i < buckets.length; i++) {
    insertionSort(buckets[i]);                      //对每个桶进行排序，这里使用了插入排序
    for (var j = 0; j < buckets[i].length; j++) {
      arr.push(buckets[i][j]);                      
    }
  }

  return arr;
}

10.基数排序

//LSD Radix Sort
var counter = [];
function radixSort(arr, maxDigit) {
  var mod = 10;
  var dev = 1;
  for (var i = 0; i < maxDigit; i++, dev *= 10, mod *= 10) {
    for(var j = 0; j < arr.length; j++) {
      var bucket = parseInt((arr[j] % mod) / dev);
      if(counter[bucket]==null) {
        counter[bucket] = [];
      }
      counter[bucket].push(arr[j]);
    }
    var pos = 0;
    for(var j = 0; j < counter.length; j++) {
      var value = null;
      if(counter[j]!=null) {
        while ((value = counter[j].shift()) != null) {
          arr[pos++] = value;
        }
      }
    }
  }
  return arr;
}

JavaScript数组去重（12种方法，史上最全）

作者：沉静地闪光
链接：https://juejin.im/post/5e91b01651882573716a9b23
来源：segmentfault

1.利用ES6 Set去重（ES6中最常用）

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

1.利用ES6 Set去重（ES6中最常用）

// 不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 // [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

2.利用for嵌套for，然后splice去重（ES5中最常用）

// 双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
function unique(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {         //第一个等同于第二个，splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]
// NaN和{}没有去重，两个null直接消失了

3.利用indexOf去重

// 新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。
function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (array.indexOf(arr[i]) === -1) {
      array.push(arr[i])
    }
  }
  return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]
// NaN、{}没有去重

4.利用sort()

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return;
  }
  arr = arr.sort()
  var arrry = [arr[0]];
  for (var i = 1; i < arr.length; i++) {
    if (arr[i] !== arr[i - 1]) {
      arrry.push(arr[i]);
    }
  }
  return arrry;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]
// NaN、{}没有去重

5.利用对象的属性不能相同的特点进行去重（这种数组去重的方法有问题，不建议用，有待改进）

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var arrry = [];
  var obj = {};
  for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      arrry.push(arr[i])
      obj[arr[i]] = 1
    } else {
      obj[arr[i]]++
    }
  }
  return arrry;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", 15, false, undefined, null, NaN, 0, "a", {…}]
// 两个true直接去掉了，NaN和{}去重

6.利用includes

function unique(arr) {
  if (!Array.isArray(arr)) {
    console.log('type error!')
    return
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
    if (!array.includes(arr[i])) {//includes 检测数组是否有某个值
      array.push(arr[i]);
    }
  }
  return array
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

7.利用hasOwnProperty

function unique(arr) {
  var obj = {};
  return arr.filter(function (item, index, arr) {
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]
// 所有的都去重了

8.利用filter

function unique(arr) {
  return arr.filter(function (item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

9.利用递归去重

function unique(arr) {
  var array = arr;
  var len = array.length;
  array.sort(function (a, b) {   //排序后更加方便去重
    return a - b;
  })
  function loop(index) {
    if (index >= 1) {
      if (array[index] === array[index - 1]) {
        array.splice(index, 1);
      }
      loop(index - 1);    //递归loop，然后数组去重
    }
  }
  loop(len - 1);
  return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

10.利用Map数据结构去重

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if (map.has(arr[i])) {  // 如果有该key值
      map.set(arr[i], true);
    } else {
      map.set(arr[i], false);   // 如果没有该key值
      array.push(arr[i]);
    }
  }
  return array;
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

11.利用reduce+includes

function unique(arr) {
  return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

12.[...new Set(arr)]

[...new Set(arr)] 
//代码就是这么少----（其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码）

算法

作者：何时夕
链接：https://juejin.im/post/5e91b01651882573716a9b23
来源：掘金

1.全排列

function permutate(str) {
  var array = str.split('');
  function loop(array, pre = []) {
    if (array.length == 1) {
      return [pre.concat(array).join('')];
    }
    let res = [];
    for (let index = 0; index < array.length; index++) {
      var first = array.pop();
      res = res.concat(loop(array, [...pre, first]));
      array.unshift(first);
    }
    return res;
  }
  return Array.from(new Set(loop(array)))
}

2.二分搜索

function BinarySearch1 (arr, target) {
  return search(arr, target, 0, arr.length - 1)
  function search (arr, target, from, to) {
    if (from > to) {
      return -1
    }
    const mid = Math.floor((from + to)/2)
    if (arr[mid] > target) {
      return search(arr, target, from, mid - 1)
    } else if (arr[mid] < target) {
      return search(arr, target, mid + 1, to)
    } else {
      return mid
    }
  }
}
function BinarySearch2 (arr, target) {
  let from = 0
  let to = arr.length - 1
  let mid = Math.floor((from + to)/2)
  while (from <= to) {
    mid = Math.floor((from + to)/2)
    if (arr[mid] > target) {
      to = mid - 1
    } else if (arr[mid] < target) {
      from = mid + 1
    } else {
      return mid
    }
  }
  return -1
}

常用字符串

作者：前端小智
链接：https://juejin.im/post/5d6866936fb9a06ada54c642
来源：掘金

1.charAt(x)

// charAt(x)返回字符串中x位置的字符，下标从 0 开始。
// charAt(x)
var myString = 'jQuery FTW!!!';
console.log(myString.charAt(7));
// output: F

2.charCodeAt(x)

// charCodeAt(x)返回字符串中x位置处字符的unicode值。
// charCodeAt(position)
var message="jquery4u"
// alert "113"
alert(message.charCodeAt(1)

3.concat(v1,v2..)

// concat() 方法用于连接两个或多个字符串，此方法不改变现有的字符串，返回拼接后的新的字符串。
// concat(v1, v2,..)
var message="Sam"
var final=message.concat(" is a"," hopeless romantic.")
// alerts "Sam is a hopeless romantic."
alert(final)

4.fromCharcode(c1,c2)

// fromCharcode(c1,c2)转换一组Unicode值转换为字符。
// fromCharCode(c1, c2,...)
console.log(String.fromCharCode(97,98,99,120,121,122))
// output: abcxyz
console.log(String.fromCharCode(72,69,76,76,79))
// output: HELLO

5.indexOf(substr, [start])

// indexOf方法搜索并(如果找到)返回字符串中搜索到的字符或子字符串的索引。如果没有找到，则返回-1。Start是一个可选参数，指定字符串中开始搜索的位置，默认值为0。
// indexOf(char/substring)
var sentence="Hi, my name is Sam!"
if (sentence.indexOf("Sam")!=-1)
alert("Sam is in there!")

6.lastIndexOf(substr, [start])

// lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引, 如果未找到，则返回-1。 “Start”是一个可选参数，指定字符串中开始搜索的位置, 默认值为string.length-1。
// lastIndexOf(substr, [start])
var myString = 'javascript rox';
console.log(myString.lastIndexOf('r'));
// output: 11

7.match(regexp)

// 根据正则表达式在字符串中搜索匹配项。如果没有找到匹配项，则返回一个信息数组或null。
// match(regexp) //select integers only
var intRegex = /[0-9 -()+]+$/;  
var myNumber = '999';
var myInt = myNumber.match(intRegex);
console.log(isInt);
// output: 999
var myString = '999 JS Coders';
var myInt = myString.match(intRegex);
console.log(isInt);
// output: null

8.replace(regexp/substr, replacetext)

// replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
// replace(substr, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(/JavaScript/i, "jQuery"));
// output: 999 jQuery Coders
// replace(regexp, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(new RegExp( "999", "gi" ), "The"));
// output: The JavaScript Coders

9.search(regexp)

// search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，如果找到，返回与 regexp 相匹配的子串的起始位置，否则返回 -1。
// search(regexp)
var intRegex = /[0-9 -()+]+$/;  
var myNumber = '999';
var isInt = myNumber.search(intRegex);
console.log(isInt);
// output: 0

10.slice(start, [end])

// slice() 方法可提取字符串的某个部分，返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
// slice(start, end)
var text="excellent"
text.slice(0,4) // returns "exce"
text.slice(2,4) // returns "ce"

11.split(delimiter, [limit])

// split() 方法用于把一个字符串分割成字符串数组，返回一个字符串数组返回的数组中的字串不包括 delimiter自身。 可选的“limit”是一个整数，允许各位指定要返回的最大数组的元素个数。
'abc'.split()
// ["abc"]
'abc'.split('')
// ["a", "b", "c"]
'ab, c'.split(',')
// ["ab", " c"]

12.substr(start, [length])

// substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串，包含从 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到该字符串的结尾的字符。
// substr(from, to)
var text="excellent"
text.substr(0,4) //returns "exce"
text.substr(2,4) //returns "cell"

13.substring(from, [to])

// substring() 方法用于提取字符串中介于两个指定下标之间的字符，方返回的子串包括 start 处的字符，但不包括 stop 处的字符，to 可选，如果省略该参数，那么返回的子串会一直到字符串的结尾。
// substring(from, [to])
var myString = 'javascript rox';
myString = myString.substring(0,10);
console.log(myString)
// output: javascript

14.toLowerCase()

// toLowerCase() 方法用于把字符串转换为小写。
// toLowerCase()
var myString = 'JAVASCRIPT ROX';
myString = myString.toLowerCase();
console.log(myString)
// output: javascript rox

15.toUpperCase()

// toUpperCase() 方法用于把字符串转换为大写。
// toUpperCase()
var myString = 'javascript rox';
myString = myString.toUpperCase();
console.log(myString)
// output: JAVASCRIPT ROX

16. includes()

// includes() 方法用于检查字符串是否包含指定的字符串或字符。
// includes()
var mystring = "Hello, welcome to edureka";
var n = mystring.includes("edureka");
// output: True

17. endsWith()

// endsWith()函数检查字符串是否以指定的字符串或字符结束。
// endsWith()
var mystr = "List of javascript functions";
var n = mystr.endsWith("functions");
// output: True

18. repeat()

// repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
// repeat()
var string = "Welcome to Edureka";
string.repeat(2);
// output: Welcome to Edureka Welcome to Edureka

19. valueOf()

// valueOf() 方法返回一个String对象的原始值（primitive value），该值等同于String.prototype.toString()。
// valueOf()
var mystr = "Hello World!";
var res = mystr.valueOf();
// output: Hello World!

20. trim()

// trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR）
// trim()
var str = "     Hello Edureka!     ";
alert(str.trim());

原生js实现api

作者：神三元
链接：https://juejin.im/post/5d635566e51d4561e224a360
来源：掘金

1.用ES5实现数组的map方法

// 1.回调函数的参数有哪些，返回值如何处理。
// 2.不修改原来的数组。
Array.prototype.MyMap = function(fn, context){
  var arr = Array.prototype.slice.call(this);//由于是ES5所以就不用...展开符了
  var mappedArr = [];
  for (var i = 0; i < arr.length; i++ ){
    mappedArr.push(fn.call(context, arr[i], i, this));
  }
  return mappedArr;
}

2.用ES5实现数组的reduce方法

// 1.初始值不传怎么处理
// 2.回调函数的参数有哪些，返回值如何处理。
Array.prototype.myReduce = function(fn, initialValue) {
  var arr = Array.prototype.slice.call(this);
  var res, startIndex;
  res = initialValue ? initialValue : arr[0];
  startIndex = initialValue ? 0 : 1;
  for(var i = startIndex; i < arr.length; i++) {
    res = fn.call(null, res, arr[i], i, this);
  }
  return res;
}

3.实现call/apply

// 思路: 利用this的上下文特性。
//实现apply只要把下一行中的...args换成args即可 
Function.prototype.myCall = function(context = window, ...args) {
  let func = this;
  let fn = Symbol("fn");
  context[fn] = func;

  let res = context[fn](...args);//重点代码，利用this指向，相当于context.caller(...args)

  delete context[fn];
  return res;
}

4.实现Object.create方法(常用)

function create(proto) {
  function F() {};
  F.prototype = proto;
  F.prototype.constructor = F;
  
  return new F();
}

5.实现bind方法

// 1.对于普通函数，绑定this指向
// 2.对于构造函数，要保证原函数的原型对象上的属性不能丢失
Function.prototype.bind = function(context, ...args) {
  let self = this;//谨记this表示调用bind的函数
  let fBound = function() {
      //this instanceof fBound为true表示构造函数的情况。如new func.bind(obj)
      return self.apply(this instanceof fBound ? this : context || window, args.concat(Array.prototype.slice.call(arguments)));
  }
  fBound.prototype = Object.create(this.prototype);//保证原函数的原型对象上的属性不丢失
  return fBound;
}

6.实现new关键字

// 1.创建一个全新的对象，这个对象的__proto__要指向构造函数的原型对象
// 2.执行构造函数
// 3.返回值为object类型则作为new方法的返回值返回，否则返回上述全新对象
function myNew(fn, ...args) {
  let instance = Object.create(fn.prototype);
  let res = fn.apply(instance, args);
  return typeof res === 'object' ? res: instance;
}

7.实现instanceof的作用

// 原型链的向上查找。
function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left);
  while(true) {
    if(proto == null) return false;
    if(proto == right.prototype) return true;
    proto = Object.getPrototypeof(proto);
  }
}

8.实现单例模式

// 用闭包和Proxy属性拦截
function proxy(func) {
  let instance;
  let handler = {
    construct(target, args) {
      if(!instance) {
        instance = Reflect.construct(func, args);
      }
      return instance;
    }
  }
  return new Proxy(func, handler);
}

9.实现数组的flat

JS数组扁平化(flat)方法总结

10.实现防抖功能

// 如果在定时器的时间范围内再次触发，则重新计时。
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

11.实现节流功能

// 如果在定时器的时间范围内再次触发，则不予理睬，等当前定时器完成，才能启动下一个定时器。
const throttle = (fn, delay = 500) => {
  let flag = true;
  return (...args) => {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
};

12.用发布订阅模式实现EventEmit

基于"发布-订阅"的原生JS插件封装中的手写发布订阅部分。

13.实现深拷贝

// 以下为简易版深拷贝，没有考虑循环引用的情况和Buffer、Promise、Set、Map的处理，如果一一实现，过于复杂，面试短时间写出来不太现实，如果有兴趣可以去这里深入实现:
const clone = parent => {
  // 判断类型
  const isType =  (target, type) => `[object ${type}]` === Object.prototype.toString.call(target)
  // 处理正则
  const getRegExp = re => {
    let flags = "";
    if (re.global) flags += "g";
    if (re.ignoreCase) flags += "i";
    if (re.multiline) flags += "m";
    return flags;
  };
  const _clone = parent => {
    if (parent === null) return null;
    if (typeof parent !== "object") return parent;
    let child, proto;
    if (isType(parent, "Array")) {
      // 对数组做特殊处理
      child = [];
    } else if (isType(parent, "RegExp")) {
      // 对正则对象做特殊处理
      child = new RegExp(parent.source, getRegExp(parent));
      if (parent.lastIndex) child.lastIndex = parent.lastIndex;
    } else if (isType(parent, "Date")) {
      // 对Date对象做特殊处理
      child = new Date(parent.getTime());
    } else {
      // 处理对象原型
      proto = Object.getPrototypeOf(parent);
      // 利用Object.create切断原型链
      child = Object.create(proto);
    }
    for (let i in parent) {
      // 递归
      child[i] = _clone(parent[i]);
    }
    return child;
  };
  return _clone(parent);
};

14.实现Promise

我如何实现Promise

15.使用ES5实现类的继承效果

ES5实现继承的那些事

实用的WEB API

作者：聪明的汤姆
链接：https://juejin.im/post/5d5df391e51d453b1e478ad0
来源：掘金

1. querySelector

// 无论如何只返回一个元素，如果有多个素，那也只返回第一个✅
// 作用在document
document.querySelector("#nav"); // 获取文档中id="nav"的元素
document.querySelector(".nav"); // 获取文档中class="nav"的元素
document.querySelector("#nav li:first-child"); // 获取文档中id="nav"下面的第一个li元素
// 也可以作用在其他元素
let nav = dodocument.querySelector("#nav");
nav.querySelector("li"); // 如果有多个li的话，返回第一个li

2. querySelectorAll

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 这里假设返回2个
// 返回的值是一个类数组，可以使用forEach（有些浏览器无法使用，建议还是转一下），但是无法使用filter、map等，需要转换一下：
Array.from(list).map();

3. closest

// 跟querySelector相反，该元素可以向上查询，也就是可以查询到父元素：
document.querySelector("li").closest("#nav");

4. dataset

// 虽然可以用getAttribute方法获取任何属性值，但是性质却不一样，这是开发规范问题，凡是自定义属性都要加上data-前缀哦✅
<p data-name="蜘蛛侠" data-age="16"></p>
document.querySelector("p").dataset; // {name: "蜘蛛侠", age: "16"}

5. URLSearchParams

// url地址参数: "?name=蜘蛛侠&age=16"
new URLSearchParams(location.search).get("name"); // 蜘蛛侠

6. hidden

// 这是一个html属性，规定元素是否隐藏，表现跟css的display: none一致：
<div hidden>我被隐藏了</div>
document.querySelector("div").hidden = true / false;

7. contenteditable

<p contenteditable>我是P元素，但是我也可以被编辑</p>
<!-- style编辑进行热更新 -->
<body>
  <style contenteditable style="display: block;">
    html {
      background-color: #fff;
    }
  </style>
</body>

8. spellcheck

<!-- 默认就是true，可省略 -->
<textarea spellcheck="true"></textarea>
<!-- 设置不检查： -->
<textarea spellcheck="false"></textarea>

9. classList

<p class="title"></p>
let elem = document.querySelector("p");
// 增加类名
elem.classList.add("title-new"); // "title title-new"
// 删除类名
elem.classList.remove("title"); // "title-new"
// 切换类名（有则删、无则增，常用于一些切换操作，如显示/隐藏）
elem.classList.toggle("title"); // "title-new title"
// 替换类名
elem.classList.replace("title", "title-old"); // "title-new title-old"
// 是否包含指定类名
elem.classList.contains("title"); // false

10. getBoundingClientRect

elem.getBoundingClientRect();
// 返回
{
  x: 604.875,
  y: 1312,
  width: 701.625,
  height: 31,
  top: 1312,
  right: 1306.5,
  bottom: 1343,
  left: 604.875
}

11. contains

<div>
  <p></p>
</div>
document.querySelector("div").contains(document.querySelector("p")); // true

12. online state

window.addEventListener("online", xxx);
window.addEventListener("offline", () => {
  alert("你断网啦！");
});

13. battery state

navigator.getBattery().then(battery => console.log(battery));
// 返回
{
  charging, // 是否在充电
  chargingTime, // 充满电所需时间
  dischargingTime, // 当前电量可使用时间
  level, 剩余电量
  onchargingchange, // 监听充电状态变化
  onchargingtimechange, // 监听充满电所需时间变化
  ondischargingtimechange, // 监听当前电量可使用时间变化
  onlevelchange // 监听电量变化
}

14. vibration

// 震动一次
navigator.vibrate(100);
// 连续震动，震动200ms、暂停100ms、震动300ms
navigator.vibrate([200, 100, 300]);

15. page visibility

// 使用场景：当程序切到后台的时候，如果当前有视频播放或者一些动画执行，可以先暂停✅
document.addEventListener("visibilitychange", () => {
  console.log(`页面可见性：${document.visibilityState}`);
});

16. deviceOrientation

陀螺仪，也就是设备的方向，又名重力感应，该API在IOS设备上失效的解决办法，将域名协议改成https；
window.addEventListener("deviceorientation", event => {
  let {
    alpha,
    beta,
    gamma
  } = event;
  console.log(`alpha：${alpha}`);
  console.log(`beta：${beta}`);
  console.log(`gamma：${gamma}`);
});

17. toDataURL

// 这个canvas的API，作用是将画布的内容转换成一个base64的图片地址；
let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");
// 画东西
let url = canvas.toDataURL("image/png"); // 将画布内容转换成base64地址

18. customEvent

// 监听自定义事件：
window.addEventListener("follow", event => {
  console.log(event.detail); // 输出 {name: "前端宇宙情报局"}
});
// 派发自定义事件：
window.dispatchEvent(new CustomEvent("follow", {
  detail: {
    name: "前端宇宙情报局"
  }
}));

19. notification

// PC端的桌面通知，如网页端的微信，当收到消息时，右下角会出现一个通知（尽管你把浏览器最小化），因为这个通知时独立于浏览器的，是系统的一个原生控件；
const notice = new Notification("前端宇宙情报局", {
  body: "这20个不常用的Web API真的有用吗?，别问，问就是有用🈶",
  icon: "我的掘金头像",
  data: {
    url: "https://www.baidu.com"
  }
});
// 点击回调
notice.onclick = () => {
  window.open(notice.data.url); // 当用户点击通知时，在浏览器打开百度网站
}
// 注意：想要成功的调起通知，首先要用户的授权✅
Notification.requestPermission(prem => {
  prem == "granted" // 同意
  prem == "denied" // 拒绝
})
// 所以，再调用之前先向用户发起请求：
let permission = Notification.permission;
if (permission == "granted") {
  // 已同意，开始发送通知
  ...
} else if (permission == "denied") {
  // 不同意，发不了咯
} else {
  // 其他状态，可以重新发送授权提示
  Notification.requestPermission();
}

20. fullScreen

/**
 * @method launchFullScreen 开启全屏
 * @param {Object} elem = document.documentElement 作用的元素
 */
const launchFullScreen = (elem = document.documentElement) => {
  if(elem.requestFullScreen) {
    elem.requestFullScreen();
  } else if(elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if(elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  }
}
/**
 * @method exitFullScreen 关闭全屏
 */
const exitFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

21. orientation

// 可以监听用户手机设备的旋转方向变化；
window.addEventListener("orientationchange", () => {
  document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`;
}, false);

// 也可以使用css的媒体查询：
/* 竖屏时样式 */
@media all and (orientation: portrait) {
  body::after {
    content: "竖屏"
  }
}
/* 横屏时样式 */
@media all and (orientation: landscape) {
  body::after {
    content: "横屏"
  }
}

常用数组

方法名	对应版本	功能	原数组是否改变
concat()	ES5-	合并数组，并返回合并之后的数据	n
join()	ES5-	使用分隔符，将数组转为字符串并返回	n
pop()	ES5-	删除最后一位，并返回删除的数据	y
shift()	ES5-	删除第一位，并返回删除的数据	y
unshift()	ES5-	在第一位新增一或多个数据，返回长度	y
push()	ES5-	在最后一位新增一或多个数据，返回长度	y
reverse()	ES5-	反转数组，返回结果	y
slice()	ES5-	截取指定位置的数组，并返回	n
sort()	ES5-	排序（字符规则），返回结果	y
splice()	ES5-	删除指定位置，并替换，返回删除的数据	y
toString()	ES5-	直接转为字符串，并返回	n
valueOf()	ES5-	返回数组对象的原始值	n
indexOf()	ES5	查询并返回数据的索引	n
lastIndexOf()	ES5	反向查询并返回数据的索引	n
forEach()	ES5	参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值	n
map()	ES5	同forEach，同时回调函数返回数据，组成新数组由map返回	n
filter()	ES5	同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回	n
every()	ES5	同forEach，同时回调函数返回布尔值，全部为true，由every返回true	n
some()	ES5	同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true	n
reduce()	ES5	归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回	n
reduceRight()	ES5	反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回	n

表达式全集

字符	描述
\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\”匹配“\”而“(”则匹配“(”。
^	匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。
$	匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。
*	匹配前面的子表达式零次或多次。例如，zo能匹配“z”以及“zoo”。等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。
?	匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。
{n}	n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。
{n,}	n是一个非负整数。至少匹配n次。例如，“o{2,}”不能匹配“Bob”中的“o”，但能匹配“foooood”中的所有o。“o{1,}”等价于“o+”。“o{0,}”则等价于“o*”。
{n,m}	m和n均为非负整数，其中n<=m。最少匹配n次且最多匹配m次。例如，“o{1,3}”将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。请注意在逗号和两个数之间不能有空格。
?	当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“oooo”，“o+?”将匹配单个“o”，而“o+”将匹配所有“o”。
.	匹配除“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像“(.
(pattern)	匹配pattern并获取这一匹配。所获取的匹配可以从产生的Matches集合得到，在VBScript中使用SubMatches集合，在JScript中则使用$0…$9属性。要匹配圆括号字符，请使用“(”或“)”。
(?:pattern)	匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用或字符“(
(?=pattern)	正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，“Windows(?=95
(?!pattern)	正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如“Windows(?!95
(?<=pattern)	反向肯定预查，与正向肯定预查类拟，只是方向相反。例如，“(?<=95
(?<!pattern)	反向否定预查，与正向否定预查类拟，只是方向相反。例如“(?<!95
x	y
[xyz]	字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。
[^xyz]	负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“p”。
[a-z]	字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符。
\b	匹配一个单词边界，也就是指单词和空格间的位置。例如，“er\b”可以匹配“never”中的“er”，但不能匹配“verb”中的“er”。
\B	匹配非单词边界。“er\B”能匹配“verb”中的“er”，但不能匹配“never”中的“er”。
\cx	匹配由x指明的控制字符。例如，\cM匹配一个Control-M或回车符。x的值必须为A-Z或a-z之一。否则，将c视为一个原义的“c”字符。
\d	匹配一个数字字符。等价于[0-9]。
\D	匹配一个非数字字符。等价于[^0-9]。
\f	匹配一个换页符。等价于\x0c和\cL。
\n	匹配一个换行符。等价于\x0a和\cJ。
\r	匹配一个回车符。等价于\x0d和\cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于[^ \f\n\r\t\v]。
\t	匹配一个制表符。等价于\x09和\cI。
\v	匹配一个垂直制表符。等价于\x0b和\cK。
\w	匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
\W	匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。
\xn	匹配n，其中n为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，“\x41”匹配“A”。“\x041”则等价于“\x04&1”。正则表达式中可以使用ASCII编码。.
\num	匹配num，其中num是一个正整数。对所获取的匹配的引用。例如，“(.)\1”匹配两个连续的相同字符。
\n	标识一个八进制转义值或一个向后引用。如果\n之前至少n个获取的子表达式，则n为向后引用。否则，如果n为八进制数字（0-7），则n为一个八进制转义值。
\nm	标识一个八进制转义值或一个向后引用。如果\nm之前至少有nm个获得子表达式，则nm为向后引用。如果\nm之前至少有n个获取，则n为一个后跟文字m的向后引用。如果前面的条件都不满足，若n和m均为八进制数字（0-7），则\nm将匹配八进制转义值nm。
\nml	如果n为八进制数字（0-3），且m和l均为八进制数字（0-7），则匹配八进制转义值nml。
\un	匹配n，其中n是一个用四个十六进制数字表示的Unicode字符。例如，\u00A9匹配版权符号（©）。

常用正则表达式

name	reg
用户名	/^[a-z0-9_-]{3,16}$/
密码	/^[a-z0-9_-]{6,18}$/
十六进制值	/^#?([a-f0-9]{6}
电子邮箱	/^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/ /^[a-z\d]+(.[a-z\d]+)*@(\da-z?)+(.{1,2}[a-z]+)+$/
URL	/^(https?://)?([\da-z.-]+).([a-z.]{2,6})([/\w .-])/?$/
IP 地址	/((2[0-4]\d
/^(?:(?:25[0-5]	2[0-4][0-9]
HTML 标签	/^<([a-z]+)([^<]+)(?:>(.)</\1>
删除代码\注释	(?<!http:
Unicode编码中的汉字范围	/^[\u2E80-\u9FFF]+$/

HTTP 常用请求头

作者：何时夕
链接：https://juejin.im/post/5e91b01651882573716a9b23
来源：掘金

协议头	说明
Accept	可接受的响应内容类型（Content-Types）。
Accept-Charset	可接受的字符集
Accept-Encoding	可接受的响应内容的编码方式。
Accept-Language	可接受的响应内容语言列表。
Accept-Datetime	可接受的按照时间来表示的响应内容版本
Authorization	用于表示HTTP协议中需要认证资源的认证信息
Cache-Control	用来指定当前的请求/回复中的，是否使用缓存机制。
Connection	客户端（浏览器）想要优先使用的连接类型
Cookie	由之前服务器通过Set-Cookie（见下文）设置的一个HTTP协议Cookie
Content-Length	以8进制表示的请求体的长度
Content-MD5	请求体的内容的二进制 MD5 散列值（数字签名），以 Base64 编码的结果
Content-Type	请求体的MIME类型 （用于POST和PUT请求中）
Date	发送该消息的日期和时间（以RFC 7231中定义的”HTTP日期”格式来发送）
Expect	表示客户端要求服务器做出特定的行为
From	发起此请求的用户的邮件地址
Host	表示服务器的域名以及服务器所监听的端口号。如果所请求的端口是对应的服务的标准端口（80），则端口号可以省略。
If-Match	仅当客户端提供的实体与服务器上对应的实体相匹配时，才进行对应的操作。主要用于像 PUT 这样的方法中，仅当从用户上次更新某个资源后，该资源未被修改的情况下，才更新该资源。
If-Modified-Since	允许在对应的资源未被修改的情况下返回304未修改
If-None-Match	允许在对应的内容未被修改的情况下返回304未修改（ 304 Not Modified ），参考 超文本传输协议 的实体标记
If-Range	如果该实体未被修改过，则向返回所缺少的那一个或多个部分。否则，返回整个新的实体
If-Unmodified-Since	仅当该实体自某个特定时间以来未被修改的情况下，才发送回应。
Max-Forwards	限制该消息可被代理及网关转发的次数。
Origin	发起一个针对跨域资源共享的请求（该请求要求服务器在响应中加入一个Access-Control-Allow-Origin的消息头，表示访问控制所允许的来源）。
Pragma	与具体的实现相关，这些字段可能在请求/回应链中的任何时候产生。
Proxy-Authorization	用于向代理进行认证的认证信息。
Range	表示请求某个实体的一部分，字节偏移以0开始。
Referer	表示浏览器所访问的前一个页面，可以认为是之前访问页面的链接将浏览器带到了当前页面。Referer其实是Referrer这个单词，但RFC制作标准时给拼错了，后来也就将错就错使用Referer了。
TE	浏览器预期接受的传输时的编码方式：可使用回应协议头Transfer-Encoding中的值（还可以使用”trailers”表示数据传输时的分块方式）用来表示浏览器希望在最后一个大小为0的块之后还接收到一些额外的字段。
User-Agent	浏览器的身份标识字符串
Upgrade	要求服务器升级到一个高版本协议。
Via	告诉服务器，这个请求是由哪些代理发出的。
Warning	一个一般性的警告，表示在实体内容体中可能存在错误。

Math对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回数的绝对值。
acos(x)	返回数的反余弦值。
asin(x)	返回数的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。