一些常用的 js 方法和语句

写在前面

“我需要一个工具方法，复制用。”歌者对长老说。

“给。”长老立刻给了歌者一个。

“您这次怎么这样爽快就给我了？”

“这又不是什么贵重东西。”

来源AI与网络，做个总结，欢迎交流沟通

文件

下载文件

function downloadFile() {
  // 创建一个隐藏的a标签用于下载文件
  let downloadLink = document.createElement('a');
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);

  // 设置a标签的href属性为文件的URL
  downloadLink.href = 'xxx';

  // 设置下载文件的名称
  downloadLink.download = 'xxx';

  // 触发点击事件开始下载文件
  downloadLink.click();

  // 下载完成后移除隐藏的a标签
  downloadLink.parentNode.removeChild(downloadLink);
}

主要应用了a标签特性，创建一个隐藏的a标签，设置其href属性，请求文件进行下载

判断文件类型

function isValidFile(file, type) {  
    let fileType = '';
    // 检查File对象的type属性
    switch(type){
        case 'pdf':
            fileType = 'application/pdf';
            break;
        case 'image':
            filterType = 'image/';
            break;
        // ....
    }
    return file.type.startsWith(fileType);  
}

这里只判断了是否是 pdf 或者 图片，也可以添加case判断是否是其他文件类型

更改 File对象 的 name 属性

function changeFileName(file, newFileNameWithoutExtension) {  
  // 获取原始文件的扩展名  
  const extension = getFileExtension(file.name);  
    
  // 构建新的文件名，包括扩展名  
  const newFileName = `${newFileNameWithoutExtension}.${extension}`;  
    
  // 创建一个新的Blob对象，它封装了原始文件的内容  
  const blob = new Blob([file], { type: file.type });  
    
  // 使用新的文件名和原始的File对象的类型创建新的File对象  
  const newFile = new File(
      [blob], 
      newFileName, 
      { type: file.type, lastModified: file.lastModified }
  );  
    
  return newFile;  
}  
  
// 之前定义的获取文件扩展名的函数  
function getFileExtension(filename) {  
  const dotIndex = filename.lastIndexOf('.');  
  if (dotIndex === -1) {  
    return ''; // 没有找到点号，返回空字符串  
  }  
  return filename.substr(dotIndex + 1).toLowerCase(); // 返回点号后的部分，并转换为小写  
}  

由于 File 对象是只读的，这里采用的是创建一个新的 File 对象的方式

数据类型

判断是否为 NaN

isNaN(data);

Number.isNaN(NaN);

NaN会先尝试将变量转化为Number类型再判断，而Number.isNaN()会先判断变量是否是Number类型，再判断是不是NaN

判断是否为 undefined

const data = undefined;
const result = typeof data === 'undefined';

判断是否为 null

const obj = null;
const result = obj === null;

判断是否为空对象 {}

const obj = {};
const result = JSON.stringify(obj) === '{}';

注意 ，上面代码中，obj == false 的结果是false

判断是否为空数组 []

const arr = [];
const result = arr.length === 0;

判断是否为 Number 类型

function validNumber(variable) {  
    // 判断变量是否存在  
    if (typeof variable !== 'undefined') {  
        // 判断变量是否为数字  
        if (typeof variable === 'number' && !isNaN(variable)) {  
            return true;  
        }  
    }  
    return false;  
}

Number 转化为 String

const num = 123;  
const str = num.toString();  

const num = 123;  
const str = String(num);  

const num = 123;  
const str = `${num}`;  

const num = 123;  
const str = "" + num; 

注意 typeof NaN 的结果是 number，所以这里加了一个 isNaN 的判断

String 转化为 Number

const str = "123";  
const num = Number(str);  

const str = "123.45";  
const intNum = parseInt(str); // 返回123  
const floatNum = parseFloat(str); // 返回123.45 

let str = "123";  
let num = +str;  

let str = "123";  
let num = **str; 

清空对象所有的属性值，保留属性名

function createEmptyValuesObject(obj) {  
  return Object.fromEntries(
      Object.entries(obj).map(([key, _]) => [key, undefined])
  ); // 或者 null  
}  

数组转化为字符串

const arr = [1, 2, 3];
const str = arr.join("");

查找数组对应值下标

function findIndexInArray(value, array) {  
    return array.indexOf(value);  
} 

注意找出的是数组中首次出现的符合条件的元素下标

求两个数组的差集

function difference(arr1, arr2) {  
    const set = new Set(arr2);  
    return arr1.filter(item => !set.has(item));  
}

这里使用Set主要是为了降低时间复杂度

求数组平均数

function average(array) {  
    // 确保数组不为空  
    if (array.length === 0) {  
        return 0;  
    }  
  
    // 使用reduce方法计算数组元素的和  
    let sum = array.reduce(
        (accumulator, currentValue) => accumulator + currentValue, 
    0);  
  
    // 计算平均数并返回结果  
    return sum / array.length;  
} 

求数组最大值

const numbers = [1, 2, 3, 4, 5];  
const max = Math.max(...numbers);