JavaScript【查缺补漏】

最新推荐文章于 2022-12-16 16:38:51 发布

隔壁老陈56

最新推荐文章于 2022-12-16 16:38:51 发布

阅读量307

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_53497173/article/details/127993814

版权

概念篇

高阶函数

如果函数符合下面规范的任意一个，那该函数就称之为高阶函数

1、若A函数，接收的参数是一个函数，那么A就是高阶函数。

2、若A函数，调用的返回值是一个函数，那么A是高阶函数。

常见的高阶函数:Promise、setTimeout、arr.map()等等

例子：

1、接收参数是函数的

function add(a,b,f){
    return f(a)+f(b)
}

let num = add(2,-2,Math.abs)

console.log(num)//4

2、返回参数是函数的

let arr = [1,2,3,4,5]
let newArr = arr.map(
    function f(a) {
        return a * a
    })

console.log(newArr)//[1,4,9,16,25]

函数柯里化

定义：通过函数的调用继返回函数的方式，实现多次接收参数最后进行统一处理函数的编码形式。

例子：

function sum(a) {
    return(b)=>{
        return(c)=>{
            return a+b+c
        }
    }
}
const res = sum(1)(2)(3)

技巧篇

js小技巧总结，部分来自GitHub开源分享

位运算

使用左移运算符 << 迅速得出2的次方

  1 << 2      // console.log(1 << 10 ) 结果：4 (2的2次方)
  1 << 10       // console.log(1 << 10 ) 结果：1024 (2的10次方)

使用 & 判断奇偶性

  7 & 1   // console.log(7 & 1 ) 结果：1 (基数 & 1 等于 1)
  8 & 1   // 0 (偶数 & 1 等于 0)

使用 !! 将数字转为布尔值

  !!1     // true
  !!0     // false
  !!5.6   // true

使用~、>>、<<、>>>、|来取整

  ~~5.6       // 5
  5.6 >> 0    // 5
  5.6 << 0    // 5
  5.6 | 0     // 5
  5.6 >>> 0   // 5

  ！注意不能用于负数

使用^来完成值交换

  // before
  var a = 1, b = 2, temp;
  temp = a;
  a = b;
  b = temp;

  // after
  var a = 1, b = 2;
  a ^= b;
  b ^= a;
  a ^= b;
  console.log(a)
  console.log(b)

  // ES6
  [b, a] = [a = 1, b = 2]

使用 n + 0.5 | 0 来替代 Math.round()

  var a = 5.6;
  console.log( a + 0.5 | 0 )    // 6

  var a = -5.6;
  cosnole.log( a - 0.5 | 0 )    // -6

字符串

使用toString(16)取随机数字符串

  Math.random().toString(16).substring(2, 15);    // 最多取13位

使用.link() 创建链接

  'baidu'.link( 'http://www.baidu.com' )

使用 Array 来重复字符

  // before
  for (var a = "", i = 7; i--;) a+= 0;

  // after
  Array(7).join(0)

  // ES6
  "0".repeat(6)

返回字符串的字节长度

  const byteSize = str => new Blob([str]).size;
  byteSize('Hello World');

数组

创建过去七天的数组，如果将代码中的减号换成加号，你将得到未来7天的数组集合

  [...Array(7).keys()].map(days=>new Date(Date.now()-86400000*days));

取数组最大值

  Math.max(...[2, 1, 6, 4])

扁平化n维数组

  [1,2,['a',['3','4']]].flat(n) //n表示维度, n=Infinity时为无限大

类数组转数组

  // ES5
  Array.prototype.slice.call(arrlike)

  // ES6
  [...arrlike]
  -
  Array.from(arguments)

函数

1.两元素是否包含关系，适用于点击非弹窗区域关闭弹窗 compareDocumentPosition/contains

var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p1.compareDocumentPosition(p2);
//返回结果 ie8+
//   0              元素一致
//   1              节点在不同的文档（或者一个在文档之外）
//   2              节点 p2 在节点 p1 之前
//   4              节点 p1 在节点 p2 之前
//   8              节点 p2 包含节点 p1
//   16             节点 p1 包含节点 p2
//   32             浏览器的私有使用
//   20             一旦一个节点 p1 包含另一个节点 p2，包含 p2（+16） 且在 p1 之前（+4），则最后的结果是数字 20

p1.contains(p2)   // 如果p1包含p2 返回true 否则返回false

数字

生成指定范围的随机整数

  const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

  randomIntegerInRange(0, 5); // 0 - 5之间随机数（包含0和5）

其他

获取URL后面参数如 localhost/index.html?a=1&b=2;

  let oQuery={};
  location.search.replace(/([^?&]+)=([^?&]+)/g,(s,k,v)=>oQuery[k]=v);
  console.log(oQuery)

判断数据类型（比较全面）

  Object.prototype.toString.call()

转义HTML，防止XSS

  const escapeHTML = str =>
  str.replace(
    /[&<>'"]/g,
    tag =>
      ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        "'": '&#39;',
        '"': '&quot;'
      }[tag] || tag)
  );
  escapeHTML('<a href="#">Im a XSS</a>');

常见技巧

小数取整

  1.234 | 0

  ~~1.234

  1.234 >> 0

妙用隐式转换

字符串转number:

  +'123'

new Date转时间戳

  +new Date()

数组/多维数组转为逗号分隔字符串(可用于多维数组转一维)

  ""+[1, 2 , 3, 3, [2, 3, 4]]

解构

交换a,b的值

  var a=1;
  var b=2;
  [a, b] = [b, a];
  console.log(a, b);

扩展运算符

取数组最大值/最小值

  Math.max(...[1,2,3])
  Math.min(...[1,2,3])

生成时间

  new Date(...[2018,6,4])

字符串转数组

  method 1:
  [...'string']

  method 2:
  Array.from('string')

合并对象

  let obj1 = {a:1, b:2};
  let obj2 = {b:3, c:4};

  {...obj1, ...obj2}
    等同于
  Object.assign(obj1, obj2)

利用URL API获取url的query值

var url = new URL('http://localhost:8000/news?a=1&b=2&c=3');
var searchParams = url.searchParams;
for (let key of searchParams.keys()){
  console.log('====');
  console.log('key === ', key);
  console.log('value === ', searchParams.get(key))
}

数字前补0

  function preFixNum(num, length) {
    return (Array(length).join('0') + num).slice(-length);
  }

数组元素为对象的去重

  [...new Set(arr.map(v => JSON.stringify(v)))].map(v => JSON.parse(v))

数组求和

  var arr = [1,2,3,4,5];

  method 1:
  var sum = eval(arr.join('+'));

  method 2:
  var sum = arr.reduce((prev,cur) => prev + cur);

金钱格式化(千分)

  let money = 11111;

  method 1:
  money.toLocaleString('en-US');

  method 2:
  Intl.NumberFormat().format(money);

  method 3:
  String(money).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

短路逻辑代替if

  isTrue && console.log(1);

RGB to Hex

  function RGBtoHEX(rgb){
    return ((1<<24) + (rgb.r<<16) + (rgb.g<<8) + rgb.b).toString(16).substr(1);
  }

延时函数:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

生成指定长度数组

  Array.from(new Array(10).keys());

快速创建a标签

  let a = '超链接'.link('https://github.com/TigerHee/shareJS');
  console.log('a === ', a)

正则进阶

捕获括号

  //匹配 'tigerHee' 并且记住匹配项
  /(tigerHee)/

非捕获括号

  //匹配 'tigerHee' 但是不记住匹配项
  /(?:tigerHee)/

先行断言

  //匹配'tiger'仅仅当'tiger'后面跟着'Hee'
  /tiger(?=Hee)/

后行断言

  //匹配'Hee'仅仅当'Hee'前面是'tiger'
  /(?<=tiger)Hee/

正向否定查找

 // 匹配'tiger'仅仅当'tiger'后面不跟着'java'
  /tiger(?!java)/