JS基础-优快云博客

本文链接：https://blog.youkuaiyun.com/javajavami/article/details/83949379

本文详细介绍了JavaScript的基础知识，包括字符串、数字、数组的操作方法及常用函数，同时涵盖了日期处理、数学运算和自定义对象等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js 函数集

· 字符串 (String)
1. 声明
var myString = new String("Every good boy does fine.");
var myString = "Every good boy does fine.";

2. 字符串连接
var myString = "Every " + "good boy " + "does fine.";
var myString = "Every "; myString += "good boy does fine.";

3. 截取字符串
// 截取第 6 位开始的字符
var myString = "Every good boy does fine.";
var section = myString.substring(6); // 结果 : "good boy does fine."

// 截取第 0 位开始至第 10 位为止的字符
var myString = "Every good boy does fine.";
var section = myString.substring(0,10); // 结果 : "Every good"

// 截取从第 11 位到倒数第 6 位为止的字符
var myString = "Every good boy does fine.";
var section = myString.slice(11,-6); // 结果 : "boy does"

// 从第 6 位开始截取长度为 4 的字符
var myString = "Every good boy does fine.";
var section = myString.substr(6,4); // 结果 : "good"

4. 转换大小写
var myString = "Hello";
var lcString = myString.toLowerCase(); // 结果 : "hello"
var ucString = myString.toUpperCase(); // 结果 : "HELLO"

5. 字符串比较
var aString = "Hello!";
var bString = new String("Hello!");
if( aString == "Hello!" ){ } // 结果 : true
if( aString == bString ){ } // 结果 : true
if( aString === bString ){ } // 结果 : false ( 两个对象不同 , 尽管它们的值相同 )

6. 检索字符串
var myString = "hello everybody.";
// 如果检索不到会返回 -1, 检索到的话返回在该串中的起始位置
if( myString.indexOf("every") > -1 ){ } // 结果 : true

7. 查找替换字符串
var myString = "I is your father.";
var result = myString.replace("is","am"); // 结果 : "I am your father."

8. 特殊字符 :
\b : 后退符 \t : 水平制表符
\n : 换行符 \v : 垂直制表符
\f : 分页符 \r : 回车符
\" : 双引号 \' : 单引号
\\ : 反斜杆

9. 将字符转换成 Unicode 编码
var myString = "hello";
var code = myString.charCodeAt(3); // 返回 "l" 的 Unicode 编码 ( 整型 )
var char = String.fromCharCode(66); // 返回 Unicode 为 66 的字符

10. 将字符串转换成 URL 编码
var myString = "hello all";
var code = encodeURI(myString); // 结果 : "hello%20all"
var str = decodeURI(code); // 结果 : "hello all"
// 相应的还有 : encodeURIComponent() decodeURIComponent()

11. 将字符串转换成 base64 编码
// base64Encode() base64Decode() 用法同上

//-----------------------------------------------------------------------

· 数字型 (Number)

1. 声明
var i = 1;
var i = new Number(1);

2. 字符串与数字间的转换
var i = 1;
var str = i.toString(); // 结果 : "1"
var str = new String(i); // 结果 : "1"
i = parseInt(str); // 结果 : 1
i = parseFloat(str); // 结果 : 1.0

// 注意 : parseInt,parseFloat 会把一个类似于 "32G" 的字符串 , 强制转换成 32

3. 判断是否为有效的数字
var i = 123; var str = "string";
if( typeof i == "number" ){ } //true

// 某些方法 ( 如 :parseInt,parseFloat) 会返回一个特殊的值 NaN(Not a Number)
// 请注意第 2 点中的 [ 注意 ], 此方法不完全适合判断一个字符串是否是数字型 !!
i = parseInt(str);
if( isNaN(i) ){ }

4. 数字型比较
// 此知识与 [ 字符串比较 ] 相同

5. 小数转整数
var f = 1.5;
var i = Math.round(f); // 结果 :2 ( 四舍五入 )
var i = Math.ceil(f); // 结果 :2 ( 返回大于 f 的最小整数 )
var i = Math.floor(f); // 结果 :1 ( 返回小于 f 的最大整数 )

6. 格式化显示数字
var i = 3.14159;

// 格式化为两位小数的浮点数
var str = i.toFixed(2); // 结果 : "3.14"

// 格式化为五位数字的浮点数 ( 从左到右五位数字 , 不够补零 )
var str = i.toPrecision(5); // 结果 : "3.1415"

7.X 进制数字的转换
// 不是很懂 -.-
var i = parseInt("0x1f",16);
var i = parseInt(i,10);
var i = parseInt("11010011",2);

8. 随机数
// 返回 0-1 之间的任意小数
var rnd = Math.random();
// 返回 0-n 之间的任意整数 ( 不包括 n)
var rnd = Math.floor(Math.random() * n)

//-----------------------------------------------------------------------

·Math 对象

1. Math.abs(num) : 返回 num 的绝对值
2. Math.acos(num) : 返回 num 的反余弦值
3. Math.asin(num) : 返回 num 的反正弦值
4. Math.atan(num) : 返回 num 的反正切值
5. Math.atan2(y,x) : 返回 y 除以 x 的商的反正切值
6. Math.ceil(num) : 返回大于 num 的最小整数
7. Math.cos(num) : 返回 num 的余弦值
8. Math.exp(x) : 返回以自然数为底 ,x 次幂的数
9. Math.floor(num) : 返回小于 num 的最大整数
10.Math.log(num) : 返回 num 的自然对数
11.Math.max(num1,num2) : 返回 num1 和 num2 中较大的一个
12.Math.min(num1,num2) : 返回 num1 和 num2 中较小的一个
13.Math.pow(x,y) : 返回 x 的 y 次方的值
14.Math.random() : 返回 0 到 1 之间的一个随机数
15.Math.round(num) : 返回 num 四舍五入后的值
16.Math.sin(num) : 返回 num 的正弦值
17.Math.sqrt(num) : 返回 num 的平方根
18.Math.tan(num) : 返回 num 的正切值
19.Math.E : 自然数 (2.718281828459045)
20.Math.LN2 : 2 的自然对数 (0.6931471805599453)
21.Math.LN10 : 10 的自然对数 (2.302585092994046)
22.Math.LOG2E : log 2 为底的自然数 (1.4426950408889634)
23.Math.LOG10E : log 10 为底的自然数 (0.4342944819032518)
24.Math.PI : π(3.141592653589793)
25.Math.SQRT1_2 : 1/2 的平方根 (0.7071067811865476)
26.Math.SQRT2 : 2 的平方根 (1.4142135623730951)

//-----------------------------------------------------------------------

· 日期型 (Date)

1. 声明
var myDate = new Date(); // 系统当前时间

var myDate = new Date(yyyy, mm, dd, hh, mm, ss);
var myDate = new Date(yyyy, mm, dd);
var myDate = new Date("monthName dd, yyyy hh:mm:ss");
var myDate = new Date("monthName dd, yyyy");
var myDate = new Date(epochMilliseconds);

2. 获取时间的某部份
var myDate = new Date();
myDate.getYear(); // 获取当前年份 (2 位 )
myDate.getFullYear(); // 获取完整的年份 (4 位 ,1970-????)
myDate.getMonth(); // 获取当前月份 (0-11,0 代表 1 月 )
myDate.getDate(); // 获取当前日 (1-31)
myDate.getDay(); // 获取当前星期 X(0-6,0 代表星期天 )
myDate.getTime(); // 获取当前时间 ( 从 1970.1.1 开始的毫秒数 )
myDate.getHours(); // 获取当前小时数 (0-23)
myDate.getMinutes(); // 获取当前分钟数 (0-59)
myDate.getSeconds(); // 获取当前秒数 (0-59)
myDate.getMilliseconds(); // 获取当前毫秒数 (0-999)
myDate.toLocaleDateString(); // 获取当前日期
myDate.toLocaleTimeString(); // 获取当前时间
myDate.toLocaleString( ); // 获取日期与时间

3. 计算之前或未来的时间
var myDate = new Date();
myDate.setDate(myDate.getDate() + 10); // 当前时间加 10 天
// 类似的方法都基本相同 , 以 set 开头 , 具体参考第 2 点

4. 计算两个日期的偏移量
var i = daysBetween(beginDate,endDate); // 返回天数
var i = beginDate.getTimezoneOffset(endDate); // 返回分钟数

5. 检查有效日期
//checkDate() 只允许 "mm-dd-yyyy" 或 "mm/dd/yyyy" 两种格式的日期
if( checkDate("2006-01-01") ){ }

// 正则表达式 ( 自己写的检查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四种 )
var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/;
if( r.test( myString ) ){ }

//-----------------------------------------------------------------------

· 数组 (Array)

1. 声明
var arr = new Array(); // 声明一个空数组
var arr = new Array(10); // 声明一个 10 个长度的数组
var arr = new Array("Alice", "Fred", "Jean"); // 用值初始化数组
var arr = ["Alice", "Fred", "Jean"]; // 用值初始化数组
var arr = [["A","B","C"][1,2,3]]; // 声明一个二 ( 多 ) 维数组

2. 数组的访问
arr[0] = "123"; // 赋值
var str = arr[0]; // 获取
arr[0][0] = "123"; // 多维数组赋值

3. 数组与字符串间的转换
var arr = ["A","B","C","D"]; // 声明

// 数组按分隔符转换成字符串
var str = arr.join("|"); // 结果 : "A|B|C|D"

// 字符串切割成数组
arr = str.split("|");

4. 遍历数组
for( var i=0; i<arr.length; i++ ){ alert(arr[i]); }

5. 排序
var arr = [12,15,8,9];
arr.sort(); // 结果 : 8 9 12 15

6. 组合与分解数组
var arr1 = ["A","B","C","D"];
var arr2 = ["1","2","3","4"];

// 奖两个数组组合成一个新的数组
var arr = arr1.concat(arr2); // 结果 : ["A","B","C","D","1","2","3","4"]

// 将一个数组切成两个数组 ( 参数 1: 起始索引 , 参数 2: 切割长度 )
var arr3 = arr.splice(1,3); // 结果 : arr3:["B","C","D"] arr["A","1","2","3","4"]

// 将一个数组切成两个数组 , 并在原数组补新值
var arr4 = arr.splice(1,3,"AA"); // 结果 : arr4:["B","C","D"] arr["A","AA","1","2","3","4"]

//-----------------------------------------------------------------------

· 自定义对象

1. 声明 :
function myUser(uid,pwd){
this.uid = uid;
this.pwd = pwd || "000000"; // 默认值
this.show = showInfo; // 方法
}

// 下面的函数不是自定义对象 , 是自定义对象的方法 . 继续看下去就明白了
function showInfo(){
alert(" 用户名 :" + this.uid + ", 密码 :" + this.pwd)
}

2. 实例化 :
var user = new myUser("user","123456");
var user = {uid:"user",pwd:"123456"};

3. 获取与设置
alert(" 用户名是 :" + user.uid); //get
user.uid = "newuser"; //set
user.show(); // 调用 show() 方法

//-----------------------------------------------------------------------

· 变量函数流程控制

1. 变量
var i = 1;
var i = 1, str = "hello";

2. 函数
function funName(){
//do something.
}
function funName(param1[,paramX]){
//do something.
}

3. 嵌套函数
// 某种情况 , 你需要创建一个函数本身所独有的函数 .
function myFunction(){
//do something.
privateFunction();
function privateFunction(){
//do something.
}
}

4. 匿名函数
var tmp = function(){ alert("only test."); }
tmp();

5. 延迟函数调用
var tId = setTimeout("myFun()",1000); // 延迟 1000 毫秒后再调用 myFun() 函数
fucntion myFun(){
//do something
clearTimeout(tId); // 销毁对象
}

6. 流程控制
if( condition ){ }
if( condition ){ } else{ }
if( condition ){ } else if( condition ){ } else{ }

switch( expression ){
case valA : statement; break;
case valB : statement; break;
default : statement; break;
}

7. 异常捕获
try{ expression } catch(e){ } finally{ }

// 不处理任何异常
window.onerror = doNothing;
function doNothing(){ return true; }

// 异常类可用的属性
description : 异常描述 (IE,NN)
fileName : 异常页面 URI(NN)
lineNumber : 异常行数 (NN)
message : 异常描述 (IE,NN)
name : 错误类型 (IE,NN)
number : 错误代码 (IE)

// 错误信息 ( 兼容所有浏览器 )
try{ }
catch(e){
var msg = (e.message) ? e.message : e.description;
alert(msg);
}

8. 加快脚本的执行速度
- 避免使用 eval() 函数
- 避免使用 with 关键字
- 将重复的表达式赋值精简到最小
- 在较大的对象中使用索引来查找数组
- 减少 document.write() 的使用

//-----------------------------------------------------------------------

· 浏览器特征 ( navigator )

1. 浏览器名称
//IE : "Microsoft Internet Explorer"
//NS : "Netscape"
var browserName = navigator.appName;

2. 浏览器版本
bar browserVersion = navigator.appVersion;

3. 客户端操作系统
var isWin = ( navigator.userAgent.indexOf("Win") != -1 );
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 );
var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );

4. 判断是否支持某对象 , 方法 , 属性
// 当一个对象 , 方法 , 属性未定义时会返回 undefined 或 null 等 , 这些特殊值都是 false
if( document.images ){ }
if( document.getElementById ){ }

5. 检查浏览器当前语言
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }

6. 检查浏览器是否支持 Cookies
if( navigator.cookieEnabled ){ }

//-----------------------------------------------------------------------

· 控制浏览器窗口 ( window )

1. 设置浏览器的大小
window.resizeTo(800, 600); // 将浏览器调整到 800X600 大小
window.resizeBy(50, -10); // 在原有大小上改变增大或减小窗口大小

2. 调整浏览器的位置
window.moveTo(10, 20); // 将浏览器的位置定位到 X:10 Y:20
window.moveBy(0, 10); // 在原有位置上移动位置 ( 偏移量 )

3. 创建一个新的窗口
var win = window.open("about.htm","winName","height=300,width=400");

// 参数
alwaysLowered // 始终在其它浏览器窗口的后面 (NN)
alwaysRaised // 始终在其它浏览器窗口的前面 (NN)
channelMode // 是否为导航模式 (IE)
copyhistory // 复制历史记录至新开的窗口 (NN)
dependent // 新窗口随打开它的主窗口关闭而关闭 (NN)
fullscreen // 全屏模式 ( 所有相关的工具栏都没有 )(IE)
location // 是否显示地址栏 (NN,IE)
menubar // 是否显示菜单栏 (NN,IE)
scrollbars // 是否显示滚动条 (NN,IE)
status // 是否显示状态栏 (NN,IE)
toolbar // 是否显示工具栏 (NN,IE)
directories // 是否显示链接栏 (NN,IE)
titlebar // 是否显示标题栏 (NN)
hotkeys // 显示菜单快捷键 (NN)
innerHeight // 内容区域的高度 (NN)
innerWidth // 内容区域的宽度 (NN)
resizable // 是否可以调整大小 (NN,IE)
top // 窗口距离桌面上边界的大小 (NN,IE)
left // 窗口距离桌面左边界的大小 (NN,IE)
height // 窗口高度 (NN,IE)
width // 浏览器的宽度