JavaScript小技巧
JavaScript小技巧
现代 JavaScript 教程：https://zh.javascript.info
JavaScript小技巧：
声明多个变量
// 常规写法
let a;
let b = 1;
let c = true;
// 简写
let a, b = 1, c = true;
给多个变量赋值
// 常规写法
let a, b, c;
a = "a";
b = 1;
c = true;
// 简写
let [a, b, c] = ["a", 1, true];
交换变量的值
let str1 = "aaa";
let str2 = "bbb";
[str1, str2] = [str2, str1]
console.log(str1) // "bbb"
console.log(str2) // "aaa"
数字和字符串相互转换
const num = 99;
// 数字转字符串
console.log(num + '') // "99"
const str = '99';
// 字符串转数字
console.log(+str) // 99
可选链操作符 ?.
- 可选链操作符 ( ?. ) 允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined
const user = {
info: {
name: "廊坊吴彦祖"
}
};
console.log(user.info?.name) // "廊坊吴彦祖"
console.log(user.data?.name) // undefined
console.log(user.data.name) // TypeError: Cannot read properties of undefined (reading 'name')
空值合并操作符 ??
- 空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数
console.log(null ?? "廊坊吴彦祖") // "廊坊吴彦祖"
console.log(undefined ?? "廊坊吴彦祖") // "廊坊吴彦祖"
console.log("廊坊吴彦祖" ?? "??") // "廊坊吴彦祖"
console.log(0 ?? 9) // 0
使用&&代替if判断为真
// if判断
if(true) {
console.log("true") // "true"
}
// 使用&&代替if判断
true && console.log("true") // "true"
获取数组最后一位
const array = [2, 1, 3, 5, 3, 6, 11];
// 通过.length获取数组最后一位
console.log(array[array.length - 1]) // 11
// 通过.at获取数组最后一位
console.log(array.at(-1)) // 11
打乱数组
const array = [2, 1, 3, 5, 3, 6, 11];
// 通过sort方法和Math.random()打乱数组
array.sort(() => {
return Math.random() - 0.5;
});
console.log(array) // [6, 2, 5, 1, 3, 3, 11]
获取对象的键和值数组
let obj = {a: 1, b: 2, c: 3}
// 通过Object.keys()获取obj对象键数组
console.log(Object.keys(obj)) // ["a", "b", "c"]
// 通过Object.values()获取obj对象值数组
console.log(Object.values(obj)) // [1, 2, 3]
Object.freeze() 冻结对象
- Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象
let obj = {a: 1, b: 2}
// 将obj对象进行冻结
Object.freeze(obj)
// 无法给obj对象添加属性
obj.c = 3
console.log(obj) // {a: 1, b: 2}
// 无法删除obj对象某一个属性
delete obj.a
console.log(obj) // {a: 1, b: 2}
禁止输入框键入键盘某个键
<input type="text" placeholder="" onKeydown="keydown"/>
// 通过onKeydown事件判断
keydown(e) {
// 不能输入'-'
if (e.key === '-') {
e.returnValue = false;
}
},
区分IE和非IE浏览器
if (!+[1]) {
// IE浏览器
} else {
// 非IE浏览器
}
滚动到页面顶部
window.scrollTo(0, 0)
获取时间的毫秒数
// +new Date()相当于new Date().getTime()
console.log(+new Date("2022-07-12")) // 1657584000000
console.log(new Date("2022-07-12").getTime()) // 1657584000000
获取两个日期之间的天数
const getDay = (startDate, endDate) => Math.ceil(Math.abs(startDate.getTime() - endDate.getTime()) / 86400000)
const day = getDay(new Date("2022-7-12"), new Date("2021-7-12"))
console.log(day) // 365
利用reduce求数组总和、最小值和最大值
const array = [2, 1, 3, 5, 3, 6, 11];
// 求总和
const total = array.reduce((a, b) => a+b);
console.log(total) // 31
// 求最小值（等同于Math.min()）
const min = array.reduce((a, b) => a<b ? a : b);
console.log(min) // 1
console.log(Math.min(...array)) // 1
// 求最大值（等同于Math.max()）
const max = array.reduce((a, b) => a>b ? a : b);
console.log(max) // 11
console.log(Math.max(...array)) // 11
数组去重
const array = [1, 4, 4, 6, 8, 9, 11, 9, 'a', 'a'];
// 通过filter和indexOf方法
const ary1 = array.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(ary1) // [1, 4, 6, 8, 9, 11, "a"]
// 通过Set
const ary2 = [...new Set(array)];
console.log(ary2) // [1, 4, 6, 8, 9, 11, "a"]
获取两个数组的交集
const ary1 = [1, 4, 6, 7, 9];
const ary2 = [ 8, 6, 11, 9];
// 通过filter和indexOf方法
const getIntersection = (ary1, ary2) => ary1.filter(item => ary2.indexOf(item) > -1);
console.log(getIntersection(ary1, ary2)) // [6, 9]
获取两个数组的并集
const ary1 = [1, 4, 6, 7, 9];
const ary2 = [ 8, 6, 11, 9];
// 通过concat和includes方法
const getUnion = (ary1, ary2) => ary1.concat(ary2.filter(item => !ary1.includes(item)))
console.log(getUnion(ary1, ary2)) // [1, 4, 6, 7, 9, 8, 11]
es6扩展运算符合并数组和对象
const ary1 = [1, 4, 4, 6];
const ary2 = [ 8, 9, 11, 9];
// 合并数组
const ary = [...ary1, ...ary2];
console.log(ary) // [1, 4, 4, 6, 8, 9, 11, 9]
const obj1 = {a: 1, b: 2};
const obj2 = {a: 3, c: 4};
// 合并对象
const obj = {...obj1, ...obj2};
console.log(obj) // {a: 3, b: 2, c: 4}
金额显示增加千位符
const getThousandsNum = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
const money = getThousandsNum(100000000);
console.log(money) // "100,000,000"
五星好评效果
const getStartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
console.log(getStartScore(3)) // "★★★☆☆"
console.log(getStartScore(5)) // "★★★★★"
通过length清空和截取数组
const array = [2, 1, 3, 5, 3, 6, 11];
// 通过设置length来截取指定长度数组
array.length = 3;
console.log(array) // [2, 1, 3]
// 通过设置length为0来清空数组
array.length = 0;
console.log(array) // []
字符串首字母大写
const getUpperCaseStr = str => str.charAt(0).toUpperCase() + str.slice(1);
const upperCaseStr = getUpperCaseStr("beijing");
console.log(upperCaseStr) // "Beijing"
翻转字符串
const getReverseStr = str => str.split('').reverse().join('');
const reverseStr = getReverseStr("beijing");
console.log(reverseStr) // "gnijieb"
去除字符串中的空格
// 去除首尾的空格
const getTrimStr = str => str.replace(/(^\s*)|(\s*$)/g, "");
console.log(getTrimStr(" bei jing ")) // "bei jing"
// 去除全部空格
const getTrimAllStr = str => str.replace(/\s+/g,"");
console.log(getTrimAllStr(" bei jing ")) // "beijing"
获取随机字符串
const str = Math.random().toString(36).substring(2);
console.log(str) // "fropwvrg7ke"
获取随机16进制颜色
const color = "#" + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0");
console.log(color) // "#71e3fd"
rgb颜色转16进制颜色
const getRgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
console.log(getRgbToHex(255, 255 ,255)) // "#ffffff"
判断数据类型
- 默认情况下，toString() 方法被每个 Object 对象继承，如果此方法在自定义对象中未被覆盖， toString() 方法会返回一个 “[object xxxx]” 的字符串（xxxx 为数据具体类型）。可以通过 toString() 来获取每个对象的类型，为了每个对象都能通过 Object.prototype.toString() 来检测，需要以 call() 或者 apply() 的形式来调用，传递要检查的对象作为第一个参数，即 Object.prototype.toString.call()(或者 Object.prototype.toString.apply())
const getTypeOf = val => Object.prototype.toString.call(val).slice(8, -1).toLowerCase();
console.log(getTypeOf(1)) // "number"
console.log(getTypeOf("廊坊吴彦祖")) // "string"
console.log(getTypeOf(true)) // "boolean"
console.log(getTypeOf(undefined)) // "undefined"
console.log(getTypeOf(function() {})) // "function"
console.log(getTypeOf(null)) // "null"
console.log(getTypeOf([1,2,3])) // "array"
console.log(getTypeOf({a: 'b'})) // "object"
for循环简写
- for…of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
- for…in 语句以任意顺序迭代一个对象的除 Symbol 以外的可枚举属性，包括继承的可枚举属性
const array = [2, 1, 3, 5, 3, 6, 11];
// for循环
for (let i = 0; i < array.length; i++) {
console.log(array[i]) // 2 1 3 5 3 6 11
}
// for...of获取数组每一项
for (let item of array) {
console.log(item) // 2 1 3 5 3 6 11
}
// for...in获取数组索引
for (let index in array) {
console.log(index) // "0" "1" "2" "3" "4" "5" "6"
}