【WEB】JavaScript 字符串、数组与函数详解

在 JavaScript 中，字符串、数组和函数是非常基础且重要的概念，它们在日常的前端开发中被广泛使用。本文将结合具体的代码示例，详细介绍这三者的常用操作和特性。

一、字符串（String）

字符串是由字符组成的序列，在 JavaScript 中可以用单引号、双引号或反引号包裹。下面介绍字符串的一些常用方法。

1.1 charAt ()：获取指定位置的字符

charAt(index) 方法返回字符串中指定下标的字符。如果下标为负数或超出字符串长度，返回空字符串。

let str = "daisy1111";
//         012345678
console.log(str.charAt(3)); // 输出 "s"

1.2 concat ()：连接字符串

concat() 方法用于连接两个或多个字符串，返回一个新的字符串，原字符串不会被改变。它可以接收多个参数，将所有参数按顺序连接到原字符串后面。

let str1 = "123";
let str2 = "345";
console.log(str1.concat(str2)); // 输出 "123345"

let str3 = "daisy";
console.log(str3.concat(str1, str2, "000")); // 输出 "daisy123345000"

注意： 字符串之间也可以使用 + 运算符直接连接。当数字与字符串使用 + 连接时，数字会被转换为字符串；其他类型与字符串使用 + 连接时，也会全部转换为字符串。

1.3 substring ()：截取字符串

substring(startIndex, endIndex) 方法用于截取字符串的一部分，返回一个新的字符串。其中，startIndex 是起始下标（包含），endIndex 是结束下标（不包含）。
注意：

• 如果省略第二个参数，则默认截取到字符串结尾。
• 如果 startIndex 大于 endIndex，方法会自动调换两者的位置。
• 如果出现负数，则自动转换为 0。

let str = "illbecomeanitman";
//         0123456789abcdef
let str2 = str.substring(3, 9);
console.log(str2); // 输出 "become"

1.4 substr ()：截取字符串

substr(startIndex, length) 方法也用于截取字符串，与 substring() 不同的是，第二个参数表示截取的长度。
注意：

• 省略第二个参数时，表示截取到字符串结尾。
• 第一个参数为负数时，表示从字符串的末尾开始计算下标（例如，-1 表示最后一个字符）。

let str = "illbecomeanitman";
//         0123456789abcdef
console.log(str.substr(3, 6)); // 输出 "become"
console.log(str.substr(-5)); // 输出 "itman"

1.5 indexOf ()：查找子字符串

indexOf(searchValue, startIndex) 方法用于判断字符串中是否包含某个子字符串。如果存在，返回子字符串首字符的下标；如果不存在，返回 -1。
注意： 第二个参数 startIndex 表示从该位置开始往后查找（可选）。

let hello = "helloworld!";
//           0123456789a
console.log(hello.indexOf("world")); // 输出 5
console.log(hello.indexOf("world", 6)); // 输出 -1

1.6 trim ()：去除空白字符

trim() 方法用于去除字符串两端的空格、制表符、换行符等空白字符，返回一个新的字符串，原字符串不会被改变。它不会删除字符串中间的空白字符。

let str = "   daisy   ";
console.log(str.trim()); // 输出 "daisy"

1.7 split ()：分割字符串为数组

split(separator, limit) 方法用于将字符串按照指定的分隔符分割成一个数组。separator 是分隔符（如果为 “”，则将每个字符都分割）；limit 是一个可选参数，用于限定返回数组的最大长度。

let name = "daisy|daisy|111";
console.log(name.split("|")); // 输出 ['daisy', 'daisy', '111']
console.log(name.split("", 5)); // 输出 ['d', 'a', 'i', 's', 'y']

二、数组（Array）

数组是用于存储多个值的集合，在 JavaScript 中，数组的元素可以是不同的数据类型。下面介绍数组的定义、常用方法等。

2.1 数组的定义

在 JavaScript 中，定义数组的方式有以下几种：

• 方式一：使用数组字面量

let arr1 = [1, 2, 3, "hh", false];

• 方式二：使用 new Array()

let arr2 = new Array();
let arr3 = new Array(1, 2, 3);

数组中的元素可以通过下标访问，下标从 0 开始。如果访问的下标超出了数组的长度，返回 undefined。

let arr = [1, 2, 3, "hh"];
console.log(arr[2]); // 输出 3
console.log(arr[10]); // 输出 undefined

注意： 不可以直接把值赋给数组名，这样会改变整个数组的类型和内容。例如，arr = “bit”; 之后，arr 就变成了一个字符串。

2.2 Array.isArray ()：判断是否为数组

Array.isArray(value) 方法用于判断一个值是否为数组，返回一个布尔值。这可以弥补 typeof 运算符的不足（typeof 数组会返回 “object”）。

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出 true
console.log(Array.isArray("hello")); // 输出 false

2.3 数组元素的增删

2.3.1 改变数组长度

可以通过修改数组的 length 属性来改变数组的长度。如果新的长度大于原长度，数组会被扩展，新增的元素为 undefined；如果新的长度小于原长度，数组会被截断。

let arr = [1, 2, 3];
arr.length = 5;
console.log(arr); // 输出 [1, 2, 3, undefined, undefined]

2.3.2 使用下标添加元素

通过指定数组的下标，可以为数组添加元素。如果下标超出了当前数组的长度，数组的长度会自动延伸到该下标。

let arr = new Array();
for (var i = 0; i < 5; i++) {
    arr[i] = i;
}
console.log(arr); // 输出 [0, 1, 2, 3, 4]

2.4 数组常用方法

2.4.1 push ()：在数组末端添加元素

push(element1, element2, …) 方法用于在数组的末端添加一个或多个元素，返回添加后数组的长度，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.push("hhhh")); //输出 4
console.log(arr); // 输出 [1, 2, 3, 'hhhh']

2.4.2 pop ()：删除数组末端的元素

pop() 方法用于删除数组末端的元素，返回被删除的元素，会改变原数组。

let arr = [1, 2, 3, 'hhhh'];
console.log(arr.pop()); //输出"hhhh"
console.log(arr); // 输出 [1, 2, 3]

2.4.3 shift ()：删除数组头部的元素

shift() 方法用于删除数组头部的元素，返回被删除的元素，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.shift()); // 输出 1
console.log(arr); // 输出 [2, 3]

2.4.4 unshift ()：在数组头部添加元素

unshift(element1, element2, …) 方法用于在数组的头部添加一个或多个元素，返回添加后数组的长度，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.unshift(0)); //输出 4
console.log(arr); // 输出 [0, 1, 2, 3]

2.4.5 splice ()：删除或替换数组元素

splice(startIndex, deleteCount, item1, item2, …) 是JavaScript 数组中最强大、最灵活的方法之一，它可以实现数组元素的删除、添加和替换操作，并且会直接修改原数组。
注意：

• startIndex：起始下标。
  • 正数表示从头开始
  • 负数表示从尾开始（例：-2 表示从倒数第二个元素开始）
• deleteCount：要删除的元素个数。（可选）
  • 若为 0 或负数，则不删除任何元素。
  • 若省略或大于从 startIndex 到数组末尾的元素总数，则删除从 startIndex 到数组末尾的所有元素。
• item1, item2, …（可选）：表示要添加到数组中的元素，从 startIndex 位置开始插入。若不指定，则 splice() 仅执行删除操作。
• 该方法返回新数组，若删除元素，则返回被删除元素组成的数组；若没有删除元素，则返回空数组。会改变原数组。

2.4.5.1 删除指定元素

let arr1 = [0，1，2，3，4];
//          0  1  2  3  4

//从下标 1 开始，删除一个元素
let deleted = arr1.splice(1, 1);

console.log(arr1);    // 输出：[0,2,3,4]（原数组被修改）
console.log(deleted);   // 输出：[1]（返回被删除的元素）

let arr2 = [0，1，2，3，4，5];
//          0  1  2  3  4  5

// 从倒数第 2 个元素（4）开始，删除 2 个元素
let deleted = arr2.splice(-2, 2);

console.log(arr2);    // 输出：[0，1，2，3]
console.log(deleted);   // 输出：[4，5]

2.4.5.2 向数组添加元素

当 deleteCount 为 0 时，splice() 不会删除元素，而是从 startIndex 位置插入新元素。

let arr1 = [0，1，2，3，4，5];
//          0  1  2  3  4  5

// 从下标 1 开始，删除 0 个元素，插入 6
arr1.splice(1, 0, 6);

console.log(arr1); // 输出：[0，1，6，2，3，4，5]

let arr2 = [0，1，2，3，4，5];

// 从倒数第 1 个元素后面（即数组末尾）插入 6
arr2.splice(-1, 0, 6);

console.log(arr2);     // 输出：[0，1，2，3，4，5，6]

2.4.5.3 替换数组元素

当 deleteCount 大于 0 且同时传入新元素时，splice() 会先删除指定数量的元素，再插入新元素，实现 “替换” 效果。

let arr1= [0，1，2，3，4，5];

// 从下标 1 开始，删除 1 个元素（1），插入 6
arr1.splice(1, 1, 6);

console.log(arr1);    // 输出：[0，6，2，3，4，5]

2.4.6 join ()：将数组转为字符串

join(separator) 方法用于将数组中的所有元素以指定的分隔符连接成一个字符串，返回该字符串。如果省略分隔符，默认使用逗号。

let arr = [1, 2, 3];
console.log(arr.join("|")); // 输出 "1|2|3"

与split（） 可以实现字符串与数组互相转换

2.4.7 toString ()：将数组转为字符串

toString() 方法将数组转为字符串，数组中的元素以逗号分隔，与 join() 方法省略分隔符时的效果相同。

let arr = [1, 2, 3];
console.log(arr.toString()); // 输出 "1,2,3"

2.4.8 reverse ()：翻转数组

reverse() 方法用于翻转数组中元素的顺序，返回翻转后的数组，会改变原数组。

let arr = [1, 2, 3];
console.log(arr.reverse()); // 输出 [3, 2, 1]

2.4.9 indexOf ()：查找数组元素

indexOf(searchElement, startIndex) 方法用于查找数组中是否存在某个元素。如果存在，返回该元素首次出现的下标；如果不存在，返回 -1。
注意： 第二个参数 startIndex 表示从该位置开始往后查找（可选）。

let arr = [1, 2, 3, 2, 1];
//         0  1  2  3  4
console.log(arr.indexOf(2)); // 输出 1
console.log(arr.indexOf(2, 2)); // 输出 3

三、函数（Function）

函数是一段可以重复执行的代码块，它可以接收参数并返回值。函数的使用可以提高代码的复用性和可维护性。

3.1 函数的定义与调用

3.1.1 基本定义方式

• 无参数函数

function hello() {
    console.log("hello");
}
hello(); // 调用函数，输出 "hello"

• 有参数函数

function HelloBit(num, name) {
    console.log(num + " hello " + name);
    return 1;
}
HelloBit(1, "daisy"); // 调用函数，输出 "1 hello daisy"

函数的参数在调用时如果实参个数小于形参个数，多余的形参值为 undefined。函数可以通过 return 语句返回值，如果没有 return 语句，函数默认返回 undefined。

let a = HelloBit(1, "daisy");
console.log(typeof(a)); // 输出 "number"（因为函数返回 1）
HelloBit(); // 输出 "undefined hello undefined"

3.1.2 函数表达式

可以将函数赋给一个变量，通过变量来调用函数，这种方式称为函数表达式。

• 命名函数表达式

let re = function sum() {
    let ret = 0;
    for (let i = 0; i <= 100; i++) {
        ret += i;
    }
    return ret;
};
console.log(re()); // 输出 5050（1到100的和）

• 匿名函数表达式

var add = function(a, b) {
    return a + b;
};
console.log(add(2, 3)); // 输出 5

3.2 函数的作用域

函数的作用域分为全局作用域和局部作用域：

• 全局作用域：在整个 <script> 标签或 JS 文件中都能访问的范围。在全局作用域中定义的变量称为全局变量。
• 局部作用域（函数作用域）：在函数内部定义的变量，只能在函数内部访问。在局部作用域中定义的变量称为局部变量。

let globalVar = "全局变量";

function testScope() {
    let localVar = "局部变量";
    console.log(globalVar); // 可以访问全局变量，输出 "全局变量"
    console.log(localVar); // 可以访问局部变量，输出 "局部变量"
}

testScope();
console.log(localVar); // 报错，无法访问函数内部的局部变量

本文详细介绍了 JavaScript 中字符串、数组和函数的常用操作和特性。字符串的各种方法可以方便地对字符进行处理；数组提供了丰富的方法用于元素的增删改查；函数则是代码复用的重要手段。掌握这些基础知识，对于进行 JavaScript 开发是非常重要的。在实际开发中，还需要根据具体需求灵活运用这些知识，不断积累经验。