当前位置: 首页> 娱乐> 影视 > 【JavaScript-可阅读性写法】

【JavaScript-可阅读性写法】

时间:2025/7/12 10:45:35来源:https://blog.csdn.net/weixin_47416539/article/details/141327790 浏览次数:0次
  1. 使用 !! 转换为布尔值
    使用双重否定快速将任何值转换为布尔值。
let truthyValue = !!1; // true
let falsyValue = !!0; // false
  1. 可选链接 (?.)
    如果引用为空,则安全地访问嵌套对象属性而不会出现错误。
let user = {name: "John", address: {city: "New York"}};console.log(user?.address?.city); // "New York"
  1. 空值合并运算符 (??)
    使用 ?? 为空或未定义提供默认值。
  let username = null;console.log(username ?? "Guest"); // "Guest"
  1. 使用 map、filter 和 reduce 进行数组操作
    无需传统循环即可优雅地处理数组。
// Maplet numbers = [1, 2, 3, 4];let doubled = numbers.map(x => x * 2);// Filterconst evens = numbers.filter(x => x % 2 === 0);// Reduceconst sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  1. 使用 Object.entries() 和 Object.fromEntries()
    将对象转换为数组并转换回来,以便于操作。
let person = {name: "Alice", age: 25};
let entries = Object.entries(person);
let newPerson = Object.fromEntries(entries);
  1. 用于唯一元素的 Set 对象
    使用 Set 存储任何类型的唯一值。
let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];
  1. 对象中的动态属性名称
    在对象文字表示法中使用方括号来创建动态属性名称。
  let dynamicKey = 'name';let person = {[dynamicKey]: "Alice"};
  1. 使用 bind() 进行函数柯里化
    创建一个新函数,当调用该函数时,将其 this 关键字设置为提供的值。
  function multiply(a, b) {return a * b;}let double = multiply.bind(null, 2);console.log(double(5)); // 10
  1. 使用 Array.from() 从类似数组的对象创建数组
    将类似数组或可迭代的对象转换为真正的数组。
  let nodeList = document.querySelectorAll('div');let nodeArray = Array.from(nodeList);
  1. 可迭代对象的 for…of 循环
    直接迭代可迭代对象(包括数组、映射、集合等)。
for (let value of ['a', 'b', 'c']) {console.log(value);
}
  1. 使用 Promise.all() 实现并发 Promise
    同时运行多个 Promise 并等待所有 Promise 完成。
let promises = [fetch(url1), fetch(url2)];
Promise.all(promises).then(responses => console.log('All done'));
  1. 函数参数的 Rest 参数
    将任意数量的参数捕获到数组中。
function sum(...nums) {return nums.reduce((acc, current) => acc + current, 0);
}
  1. 使用 ^ 交换值
    使用 XOR 按位运算符交换两个变量的值,无需临时变量。
let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1
  1. 使用 flat() 展平数组
    使用 flat() 方法轻松展平嵌套数组,展平深度作为可选参数。
let nestedArray = [1, [2, [3, [4]]]];let flatArray = nestedArray.flat(Infinity);
  1. 使用 Array.includes() 进行存在性检查
    使用 includes() 检查数组是否包含某个值,这是 indexOf 的更清晰的替代方案。
  if (myArray.includes("value")) {// Do something}
  1. 防止对象修改
    使用 Object.freeze() 防止对对象的修改,使其不可变。为了实现更深层次的不变性,请考虑更彻底地实施不变性的库。
let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mod
  1. 检查日期是否是今天
const isToday = (date) => date.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10)
  1. 日期转换
    当需要将日期转换为 YYYY-MM-DD 格式时。
const formatYmd = (date) => date.toISOString().slice(0, 10);
formatYmd(new Date())
  1. 第二次转换
    当需要将秒转换为 hh:mm:ss 格式时。

const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8)formatSeconds(200) // 00:03:20
  1. 获取某年某月的第一天

const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);getFirstDate(new Date('2024/05'))
  1. 获取某年某月的最后一天

const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
getLastDate(new Date('2023/03/04'))
  1. 获取给定年份的特定月份的总天数

const getDaysNum = (year, month) => new Date(year, month, 0).getDate()  
const day = getDaysNum(2024, 2) // 29
  1. 简单的数组去重
//简单数组去重const removeDuplicates = list => [...new Set(list)]
removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]//数组对象去重const duplicateById = list => [...list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()).values()]
duplicateById([{id: 1, name: 'jack'}, {id: 2, name: 'rose'}, {id: 1, name: 'jack'}])
// [{id: 1, name: 'jack'}, {id: 2, name: 'rose'}]
  1. 比较两个对象
    当需要比较两个对象时,JavaScript的相等运算符只能判断对象地址是否相同。当地址不同时,无法判断两个对象的键值对是否相同。

const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))
isEqual({name: 'jack'}, {name: 'jack'}) // true
isEqual({name: 'jack'}, {name: 'jack1'}, {name: 'jack'}) // false
  1. 强制等待
    当需要等待一段时间,但又不想写在setTimeout函数中,造成回调地狱时。

const sleep = async (t) => new Promise((resolve) => setTimeout(resolve, t));
sleep(2000).then(() => {console.log('time')});
关键字:【JavaScript-可阅读性写法】

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: