一、Array.prototype.at()
-
该
at()方法接受一个整数值并返回该索引处的项目，允许正整数和负整数。负整数从数组中的最后一项开始倒数。 -
这可以很方便地获取某个数组末尾的元素、可用来简化
array[array.length-1]类似的写法
const array = [5, 12, 8, 130, 44];
// 日常获取末尾元素写法
array[array.length-1] // 44
//利用at()简化写法
array.at(-1) // 44
兼容性：
二、测试程序执行的时长
// console.time() 方法是作为计算器的起始方法
// console.timeEnd() 方法为计算器的结束方法，并将执行时长显示在控制台
// 测试循环十万条数据所需毫秒数
console.time("耗时：");
for (i = 0; i < 100000; i++) {
// 代码部分
}
console.timeEnd("耗时："); // 耗时：: 2.136962890625 ms
三、vue利用$attrs便捷封装第三方组件
注意：Vue 2 的虚拟 DOM 实现对 class 和 style attribute 有一些特殊处理。因此，与其它 attribute 不一样，它们没有被包含在 $attrs 中，它们会被应用到组件的根元素
// $attrs可以自动将在父级组件中使用的v-bind属性自动绑定，
// 并向下传入使用了v-bind="$attrs"的内部组件
// 示例：
// 父级组件
<Father type="success" @touchstart="touchstart" />
// 内部组件
<template>
<div>
<van-button v-bind="$attrs">主要按钮</van-button>
</div>
</template>
四、判断对象自身是否包含对应属性
1、hasOwnProperty
// obj.hasOwnProperty 该方法会返回一个布尔值
// 注意：该方法不会读取原型链上的属性
const obj = { name: '测试' };
console.log(obj.hasOwnProperty('name')) // true
2、in
// 判断指定的属性是否位于对象或其原型链中，返回值为布尔类型
const obj = {};
obj.__proto__.name="测试"
console.log('name' in obj) // true
const obj2 = { name: '测试' };
console.log('name' in obj2) // true
五、可选链操作符（?.）
?. 操作符的功能类似于 . 链式操作符,在其基础上增加了判空的功能，在引用为空(null或者undefined) 的情况下不会引起错误并统一返回undefined
语法：
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
用法示例：
const adventurer = {
name: 'Alice',
cat: {
name: 'Dinah'
}
};
const dogName = adventurer.dog?.name;
// 等价于
const temp = adventurer.dog;
const dogName = ((temp === null || temp === undefined) ? undefined : temp.name);
console.log(dogName); // undefined
// 函数调用：
let result = adventurer.customMethod?.();
// 动态属性名也可使用
obj?.['prop' + 'Name']
// 访问数组
let arrayItem = arr?.[42];
兼容性：
六、空值合并（??）
与||运算符的不同在于||运算符会把0及""也认定为假值，而空值合并操作符(??)只会将null及undefined认定为假值
用法示例：
const foo = null ?? 'default string'; // "default string"
const baz = 0 ?? 42; // 0
兼容性：
七、平滑滚动
css实现方案：
适用于锚点跳转
scroll-behavior: smooth;
兼容性：
js实现方案：
Element 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见
// html
<div class="scroll_container">
<div id="item1" @click="scrollToAnchor(item1)" >
</div>
// js
const scrollToAnchor = (key) => {
if (key) {
let anchorElement = document.getElementById(key);
if (anchorElement) {
anchorElement.scrollIntoView(
{ behavior: 'smooth' }
);
}
}
}
兼容性：
八、可替换元素(img、video、iframe等)自适应模式
object-fit CSS属性指定可替换元素的内容应该如何适应到其父级容器
语法:
object-fit: contain | cover | fill;
contain:
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比
cover:
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框
fill:
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
示例：
兼容性:
九、生成uuid
用法示例：
利用 Web Crypto 提供的加密接口，可以很方便地生成 uuid
const uuid = crypto.randomUUID(); // '176f30e2-815b-479a-a043-175de817bb52'
兼容性：
十、快速过滤数组中的假值
利用map和Boolean快速实现过滤
const arr = [1, 2, 3, false, null, 0, "", undefined, NaN]
const newArr = arr.filter(Boolean) // [1,2,3]
十一、保留指定小数位数
利用进行指数倍增，再指数缩减的方式，可以实现保留任意位数小数，同时避免了精度丢失的问题
const formatNum = (num, decimalDigits = 3) => {
const isLegalType = (typeof num === 'number') || (typeof num === 'string'); // 类型是否合法
if (!num || !isLegalType) return 0;
const multiple = 10 ** decimalDigits;
const originNum = Number(num) || 0;
const finalNum = Math.round(originNum * multiple) / multiple;
return Number(finalNum);
};
formatNum(1.3333, 2); // 1.33
