内置对象

1. String 字符串

1.1 定义方式

JavaScript 提供了两种方式来定义字符串：基本数据类型和引用数据类型。

var str1 = 'welcome';  // 基本数据类型 string
var str2 = new String('welcome');  // 引用数据类型 String

• 基本数据类型 string：表示原始字符串，可以直接使用引号包裹字符串定义。
• 引用数据类型 String：通过 new 关键字创建 String 对象。

使用 length 属性获取字符串的长度：

var str = 'hello';
console.log(str.length);  // 输出：5

1.2 常用方法

方法	描述
charAt(index)	返回在指定索引位置的字符，也可使用[索引]的方式
charCodeAt(index)	返回在指定的位置的字符的 Unicode 编码。
indexOf(字符串, index)	返回某个指定的字符串值在字符串中首次出现的位置，找不到则返回-1
lastIndexOf(字符串, index)	返回某个指定的字符串值在字符串中最后出现的位置
toLowerCase()	把字符串转化为小写
toUpperCase()	把字符串转化为大写
substr(start, length)	从起始索引号提取字符串中指定数目的字符
substring(start, stop)	提取字符串中两个指定的索引号之间的字符
slice(start, end)	提取字符串的某个部分，并返回提取到的新字符串
split(separator, howmany)	把字符串分割为字符串数组
trim()	去除字符串开头和末尾的空格
fromCharCode()	将字符编码转换为字符串，静态方法

示例代码：

var str = "Hello, World!";
console.log(str.charAt(0));       // 输出：H
console.log(str[1]);              // 输出：e
console.log(str.charCodeAt(0));   // 输出：72
console.log(str.indexOf("World"));// 输出：7
console.log(str.lastIndexOf("o"));// 输出：8
console.log(str.toLowerCase());   // 输出：hello, world!
console.log(str.toUpperCase());   // 输出：HELLO, WORLD!
console.log(str.substr(7, 5));    // 输出：World
console.log(str.substring(7, 12));// 输出：World
console.log(str.slice(7, 12));    // 输出：World
console.log(str.split(", "));     // 输出：["Hello", "World!"]
console.log(str.trim());          // 输出：Hello, World!
console.log(String.fromCharCode(72, 101, 108, 108, 111)); // 输出：Hello

1.3 基本包装类型

基本包装类型是 JavaScript 中提供的一种特殊的引用类型，用于操作基本数据类型。

• JavaScript 提供了三个特殊的引用类型：String、Number 和 Boolean，用于包装基本数据类型。
• 当访问基本数据类型值时，会自动创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。
• 操作基本数据类型值的语句一旦执行完毕，创建的包装对象就会立即销毁。
• 因为有了基本包装类型，JavaScript 中的基本类型值可以被当作对象来访问。

// 访问基本类型值时，自动创建 String 包装对象
var str = "hello";
console.log(str.toUpperCase());  // 输出：HELLO

// 手动创建 String 包装对象
var strObj = new String("hello");
console.log(strObj.toUpperCase());  // 输出：HELLO

// 比较基本类型和包装类型
console.log(typeof str);  // 输出：string
console.log(typeof strObj);  // 输出：object

// 基本类型值作为对象访问时的过程
var str = "hello";
str.someProperty = "some value";
console.log(str.someProperty);  // 输出：undefined
// 虽然可以为基本类型值设置属性，但这些属性在语句执行完毕后就被销毁

1.4 总结

• 基本数据类型：直接定义字符串，效率高。
• 引用数据类型：通过 new 关键字创建，可以附加属性和方法。
• 基本包装类型：使基本类型值能够调用方法和访问属性，但这些包装对象是临时的，操作完成后会立即销毁。

2. Date

2.1 定义方式

JavaScript 提供了 Date 对象来处理日期和时间。可以通过多种方式创建 Date 对象。

// 定义一个日期对象，表示当前时间
var date1 = new Date();

// 参数为指定的年、月、日、时、分、秒
var date2 = new Date(2024, 6, 23, 14, 30, 0);

// 参数为与1970-01-01相差的毫秒数
var date3 = new Date(1627029000000);

2.2 常用方法

Date 对象提供了多种方法来获取和设置日期和时间信息。

方法名	说明
getFullYear()	以四位数字返回年份
getMonth()	返回月份 (0 ~ 11)，0 表示 1 月
getDate()	返回一个月中的某一天 (1 ~ 31)
getHours()	返回小时 (0 ~ 23)
getMinutes()	返回分钟 (0 ~ 59)
getSeconds()	返回秒数 (0 ~ 59)
getMilliseconds()	返回毫秒 (0 ~ 999)
getDay()	返回一周中的某一天 (0 ~ 6)，0 表示周日
getTime()	返回从 1970-01-01 00:00:00 至今的毫秒数
toUTCString()	把 Date 对象转换为世界标准时间的字符串
toLocaleString()	把 Date 对象转换为本地时间的字符串

setXxx 方法与 getXxx 方法类似，用于设置对应的值。

2.3 示例代码

// 获取当前时间
var now = new Date();
console.log("当前时间:", now);

// 获取具体时间信息
console.log("年份:", now.getFullYear());           // 输出：当前年份
console.log("月份:", now.getMonth());               // 输出：当前月份（0 表示 1 月）
console.log("日期:", now.getDate());                // 输出：当前日期
console.log("小时:", now.getHours());               // 输出：当前小时
console.log("分钟:", now.getMinutes());             // 输出：当前分钟
console.log("秒数:", now.getSeconds());             // 输出：当前秒数
console.log("毫秒数:", now.getMilliseconds());      // 输出：当前毫秒数
console.log("星期几:", now.getDay());               // 输出：星期几（0 表示周日）
console.log("时间戳:", now.getTime());              // 输出：从 1970-01-01 00:00:00 至今的毫秒数

// 转换为字符串
console.log("UTC 时间字符串:", now.toUTCString());     // 输出：UTC 时间字符串
console.log("本地时间字符串:", now.toLocaleString()); // 输出：本地时间字符串

// 设置具体时间信息
var specificDate = new Date();
specificDate.setFullYear(2025);
specificDate.setMonth(11); // 11 表示 12 月
specificDate.setDate(25);
specificDate.setHours(10);
specificDate.setMinutes(30);
specificDate.setSeconds(0);
specificDate.setMilliseconds(0);

console.log("设置的具体时间:", specificDate);

2.4 总结

• Date 对象用于处理日期和时间，可以获取和设置年、月、日、时、分、秒、毫秒等信息。
• Date 对象提供多种方法来转换和格式化日期和时间，例如转换为 UTC 时间字符串和本地时间字符串。
• setXxx 方法与 getXxx 方法类似，用于设置对应的日期和时间值。

通过灵活使用 Date 对象的方法，可以轻松操作和处理各种日期和时间需求。

3. RegExp

3.1 简介

正则表达式是一门独立的语言，有自己的语法，用于检测指定字符串是否符合特定规则。正则表达式用于定义规则，称为 Regular Expression。在 JavaScript 中提供了 RegExp 对象，表示正则表达式。

3.2 定义方式

创建正则表达式对象有两种方式：

• 使用字面量

  var reg = /pattern/attribute;
  

• 使用构造函数

  var reg = new RegExp(pattern, attribute);
  

说明：

• pattern：表示匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成。
• attribute：表示匹配特征，取值有：
  • i：忽略大小写
  • g：全局匹配
  • m：多行匹配

3.3 匹配规则

元字符：具有特殊含义的字符

符号	描述
\s	匹配任何的空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外的任何字符
\w	匹配一个数字、下划线或字母字符
\W	任何非单字字符
.	匹配除了换行符之外的任意字符

量词：指定字符出现的次数

符号	描述
{n}	匹配前一项 n 次
{n,}	匹配前一项 n 次，或者多次
{n,m}	匹配前一项至少 n 次，但是不能超过 m 次
*	匹配前一项 0 次或多次，等价于 {0,}
+	匹配前一项 1 次或多次，等价于 {1,}
?	匹配前一项 0 次或 1 次，也就是说前一项是可选的，等价于 {0,1}

特殊符号：具有特殊含义的符号

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始，即表示行的开始
$	匹配字符串的结束，即表示行的结束
[ ]	表示可匹配的列表
( )	用于分组
|	表示或者
[ ^ ]	在 [ ] 中的尖括号表示非

注：[\u4E00-\u9FA5] 用来匹配中文字符。

3.4 基本用法

正则表达式对象的方法：

方法	描述
test()	测试方法，用于测试字符串是否符合正则表达式对象所指定的模式规则，返回 true 或 false
exec()	搜索方法，用于在字符串中查找符合正则表达式对象所指定的模式的子字符串，返回找到的结果，若找不到则返回 null

String 对象的以下方法，支持使用正则表达式：

方法	描述
search()	检索与正则表达式相匹配的子字符串，返回第一个匹配的子串的起始位置，若找不到则返回 -1
match()	检索与正则表达式相匹配的子字符串，返回第一个匹配结果（无全局标志 g）或存放所有匹配结果的数组（有全局标志 g）
replace()	检索与正则表达式相匹配的子字符串，然后用第二个参数来替换这些子串，全局标志 g 有效
split()	按照与正则表达式匹配的字符作为分隔符

3.5 示例代码

基本示例

// 使用字面量方式定义正则表达式
var reg = /hello/i; // 匹配 "hello"（忽略大小写）

// 使用构造函数方式定义正则表达式
var reg2 = new RegExp("world", "g"); // 匹配 "world"（全局匹配）

// 测试字符串是否匹配正则表达式
console.log(reg.test("Hello, world!")); // 输出：true

// 在字符串中查找匹配的子字符串
console.log(reg2.exec("Hello, world! Hello, world!")); // 输出：["world", index: 7, input: "Hello, world! Hello, world!", groups: undefined]

表单校验示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验示例</title>
    <script type="text/javascript">
        function validateForm() {
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            var usernameReg = /^[a-zA-Z0-9_]{3,16}$/; // 用户名只能包含字母、数字、下划线，长度为3-16
            var passwordReg = /^[a-zA-Z0-9!@#$%^&*]{6,18}$/; // 密码只能包含字母、数字、特殊字符，长度为6-18

            if (!usernameReg.test(username)) {
                alert("用户名不合法！");
                return false;
            }

            if (!passwordReg.test(password)) {
                alert("密码不合法！");
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

3.6 总结

• 正则表达式是定义字符串匹配规则的强大工具，在 JavaScript 中通过 RegExp 对象实现。
• 正则表达式可以通过字面量或构造函数来定义，支持多种模式和特征。
• 常用方法包括 test() 和 exec()，以及字符串对象的 search()、match()、replace() 和 split() 方法。
• 在客户端表单校验中，正则表达式可以有效地保证输入数据的合法性和格式正确性。

4. 下拉列表

Select 对象

Select 对象表示 HTML 表单中的一个下拉列表，常用于表单数据的选择。

属性

• length：设置或返回下拉列表中选项的数量。

  var select = document.getElementById("mySelect");
  console.log(select.length); // 输出下拉列表的选项数量
  

• selectedIndex：设置或返回下拉列表中被选中项的索引。

  var select = document.getElementById("mySelect");
  select.selectedIndex = 2; // 设置选中第三个选项
  console.log(select.selectedIndex); // 输出当前选中项的索引
  

• value：返回下拉列表中被选项项的值。

  var select = document.getElementById("mySelect");
  console.log(select.value); // 输出当前选中项的值
  

• options：返回下拉列表中所有的选项，值为 Option 对象数组（当该数组改变时对应下拉列表中选项也会跟着改变）。

  var select = document.getElementById("mySelect");
  var options = select.options; // 获取所有选项
  for (var i = 0; i < options.length; i++) {
      console.log(options[i].text); // 输出每个选项的文本值
  }
  

方法

• add()：向下拉列表中添加一个选项。

  var select = document.getElementById("mySelect");
  var newOption = new Option("新选项", "newValue");
  select.add(newOption); // 向下拉列表中添加一个新选项
  

事件

• onchange：下拉列表的选项改变时触发。

  <select id="mySelect" onchange="handleChange()">
      <option value="1">选项 1</option>
      <option value="2">选项 2</option>
      <option value="3">选项 3</option>
  </select>
  
  <script>
      function handleChange() {
          var select = document.getElementById("mySelect");
          console.log("当前选中项的值:", select.value);
      }
  </script>
  

Option 对象

Option 对象表示 HTML 表单中下拉列表的一个选项。

属性

• text：设置或返回在页面中显示的文本值。

  var select = document.getElementById("mySelect");
  var option = select.options[0];
  console.log(option.text); // 输出第一个选项的文本值
  

• value：设置或返回传递给服务器的值。

  var select = document.getElementById("mySelect");
  var option = select.options[0];
  console.log(option.value); // 输出第一个选项的值
  

构造函数

• Option(文本值, 服务器值)：创建一个选项。

  var newOption = new Option("新选项", "newValue");
  

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列表示例</title>
    <script type="text/javascript">
        function handleChange() {
            var select = document.getElementById("mySelect");
            console.log("当前选中项的值:", select.value); // 输出当前选中项的值
        }

        function addOption() {
            var select = document.getElementById("mySelect");
            var newOption = new Option("新选项", "newValue");
            select.add(newOption); // 向下拉列表中添加一个新选项
        }
    </script>
</head>
<body>
    <label for="mySelect">选择一个选项：</label>
    <select id="mySelect" onchange="handleChange()">
        <option value="1">选项 1</option>
        <option value="2">选项 2</option>
        <option value="3">选项 3</option>
    </select>
    <br><br>
    <button onclick="addOption()">添加选项</button>
</body>
</html>

总结

Select 对象表示 HTML 表单中的下拉列表，可以通过其属性、方法和事件来操作下拉列表的选项。Option 对象表示下拉列表中的一个选项，可以通过其属性设置或获取选项的文本值和传递给服务器的值。通过这些对象，可以轻松实现对下拉列表的动态操作和管理。