JS 前端开发必备：运算符优先级、URL 编码解码与字符串数学对象 API 总结

JavaScript 核心知识点概览

本文整理并介绍了 JavaScript 前端开发中涉及的核心知识点，包括运算符优先级、URL 编码与解码机制、String 对象方法、Math 对象功能以及 arguments 操作，旨在为开发者提供实用的参考。

运算符优先级详解

在 JavaScript 中，运算符的优先级决定了表达式中各部分的计算顺序。

优先级从高到低依次排列如下：

()
!、-、++、–
*、/、%
+、-
<、<=、<、>=
==、!=、===、!==、
&&
||
?:
=、+=、-=、*=、/=、%=

URL 编码与解码机制

URL 编码与解码是前端处理地址栏参数和特殊字符时的重要环节，主要涉及以下函数：

encodeURIComponent() 用于编码 URI 组件，会编码除字母、数字、标点符号（- _ . ! ~ * ' ( )）之外的所有字符。
decodeURIComponent() 用于解码由 encodeURIComponent() 编码的 URI 组件。
encodeURI() 用于编码完整的 URI，保留 URI 中有效的字符（如 : / ? & = 等），仅对非转义字符进行编码。
decodeURI() 用于解码由 encodeURI() 编码的完整 URI。
escape() 方法已废弃，不建议在新项目中使用，它会对除 ASCII 字母、数字、@ * / + - _ . ! ~ ' ( ) 之外的字符进行编码。
unescape() 方法同样已废弃，用于对由 escape() 编码的字符串进行解码。
上述函数在编码范围、保留字符及现代标准兼容性上存在显著区别，建议优先使用 encodeURI 系列函数。

字符串常用 API 操作

JavaScript 中字符串对象提供了丰富的常用 API，用于处理文本数据：

toString() 方法将对象转换为字符串表示形式。
charAt(index) 方法返回指定索引位置处的字符。
charCodeAt(index) 方法返回指定索引位置处字符的 Unicode 编码值。
indexOf(index) 方法从字符串开头向后搜索，返回第一次出现指定字符串的索引位置，若未找到则返回 -1。
lastIndexOf(index) 方法从字符串末尾向前搜索，返回最后一次出现指定字符串的索引位置，若未找到则返回 -1。
concat 方法用于连接一个或多个字符串，返回一个新的合并后的字符串，原字符串不变。
slice(截取的位置，截取终点) 方法用于提取字符串片段。需注意：① 截取范围左闭右开；② slice(2) 表示从索引号为 2 的位置截取到末尾；③ slice(-2) 表示从字符串右侧开始向左取最后 2 个字符。
substr(截取的位置, 截取的长度) 方法用于提取指定长度的子串。需注意：① str.substr(1,2) 表示从索引位置为 1 的地方开始取 2 个字符；② str.substr(-1) 表示从右边开始往左边取 1 个字符。存在兼容性问题：在 IE6、IE7、IE8 中，负数起始位置会返回所有字符串，因此不建议使用负值作为起始参数。
substring (更智能版的 slice) 方法用于提取字符串。需注意：① substring(5,2) 会被自动转换为 substring(2,5)，即自动交换参数顺序；② substring(-number) 会返回全部字符串，忽略负数参数。
toUpperCase() 方法将字符串中的所有字母转换为大写字母。
toLowerCase() 方法将字符串中的所有字母转换为小写字母。

浮点数保留小数处理

在处理浮点数时，经常需要保留指定数量的小数位，这可以通过特定方法实现。

toFixed 方法将数字四舍五入为指定小数位数的字符串。例如：var num1 = 5.6789; console.log(num1.toFixed(2)) 输出 5.68（注意四舍五入）；var num2 = 1.234; console.log(num2.toFixed(2)) 输出 1.23。


var num1 = 5.6789;
console.log(num1.toFixed(2)) // 5.68 注意四舍五入
var num2 = 1.234;
console.log(num2.toFixed(2)) // 1.23

Math 对象与递归调用

Math 对象提供了用于执行常见数学任务的属性和方法，使用时需注意参数类型。


var max = Math.max(1,2,3,6,4,5); // max 最大值为 6
var max1 = Math.max(); // max1 为 -Infinity , 无参数的情况
var min = Math.min(1,2,6,5,9,3); // min 最小值位 1
var min1 = Math.min(); // min1 为 Infinity , 无参数的情况

注意参数：Math 方法内部可以接受字符串型的数字表示，但不能接受 undefined、null 或 NaN 作为有效参数，否则可能导致非预期结果。

以下展示一个简单的递归程序示例，用于演示函数调用的基本逻辑。


var num = 0;
(function me() {
 if(num > 4) {
  return;
 }
 st = setTimeout(function() {
  clearTimeout(st);
  console.log(++ num);
  me();
 },500);
})();

关于 arguments.callee 的使用，它在递归调用中具有特殊作用。

arguments.callee 返回正被执行的 Function 对象，在使用函数递归调用时推荐使用arguments.callee代替函数名本身，不过在严格模式下不建议使用，因为严格模式禁止访问 arguments.callee。

上述递归调用可替换为更现代或兼容严格模式的写法，通过局部变量引用函数自身。


var num = 0;
(function () {
 if(num > 4) {
  return;
 }
 var callee = arguments.callee;
 st = setTimeout(function() {
  clearTimeout(st);
  console.log(++ num);
  callee();
 }, 500);
})();

更多关于 JavaScript 相关内容还可查看本站专题：《JavaScript 字符与字符串操作技巧总结》、《JavaScript 数组操作技巧总结》、《JavaScript 遍历算法与技巧总结》、《JavaScript 数学运算用法总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 查找算法技巧总结》及《JavaScript 错误与调试技巧总结》。

希望本文所述对大家 JavaScript 程序设计有所帮助。

JavaScript 前端核心知识点：运算符优先级、URL 编解码及常用 API 详解