FEATURED · 精选文章

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

发布时间 / 2026/9/20 15:26:51
来源 / 创域科博编辑部
栏目 / 资讯中心
【WEB】JavaScript 字符串、数组与函数详解 文章目录一、字符串String1.1 charAt ()获取指定位置的字符1.2 concat ()连接字符串1.3 substring ()截取字符串1.4 substr ()截取字符串1.5 indexOf ()查找子字符串1.6 trim ()去除空白字符1.7 split ()分割字符串为数组二、数组Array2.1 数组的定义2.2 Array.isArray ()判断是否为数组2.3 数组元素的增删2.3.1 改变数组长度2.3.2 使用下标添加元素2.4 数组常用方法2.4.1 push ()在数组末端添加元素2.4.2 pop ()删除数组末端的元素2.4.3 shift ()删除数组头部的元素2.4.4 unshift ()在数组头部添加元素2.4.5 splice ()删除或替换数组元素2.4.5.1 删除指定元素2.4.5.2 向数组添加元素2.4.5.3 替换数组元素2.4.6 join ()将数组转为字符串2.4.7 toString ()将数组转为字符串2.4.8 reverse ()翻转数组2.4.9 indexOf ()查找数组元素三、函数Function3.1 函数的定义与调用3.1.1 基本定义方式3.1.2 函数表达式3.2 函数的作用域一、字符串String字符串是由字符组成的序列在 JavaScript 中可以用单引号、双引号或反引号包裹。下面介绍字符串的一些常用方法。1.1 charAt ()获取指定位置的字符charAt(index)方法返回字符串中指定下标的字符。如果下标为负数或超出字符串长度返回空字符串。letstrdaisy1111;// 012345678console.log(str.charAt(3));// 输出 s1.2 concat ()连接字符串concat()方法用于连接两个或多个字符串返回一个新的字符串原字符串不会被改变。它可以接收多个参数将所有参数按顺序连接到原字符串后面。letstr1123;letstr2345;console.log(str1.concat(str2));// 输出 123345letstr3daisy;console.log(str3.concat(str1,str2,000));// 输出 daisy123345000注意字符串之间也可以使用 运算符直接连接。当数字与字符串使用 连接时数字会被转换为字符串其他类型与字符串使用 连接时也会全部转换为字符串。1.3 substring ()截取字符串substring(startIndex, endIndex)方法用于截取字符串的一部分返回一个新的字符串。其中startIndex 是起始下标包含endIndex 是结束下标不包含。注意如果省略第二个参数则默认截取到字符串结尾。如果 startIndex 大于 endIndex方法会自动调换两者的位置。如果出现负数则自动转换为 0。letstrillbecomeanitman;// 0123456789abcdefletstr2str.substring(3,9);console.log(str2);// 输出 become1.4 substr ()截取字符串substr(startIndex, length)方法也用于截取字符串与 substring() 不同的是第二个参数表示截取的长度。注意省略第二个参数时表示截取到字符串结尾。第一个参数为负数时表示从字符串的末尾开始计算下标例如-1 表示最后一个字符。letstrillbecomeanitman;// 0123456789abcdefconsole.log(str.substr(3,6));// 输出 becomeconsole.log(str.substr(-5));// 输出 itman1.5 indexOf ()查找子字符串indexOf(searchValue, startIndex)方法用于判断字符串中是否包含某个子字符串。如果存在返回子字符串首字符的下标如果不存在返回-1。注意第二个参数 startIndex 表示从该位置开始往后查找可选。lethellohelloworld!;// 0123456789aconsole.log(hello.indexOf(world));// 输出 5console.log(hello.indexOf(world,6));// 输出 -11.6 trim ()去除空白字符trim()方法用于去除字符串两端的空格、制表符、换行符等空白字符返回一个新的字符串原字符串不会被改变。它不会删除字符串中间的空白字符。letstr daisy ;console.log(str.trim());// 输出 daisy1.7 split ()分割字符串为数组split(separator, limit)方法用于将字符串按照指定的分隔符分割成一个数组。separator 是分隔符如果为 “”则将每个字符都分割limit 是一个可选参数用于限定返回数组的最大长度。letnamedaisy|daisy|111;console.log(name.split(|));// 输出 [daisy, daisy, 111]console.log(name.split(,5));// 输出 [d, a, i, s, y]二、数组Array数组是用于存储多个值的集合在 JavaScript 中数组的元素可以是不同的数据类型。下面介绍数组的定义、常用方法等。2.1 数组的定义在 JavaScript 中定义数组的方式有以下几种方式一使用数组字面量letarr1[1,2,3,hh,false];方式二使用 new Array()letarr2newArray();letarr3newArray(1,2,3);数组中的元素可以通过下标访问下标从 0 开始。如果访问的下标超出了数组的长度返回 undefined。letarr[1,2,3,hh];console.log(arr[2]);// 输出 3console.log(arr[10]);// 输出 undefined注意不可以直接把值赋给数组名这样会改变整个数组的类型和内容。例如arr “bit”; 之后arr 就变成了一个字符串。2.2 Array.isArray ()判断是否为数组Array.isArray(value) 方法用于判断一个值是否为数组返回一个布尔值。这可以弥补 typeof 运算符的不足typeof 数组会返回 “object”。letarr[1,2,3];console.log(Array.isArray(arr));// 输出 trueconsole.log(Array.isArray(hello));// 输出 false2.3 数组元素的增删2.3.1 改变数组长度可以通过修改数组的length属性来改变数组的长度。如果新的长度大于原长度数组会被扩展新增的元素为 undefined如果新的长度小于原长度数组会被截断。letarr[1,2,3];arr.length5;console.log(arr);// 输出 [1, 2, 3, undefined, undefined]2.3.2 使用下标添加元素通过指定数组的下标可以为数组添加元素。如果下标超出了当前数组的长度数组的长度会自动延伸到该下标。letarrnewArray();for(vari0;i5;i){arr[i]i;}console.log(arr);// 输出 [0, 1, 2, 3, 4]2.4 数组常用方法2.4.1 push ()在数组末端添加元素push(element1, element2, …)方法用于在数组的末端添加一个或多个元素返回添加后数组的长度会改变原数组。letarr[1,2,3];console.log(arr.push(hhhh));//输出 4console.log(arr);// 输出 [1, 2, 3, hhhh]2.4.2 pop ()删除数组末端的元素pop() 方法用于删除数组末端的元素返回被删除的元素会改变原数组。letarr[1,2,3,hhhh];console.log(arr.pop());//输出hhhhconsole.log(arr);// 输出 [1, 2, 3]2.4.3 shift ()删除数组头部的元素shift() 方法用于删除数组头部的元素返回被删除的元素会改变原数组。letarr[1,2,3];console.log(arr.shift());// 输出 1console.log(arr);// 输出 [2, 3]2.4.4 unshift ()在数组头部添加元素unshift(element1, element2, …) 方法用于在数组的头部添加一个或多个元素返回添加后数组的长度会改变原数组。letarr[1,2,3];console.log(arr.unshift(0));//输出 4console.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 删除指定元素letarr1[01234];// 0 1 2 3 4//从下标 1 开始删除一个元素letdeletedarr1.splice(1,1);console.log(arr1);// 输出[0,2,3,4]原数组被修改console.log(deleted);// 输出[1]返回被删除的元素letarr2[012345];// 0 1 2 3 4 5// 从倒数第 2 个元素4开始删除 2 个元素letdeletedarr2.splice(-2,2);console.log(arr2);// 输出[0123]console.log(deleted);// 输出[45]2.4.5.2 向数组添加元素当 deleteCount 为 0 时splice() 不会删除元素而是从 startIndex 位置插入新元素。letarr1[012345];// 0 1 2 3 4 5// 从下标 1 开始删除 0 个元素插入 6arr1.splice(1,0,6);console.log(arr1);// 输出[0162345]letarr2[012345];// 从倒数第 1 个元素后面即数组末尾插入 6arr2.splice(-1,0,6);console.log(arr2);// 输出[0123456]2.4.5.3 替换数组元素当 deleteCount 大于 0 且同时传入新元素时splice() 会先删除指定数量的元素再插入新元素实现 “替换” 效果。letarr1[012345];// 从下标 1 开始删除 1 个元素1插入 6arr1.splice(1,1,6);console.log(arr1);// 输出[062345]2.4.6 join ()将数组转为字符串join(separator)方法用于将数组中的所有元素以指定的分隔符连接成一个字符串返回该字符串。如果省略分隔符默认使用逗号。letarr[1,2,3];console.log(arr.join(|));// 输出 1|2|3与split可以实现字符串与数组互相转换2.4.7 toString ()将数组转为字符串toString() 方法将数组转为字符串数组中的元素以逗号分隔与 join() 方法省略分隔符时的效果相同。letarr[1,2,3];console.log(arr.toString());// 输出 1,2,32.4.8 reverse ()翻转数组reverse()方法用于翻转数组中元素的顺序返回翻转后的数组会改变原数组。letarr[1,2,3];console.log(arr.reverse());// 输出 [3, 2, 1]2.4.9 indexOf ()查找数组元素indexOf(searchElement, startIndex)方法用于查找数组中是否存在某个元素。如果存在返回该元素首次出现的下标如果不存在返回-1。注意第二个参数 startIndex 表示从该位置开始往后查找可选。letarr[1,2,3,2,1];// 0 1 2 3 4console.log(arr.indexOf(2));// 输出 1console.log(arr.indexOf(2,2));// 输出 3三、函数Function函数是一段可以重复执行的代码块它可以接收参数并返回值。函数的使用可以提高代码的复用性和可维护性。3.1 函数的定义与调用3.1.1 基本定义方式无参数函数functionhello(){console.log(hello);}hello();// 调用函数输出 hello有参数函数functionHelloBit(num,name){console.log(num hello name);return1;}HelloBit(1,daisy);// 调用函数输出 1 hello daisy函数的参数在调用时如果实参个数小于形参个数多余的形参值为 undefined。函数可以通过 return 语句返回值如果没有 return 语句函数默认返回 undefined。letaHelloBit(1,daisy);console.log(typeof(a));// 输出 number因为函数返回 1HelloBit();// 输出 undefined hello undefined3.1.2 函数表达式可以将函数赋给一个变量通过变量来调用函数这种方式称为函数表达式。命名函数表达式letrefunctionsum(){letret0;for(leti0;i100;i){reti;}returnret;};console.log(re());// 输出 50501到100的和匿名函数表达式varaddfunction(a,b){returnab;};console.log(add(2,3));// 输出 53.2 函数的作用域函数的作用域分为全局作用域和局部作用域全局作用域在整个script标签或 JS 文件中都能访问的范围。在全局作用域中定义的变量称为全局变量。局部作用域函数作用域在函数内部定义的变量只能在函数内部访问。在局部作用域中定义的变量称为局部变量。letglobalVar全局变量;functiontestScope(){letlocalVar局部变量;console.log(globalVar);// 可以访问全局变量输出 全局变量console.log(localVar);// 可以访问局部变量输出 局部变量}testScope();console.log(localVar);// 报错无法访问函数内部的局部变量本文详细介绍了 JavaScript 中字符串、数组和函数的常用操作和特性。字符串的各种方法可以方便地对字符进行处理数组提供了丰富的方法用于元素的增删改查函数则是代码复用的重要手段。掌握这些基础知识对于进行 JavaScript 开发是非常重要的。在实际开发中还需要根据具体需求灵活运用这些知识不断积累经验。
RELATED — 相关阅读

相关资讯

LATEST — 最新资讯

最新发布

TODAY — 本日精选

新闻

WEEKLY — 本周精选

新闻

MONTHLY — 本月精选

新闻