记录JS 实用API

一、Object.entries () + Object.fromEntries ()：对象数组互转

javascript 复制代码

const obj = { foo: "bar", baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// 具有随机键排序的类数组对象
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

const map = new Map([
  ["foo", "bar"],
  ["baz", 42],
]);

const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }

//对象结构 去除空值
const obj={
    a:1,
    b:2,
    c:''
}

const filtered = Object.fromEntries(Object.entries(obj).filter(([key, value]) => value));
console.log(filtered);// {a: 1, b:2}

二、?? 与 ??= 与 ||

javascript 复制代码

const count=0

// || 会把0 false '' 当成无效值 
const newCount=count||10 
console.log(newCount) // 10

//?? 只判断 null/undefined
const newCount=count??10 
console.log(newCount) // 0

// ??= 补充默认值 不会覆盖已有值
const obj={number:5}
obj.price ??= 20
console.log(obj) // {number:5,price:20}

const obj={number:5,price:20}
obj.price ??= 5
console.log(obj) // {number:5,price:20}

三、Intl 国际化 API 源文档方法挺多的这里只展示部分

javascript 复制代码

//1.货币格式化
const price = 1234.66;

// 人民币格式（自动加 ¥ 和千分位）
const cny= new Intl.NumberFormat("zh-CN", {
  style: "currency",
  currency: "CNY",
}).format(price);
console.log(cny) //¥1,234.66

// 美元格式（自动加 $ 和千分位）
const usd= new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
}).format(price);
console.log(usd) //$1,234.66

//2.日期本地化

const zhcnTime= new Intl.DateTimeFormat("zh-CN", {
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
}).format(new Date());
console.log(zhcnTime)//2025年12月5日 11:05:07

const enusTime = new Intl.DateTimeFormat("en-US", {
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
}).format(new Date());
console.log(enusTime )//December 5, 2025 at 11:06:08 AM

四、IntersectionObserver 异步监测元素与其祖先容器或视口之间交叉状态的方法网上博客很多这里就简单记录一下

javascript 复制代码

//1.监听元素是否进入视口或与某个元素是否有交叉行为；例如 有个元素用了 position: fixed; 然后有个元素会随滚动条向上滚动 这时 可滚动的元素就与position: fixed;有了交叉 
//2.进入视口 页面高度超出屏幕的显示范围 页面滚动 超出屏幕范围的元素可见了 多用于图片懒加载

//配置
const options = {
    root: null, // 默认为浏览器视口 
    rootMargin: '0px', // 外边距 
    threshold: 0 // 交叉的阈值，在距离多少时触发回调
}; 
//创建IntersectionObserver实例
const observer = new IntersectionObserver(callback, options);
//回调函数
function callback(entries, observer) { 
    entries.forEach(entry => {
    if (entry.isIntersecting) { 
            // 元素进入了视口 执行相应的操作，比如加载图片、添加动画等 
       } else {
            // 元素离开了视口 执行相应的操作，比如停止加载、移除动画等
       }
    });
}
//将目标元素与 IntersectionObserver 关联起来：
const box= document.querySelector('.box'); 
observer.observe(box);

五、promise 方法总结只记录无说明

javascript 复制代码

//1.基础用法
const promise = new Promise((resolve, reject)=> {
    if(code==200){//成功
        resolve()
    }else{//失败
        reject()
    }
})
//.then成功 .catch失败 .finally完成
promise.then((res) => {}).catch(err=>{}).finally(()=>{})

//2.Promise.all([Request1,Request2]) Request1，Request2为Promise实例 只有当所有输入的 Promise 都成功（fulfilled）时，会在.then中返回一个包含所有结果的数组。只要有一个 Promise 被拒绝（rejected），整个 Promise.all 就会立即失败，会在.catch中返回第一个被拒绝的原因

//3.Promise.race([Request1,Request2]) Request1，Request2为Promise实例 只要任意一个输入的 Promise 先解决（fulfilled）或拒绝（rejected），就会立即返回该 Promise 的结果（无论成功或失败）.then成功 .catch失败

//4.Promise.allSettled([Request1,Request2]) Request1，Request2为Promise实例 当所有输入的 Promise 都完成后会在.then中返回

//5.Promise.any()  待补充
//6.Promise.try() 待补充

六、element.closest() 查找匹配指定CSS选择器的最近祖先元素，支持跨多级精确查找

javascript 复制代码

let el= document.querySelector('.box-child')
console.log(el.closest('.box-parent'))

**七、**searchParams 处理url传参

javascript 复制代码

//https://xxx.com/user?name=li&age=18
const pageUrl= new URL(window.location.href);
//获取参数
console.log(pageUrl.searchParams.get('name'));//li
// 添加参数
pageUrl.searchParams.append('address', '北京市')
// 修改参数
pageUrl.searchParams.set('age', 20);
// 删除参数
pageUrl.searchParams.delete('age');

console.log(pageUrl.href); //https://xxx.com/user?name=li&&address=北京市