前端开发中常用的一些方法(持续更新)

227 阅读4分钟

查找fn在fns中的索引

  • fns.findIndex((e) => e === fn)
  • fns.indexOf(fn)

兼容浏览器获取滚动高度

image.png

判断对象中是否含有该属性

Object.prototype.hasOwnProperty()

  • hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)
    • 不包括继承的属性
    • 两种方法判断
      • Object.prototype.hasOwnProperty.call(obj, "keyName")
      • obj.hasOwnProperty("keyName")

Object.getPrototypeOf()

  • 获取对象原型
    • Object.getPrototypeOf(obj)

Object.setPrototypeOf()

  • 设置对象原型
    • Object.setPrototypeOf(obj, protoObj);

判断两个对象是否相等

(1)把两个对象转译成字符串进行对比

JSON.stringify(object1) === JSON.stringify(object2); 

这个方法只适用于完全相同的,即键-值顺序都完全对应的对象。

对于键-值一样,但顺序不一样的对象,可以采用方法(2)

(2)Object.keys()

 1     // 列出所有的键,接着遍历数组
 2     function ifCompare(object1, object2) {
 3       var o1keys = Object.keys(object1);
 4       var o2keys = Object.keys(object2);
 5       if (o2keys.length !== o1keys.length) return false;
 6       for (let i = 0; i <= o1keys.length - 1; i++) {
 7         let key = o1keys[i];
 8         if (!o2keys.includes(key)) return false;
 9         if (object2[key] !== object1[key]) return false;
10       }
11       return true;
12     }

(3)ES6

  Object.entries(object1).toString() === Object.entries(object2).toString(); 

(4)还有lodash 的 isEqual 函数

千分位分隔符

1.Number(number)
          .toFixed(2)
          .toString()
          .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
          
2.toLocaleString(number)

css的引入

 <style lang="scss">
     @import './assets/css/global';
</style>

不需要添加scoped,不然样式无法在全局生效

错误

1.一般if后需要else

2.传参问题,有的不需要传参

3.命名问题,一定要确保名称准确无误

知识点

1.JS自定义属性 dataset

通过dataset获取自定义属性 如<div data-type="aa"></div> 可以通过document.querySelector('div').dataset.type获取

2.count++,++count

count++相当于count = count + 1 a=count++相当于a=count;count++ a=++count相当于count++;a=count

3.Array.prototype.slice.call(arguments, 0)

Array.prototype.slice.call(arguments,0)能将具有length属性的对象 转成数组 等价于[].slice.call(arguments,0) 等价于Array.from(arguments) 2022-01-20

4.sort方法

若返回值<=-1,则表示 A 在排序后的序列中出现在 B 之前。 若返回值>-1 && <1,则表示 A 和 B 具有相同的排序顺序。 若返回值>=1,则表示 A 在排序后的序列中出现在 B 之后。

5.{a:'A',b:'B'}[a] === 'A'

可以做按键判断: document.onkeydown = (event) => { if (!event) return; var code = event.keyCode || ""; if (!{ 37: 1, 38: 1, 39: 1, 40: 1 }[code]) return; event.preventDefault && event.preventDefault(); //TODO: 请实现按键控制 }; }

6.toTimeString()

把 Date 对象的时间部分转换为字符串

7.vscode快速生成react模板

rcc rccp (类定义组件+限制) rfc(函数定义组件)

8.前端随机id库

nanoid(推荐 ) nnoid()即可 uuid(较大)

10.react发布订阅库

PubSubJS

11.注释

//#region

//#endregion

12.querystring库

npm i query-string 可以将urlencoded编码转换为对象 key=value&key=value转换为{key:value,key:value} qs.stringify(obj)将obj转为urlencoded编码 qs.parse(str)将urlencoded编码转为obj

13.[].slice.call(arguments)

能将具有length属性的对象转成数组

14.数组去重

[...new Set(arr)]

Array.from(new Set(arr))

15.连接数组

arr1.concat(arr2,arr3,....)

16.浅拷贝

①.Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。但是 Object.assign()进行的是浅拷贝,拷贝的是对象的属性的引用,而不是对象本身。 var obj = { a: {a: "kobe", b: 39} }; var initalObj = Object.assign({}, obj)

②Array.prototype.concat()

let arr = [1, 3, {username: 'kobe'}]; let arr2=arr.concat();

③Array.prototype.slice()

let arr = [1, 3, {username: 'kobe'}]; let arr2=arr.slice();

②③补充:

如果该元素是个对象引用(不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。 对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。

17.深拷贝

①JSON.parse(JSON.stringify())

let arr = [1, 3, { username: ' kobe'}]; let arr4 = JSON.parse(JSON.stringify(arr)); 原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。 这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

②.手写递归方法

递归方法实现深度克隆原理:遍历对象、数组直到里边都是基本数据类型,然后再去复制,就是深度拷贝 //定义检测数据类型的功能函数 function checkedType(target) { return Object.prototype.toString.call(target).slice(8, -1) } //实现深度克隆---对象/数组 function clone(target) { //判断拷贝的数据类型 //初始化变量result 成为最终克隆的数据 let result, targetType = checkedType(target) if (targetType === 'object') { result = {} } else if (targetType === 'Array') { result = [] } else { return target } //遍历目标数据 for (let i in target) { //获取遍历数据结构的每一项值。 let value = target[i] //判断目标结构里的每一值是否存在对象/数组 if (checkedType(value) === 'Object' || checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组 //继续遍历获取到value值 result[i] = clone(value) } else { //获取到value值是基本的数据类型或者是函数。 result[i] = value; } } return result } ③函数库lodash 该函数库也有提供_.cloneDeep用来做 Deep Copy var _ = require('lodash'); var obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; var obj2 = _.cloneDeep(obj1);

18. 启动服务器

serve

npm i serve -g

终端输入serve 即可

node

express

java

19.alert默认调用toString方法

20.数组元素位置交换方法

  • 常规方法
function swap(arr, i, j) {
	let temp = arr[i]
	arr[j] = temp
	arr[i] = temp
}
  • 异或方法
    • 相同为0,不同为1
    • 不用开辟新的空间存储临时变量
    • 但是i和j是一个位置的话会出错,
function swap(arr, i, j) {
	arr[i] = arr[i] ^ arr[j]
	arr[j] = arr[i] ^ arr[j]
	arr[i] = arr[i] ^ arr[j]
}

21.提取出最右边的1

  • 取反加一,与运算
    • let rightOne = eor & (~eor + 1)

22.生成随机数组

function generateRandomArray(maxSize, maxValue) {
  const lens = Math.floor(Math.random() * (maxSize + 1));
  let arr = new Array(lens);
  for (let i = 0; i < lens; i++) {
    arr[i] =
      Math.floor((maxValue + 1) * Math.random()) -
      Math.floor((maxValue + 1) * Math.random());
  }
  return arr
}

23.复制数组

function copyArray(arr) {
  if (arr === null) return null
  let res = new Array(arr.length)
  for(let i = 0; i < arr.length; i++) {
    res[i] = arr[i]
  }
  return res
}

24.格式化时间戳

    // 格式化初始时间
    formatDate (date) {
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD + ' ' + hh + mm + ss
    },

25.求数组两点(L,R)中点

  1. mid = (L + R)/ 2 数组过长时,(L + R)可能会溢出
  2. mid = L + (R - L) / 2 这样写比较保险
  3. mid = L + (R - l) >> 1 右移运算符也可以,效率也更高,在二进制中相当于除2

26.递归行为时间复杂度

  • master公式
    • T(N) = a * T(N/b) + O(N^d)
    • log(b,a) > d => 复杂度O(N^log(b,a))
    • log(b,a) < d => 复杂度O(N^d)
    • log(b,a) == d => 复杂度O(N^d * logN)