Js代码使用技巧速览

借助构造函数和浮点数的误差来做数学运算

javascript 复制代码
Number((0.1 + 0.2).toFixed(1)) === 0.3; // true

使用"摊平参数"和"apply"做参数不固定的最值查找

javascript 复制代码
const nums = [5, 3, 9, 1, 6];
const maxNum = Math.max.apply(null, nums); // 9
const minNum = Math.apply(null, nums);     // 1

利用Array构造函数创建长度固定但值未定义的数组

javascript 复制代码
const arrayOfUndefined = Array(3); // [undefined, undefined, undefined]

使用位运算符进行整数的快捷操作

javascript 复制代码
// 快速地求平方
let i = 2;
let square = i << 1; // 等价于 i * 2 或 i ** 2

// 快速地从浮点数中丢弃小数部分取整
let floatNum = 3.15;
let intNum = floatNum | 0; // 3

利用void运算符来执行表达式且不返回结果

javascript 复制代码
void function iife() {
  var localVar = 'I am not returned';
  console.log(localVar);
}();

console.log(typeof localVar); // undefined

使用逗号运算符链式执行多个表达式

javascript 复制代码
let x = 1;
(x += 1, x *= 3);
console.log(x); // 6

使用标签模板语法进行高级字符串操作

javascript 复制代码
function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) => `${acc}${str}<mark>${values[i] || ''}</mark>`, '');
}

const name = "Alice";
const greeting = highlight`Hello there, ${name}`;
console.log(greeting); // "Hello there,<mark>Alice</mark>"

利用 IIFE 和闭包保存状态

javascript 复制代码
var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj){
  return obj.value;
});

使用数组解构来交换变量的值

javascript 复制代码
let a = 1, b = 2;
[b, a] = [a, b];
console.log(a); // 2
console.log(b); // 1

使用逻辑或为函数参数提供默认值

javascript 复制代码
function logName(name) {
  name = name || 'Unknown';
  console.log(name);
}
logName(); // 'Unknown'
logName('Alice'); // 'Alice'
相关推荐
HEX9CF15 分钟前
【CTF Web】Pikachu xss之href输出 Writeup(GET请求+反射型XSS+javascript:伪协议绕过)
开发语言·前端·javascript·安全·网络安全·ecmascript·xss
积水成江1 小时前
关于Generator,async 和 await的介绍
前端·javascript·vue.js
Z3r4y1 小时前
【Web】portswigger 服务端原型污染 labs 全解
javascript·web安全·nodejs·原型链污染·wp·portswigger
人生の三重奏1 小时前
前端——js补充
开发语言·前端·javascript
Tandy12356_1 小时前
js逆向——webpack实战案例(一)
前端·javascript·安全·webpack
老华带你飞1 小时前
公寓管理系统|SprinBoot+vue夕阳红公寓管理系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot·课程设计
qbbmnnnnnn2 小时前
【WebGis开发 - Cesium】如何确保Cesium场景加载完毕
前端·javascript·vue.js·gis·cesium·webgis·三维可视化开发
f8979070703 小时前
layui动态表格出现 横竖间隔线
前端·javascript·layui
二十雨辰3 小时前
[uni-app]小兔鲜-04推荐+分类+详情
前端·javascript·uni-app
霸王蟹4 小时前
Vue3 项目中为啥不需要根标签了?
前端·javascript·vue.js·笔记·学习