盘点30个经典常用的JavaScript知识点

更新时间：2023年04月07日 10:32:01 作者：码农键盘上的梦

这篇文章主要介绍了盘点30个经典常用的JavaScript知识点,为大家总结一篇日常经常使用可能还不知道的点,需要的朋友可以参考下

引言：

最近重温了一遍红宝书，发现一些比较好玩的写法，很多东西日常都在用，但是发现还会有不一样的写法,结合一些日常工作中使用的方法，为大家总结一篇日常经常使用可能还不知道的点，希望对你能有所帮助：

一行代码完成结构加赋值

我们日常经常使用结构赋值，一般都是先结构，再赋值，当然我们也可以一行就完成解构加赋值操作，看起来非常简化，当然可读性你懂得！

let people = { name: null, age: null };
let result = { name: '张三',  age: 16 };
 
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"张三","age":16}###

对基础数据类型进行解构

日常中我们应该用不到这样的场景，但是实际上我们也可以对基础数据类型解构

const {length : a} = '1234';
console.log(a) // 4

对数组解构快速拿到最后一项值

实际上我们是可以对数组解构赋值拿到length属性的，通过这个特性也可以做更多的事情。

const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3

将下标转为中文零一二三...

日常可能有的列表我们需要将对应的012345转为中文的一、二、三、四、五...，在老的项目看到还有通过自己手动定义很多行这样的写法，于是写了一个这样的方法转换

export function transfromNumber(number){
  const  INDEX_MAP = ['零'，'一'.....]
  if(!number) return
  if(number === 10) return INDEX_MAP[number]
  return [...number.toString()].reduce( (pre, cur) => pre  + INDEX_MAP[cur] , '' )
}

判断整数的不同方法

/* 1.任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。但是对字符串不准确 */
function isInteger(obj) {
 return obj%1 === 0
}
 
/* 1. 添加一个是数字的判断 */
function isInteger(obj) {
 return typeof obj === 'number' && obj%1 === 0
}
 
/* 2. 使用Math.round、Math.ceil、Math.floor判断 整数取整后还是等于自己。利用这个特性来判断是否是整数*/
function isInteger(obj) {
 return Math.floor(obj) === obj
}
 
/* 3. 通过parseInt判断 某些场景不准确 */
function isInteger(obj) {
 return parseInt(obj, 10) === obj
}
 
/* 4. 通过位运算符*/
function isInteger(obj) {
 return (obj | 0) === obj
}

通过css检测系统的主题色从而全局修改样式

@media的属性prefers-color-scheme就可以知道当前的系统主题，当然使用前需要查查兼容性

@media (prefers-color-scheme: dark) { //... } 
@media (prefers-color-scheme: light) { //... }

javascript也可以轻松做到

window.addEventListener('theme-mode', event =>{ 
    if(event.mode == 'dark'){}
   if(event.mode == 'light'){} 
})
 
window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { 
    if (event.matches) {} // dark mode
})

数组随机打乱顺序

通过0.5-Math.random()得到一个随机数，再通过两次sort排序打乱的更彻底,但是这个方法实际上并不够随机，如果是企业级运用，建议使用第二种洗牌算法

shuffle(arr) {
      return arr.sort(() => 0.5 - Math.random()). sort(() => 0.5 - Math.random());
 },

function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  }
  return arr
}

随机获取一个Boolean值

和上个原理相同，通过随机数获取，Math.random()的区间是0-0.99，用0.5在中间百分之五十的概率

function randomBool() {
    return 0.5 - Math.random()
}

把数组最后一项移到第一项

function (arr){
    return arr.push(arr.shift());
}

把数组的第一项放到最后一项

function(arr){
  return arr.unshift(arr.pop());
}

利用set数组去重

function uniqueArr(arr){
    return [...new Set(arr)]
}

dom节点平滑滚动到可是区域，顶部，底部

原生的scrollTo方法没有动画，类似于锚点跳转，比较生硬，可以通过这个方法会自带平滑的过度效果

function scrollTo(element) {
    element.scrollIntoView({ behavior: "smooth", block: "start" }) // 顶部
    element.scrollIntoView({ behavior: "smooth", block: "end" }) // 底部
    element.scrollIntoView({ behavior: "smooth"}) // 可视区域
}

获取随机颜色

日常我们经常会需要获取一个随机颜色，通过随机数即可完成

function getRandomColor(){
    return `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;
}

检测是否为空对象

通过使用Es6的Reflect静态方法判断他的长度就可以判断是否是空数组了，也可以通过Object.keys()来判断

function isEmpty(obj){
    return  Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
}

Boolean转换

一些场景下我们会将boolean值定义为场景，但是在js中非空的字符串都会被认为是true

function toBoolean(value, truthyValues = ['true']){
  const normalizedValue = String(value).toLowerCase().trim();
  return truthyValues.includes(normalizedValue);
}
toBoolean('TRUE'); // true
toBoolean('FALSE'); // false
toBoolean('YES', ['yes']); // true

各种数组克隆方法

数组克隆的方法其实特别多了，看看有没有你没见过的！

const clone = (arr) => arr.slice(0);
const clone = (arr) => [...arr];
const clone = (arr) => Array.from(arr);
const clone = (arr) => arr.map((x) => x);
const clone = (arr) => JSON.parse(JSON.stringify(arr));
const clone = (arr) => arr.concat([]);
const clone = (arr) => structuredClone(arr);

比较两个时间大小

通过调用getTime获取时间戳比较就可以了

function compare(a, b){
    return a.getTime() > b.getTime();
}

计算两个时间之间的月份差异

function monthDiff(startDate, endDate){
    return  Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
}

一步从时间中提取年月日时分秒

时间格式化轻松解决，一步获取到年月日时分秒毫秒，由于toISOString会丢失时区，导致时间差八小时，所以在格式化之前我们加上八个小时时间即可

function extract(date){
   const d = new Date(new Date(date).getTime() + 8*3600*1000);
  return new Date(d).toISOString().split(/[^0-9]/).slice(0, -1);
}
console.log(extract(new Date())) // ['2022', '09', '19', '18', '06', '11', '187']

判断一个参数是不是函数

有时候我们的方法需要传入一个函数回调，但是需要检测其类型，我们可以通过Object的原型方法去检测，当然这个方法可以准确检测任何类型。

function isFunction(v){
   return ['[object Function]', '[object GeneratorFunction]', '[object AsyncFunction]', '[object Promise]'].includes(Object.prototype.toString.call(v));
}

计算两个坐标之间的距离

function distance(p1, p2){
    return `Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}

检测两个dom节点是否覆盖重叠

有些场景下我们需要判断dom是否发生碰撞了或者重叠了，我们可以通过getBoundingClientRect获取到dom的x1,y1,x2,y2坐标然后进行坐标比对即可判断出来

function overlaps = (a, b) {
   return (a.x1 < b.x2 && b.x1 < a.x2) || (a.y1 < b.y2 && b.y1 < a.y2);
}

判断是否是NodeJs环境

前端的日常开发是离不开nodeJs的，通过判断全局环境来检测是否是nodeJs环境

function isNode(){
    return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
}

参数求和

之前看到有通过函数柯理化形式来求和的，通过reduce一行即可

function sum(...args){
    args.reduce((a, b) => a + b);
}

到此这篇关于盘点30个经典常用的JavaScript知识点的文章就介绍到这了,更多相关JavaScript知识点内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

JavaScript基础知识学习笔记
本文是初学javascript的时候记的学习笔记，简单介绍了javascript的定义及用法，并附上示例，适合初学者们，老鸟请出门左转。
2014-12-12
js的Map函数使用方法详解
这篇文章主要介绍了js的Map函数使用方法详解,需要的朋友可以参考下
2022-01-01
JavaScript面对国际化编程时的一些建议
这篇文章主要介绍了JavaScript面对国际化编程时的一些建议,包括时区与语言编码等一些值得注意的问题,需要的朋友可以参考下
2015-06-06
深入理解 JS 垃圾回收
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。下面我们来一起深入学习一下吧
2019-06-06
推荐10款扩展Web表单的JS插件
本篇文章给大家介绍了10款扩展Web表单的javascript的插件，一起跟着小编来学习下吧。
2017-12-12
javascript开发技术大全第2章开始JAVAScript之旅
1st JavaScript Editor ,除了有着色处，还有html标签、属性、javascript事件、函数，另外还可调用外部编辑来编辑网页，也可将常用浏览器内置在窗口中。
2011-07-07
基于JS脚本语言的基础语法详解
下面小编就为大家带来一篇基于JS脚本语言的基础语法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
javascript ajax的5种状态介绍
这篇文章主要介绍了javascript ajax的5种状态介绍,它们分别是未初始化、载入、载入完成、交互、完成,也可称之为ajax的5个过程,需要的朋友可以参考下
2014-08-08
js setTimeout opener的用法示例详解
opener: 指parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent，下面为大家介绍下其详细的使用方法，感兴趣的朋友可以参考下
2013-10-10
使用js检测浏览器的实现代码
本篇文章是对使用js检测浏览器的实现代码进行了详细的分析介绍，需要的朋友参考下
2013-05-05