【前端(十三)】JavaScript 数组与字符串笔记

📅 2026/7/12 8:05:37 👁️ 阅读次数 📝 编程学习
【前端(十三)】JavaScript 数组与字符串笔记

文章目录

  • JavaScript 数组与字符串笔记
    • 一、数组(Array)
      • 1.1 定义
      • 1.2 特点
      • 1.3 查询与索引访问
      • 1.4 修改与赋值
      • 1.5 length 属性与 empty
      • 1.6 删除元素
      • 1.7 常用方法精讲
        • 📌 添加元素
        • 📌 截取与合并
        • 📌 查找元素
        • 📌 遍历
        • 📌 排序与反转
        • 📌 数组转字符串
    • 二、字符串(String)
      • 2.1 定义
      • 2.2 特点
      • 2.3 索引访问(只读)
      • 2.4 拼接与模板字符串
      • 2.5 常用方法精讲
        • 📌 截取
        • 📌 查找与判断
        • 📌 修改(生成新串)
        • 📌 分割与拼接
        • 📌 填充
    • 三、JavaScript 与 Java 核心差异对比

JavaScript 数组与字符串笔记

一、数组(Array)

1.1 定义

语法格式

// 字面量(推荐)let数组名=[元素1,元素2,...];// 构造函数(了解)let数组名=newArray();// 空数组let数组名=newArray(长度);// 稀疏数组(全是 empty)let数组名=newArray(1,2,...);// 等价于字面量

例子

letnums=[10,20,30];letmix=[1,'hello',true,{name:'Tom'}];// 混合类型

1.2 特点

  • 无类型限制:同一个数组可存放任意类型的元素。
  • 动态长度:自动伸缩,length属性可读写
  • 索引从 0 开始,越界访问不会抛出异常,返回undefined

1.3 查询与索引访问

直接使用[ ]获取元素,支持at()负索引:

letarr=[10,20,30];console.log(arr[0]);// 10console.log(arr[5]);// undefined (不抛异常)console.log(arr.at(-1));// 30

1.4 修改与赋值

赋值可修改已有元素,也可扩容数组。

letarr=[1,2,3];// 修改(索引在 length 范围内)arr[1]=100;// 改变原数组:[1, 100, 3]// 扩容赋值(索引 ≥ length)arr[5]='hello';// 改变原数组:[1, 100, 3, empty × 2, 'hello']// length 变为 6
  • 修改:索引位于0 ~ length-1,直接覆盖原值。
  • 扩容赋值:索引 ≥length,数组自动扩展,中间未赋值的索引成为empty

1.5 length 属性与 empty

length可直接修改来截断或扩展数组:

letarr=[1,2,3,4,5];console.log(arr.length);// 5// 减小 length → 截断数组arr.length=2;console.log(arr);// [1, 2]// 增大 length → 增加空位arr.length=5;console.log(arr);// [1, 2, empty × 3]

什么是 empty?

  • empty不是undefined,不是null,也不是0,它表示数组中的空位(hole)
  • 访问空位时会返回undefined,但这两者并不相等:
    • empty是“没有值”的占位,遍历时会被跳过
    • undefined是一个真实的值,遍历时不会被跳过
leta=[1,,3];// 中间是一个 emptyconsole.log(a[1]);// undefineda.forEach(v=>console.log(v));// 输出 1 和 3,跳过空位letb=[1,undefined,3];b.forEach(v=>console.log(v));// 输出 1、undefined、3

1.6 删除元素

方法描述是否改变原数组示例与结果
delete arr[i]删除指定索引值,留下 empty是(length 不变)delete arr[1][1, empty, 3]
splice(start, n)删除从 start 开始的 n 个元素arr.splice(1,2)→ 删除并返回被删元素数组
pop()删除最后一个元素,返回该元素arr.pop()
shift()删除第一个元素,返回该元素arr.shift()

⚠️ 日常开发中,用splicepopshift执行真正删除,避免delete造成稀疏数组。

letarr=['a','b','c','d'];deletearr[1];// 变成 ['a', empty, 'c', 'd'],不推荐arr.splice(1,2);// 从索引1删2个,变成 ['a', 'd']arr.pop();// 移除 'd'arr.shift();// 移除 'a'

1.7 常用方法精讲

📌 添加元素
方法描述是否改变原数组
push(...items)末尾添加,返回新 length
unshift(...items)开头添加,返回新 length
letarr=[2,3];arr.push(4);// arr 变成 [2,3,4]arr.unshift(1);// arr 变成 [1,2,3,4]
📌 截取与合并
方法描述是否改变原数组
slice(start, end)浅拷贝一段,返回新数组❌ 否
splice(start, n, ...items)删除/插入/替换,万能修改器
letarr=[1,2,3,4];letsub=arr.slice(1,3);// 返回 [2, 3],arr 不变arr.splice(1,2,'a');// arr 变成 [1, 'a', 4]
📌 查找元素
方法描述是否改变原数组
indexOf(item)严格相等查找,返回索引(-1 找不到)❌ 否
includes(item)是否包含,返回 boolean❌ 否
find(callback)返回第一个满足条件的元素❌ 否
letarr=[10,20,30];arr.indexOf(20);// 1arr.includes(40);// falsearr.find(x=>x>15);// 20
📌 遍历
方法描述是否改变原数组
forEach(callback)对每个元素执行回调,无返回值❌ 不改变原数组(但回调内可修改元素)
letarr=[1,2,3];arr.forEach((v,i)=>console.log(i,v));// 输出 0 1, 1 2, 2 3// arr 本身不变(除非在回调中赋值 arr[i]=...)
📌 排序与反转
方法描述是否改变原数组
sort(compareFn)排序,默认按字符串顺序
reverse()反转顺序
letarr=[1,2,10];arr.sort();// [1, 10, 2](字符串排序)arr.sort((a,b)=>a-b);// [1, 2, 10](数字升序)arr.reverse();// [10, 2, 1]
📌 数组转字符串
方法描述是否改变原数组
join(分隔符)将数组用分隔符连接成字符串❌ 否
toString()默认用逗号连接❌ 否
[1,2,3].join('-');// '1-2-3'[1,2,3].toString();// '1,2,3'

二、字符串(String)

2.1 定义

lets1='hello';lets2="world";lets3=`模板字符串`;// 支持多行与嵌入变量

2.2 特点

  • 不可变:任何操作都返回新字符串,原字符串不会改变。
  • 类数组索引:可用[index]charAt(index)读取单个字符,但只能读。

2.3 索引访问(只读)

letstr='JavaScript';console.log(str[0]);// 'J'console.log(str[10]);// undefinedstr[0]='j';// 无效,str 不变

2.4 拼接与模板字符串

传统拼接:使用+运算符

letresult='Hello, '+name+'!';

模板字符串:使用反引号

  • 支持多行字符串,直接换行即可;
  • 变量或表达式用${}嵌入。
letmulti=`第一行 第二行`;// 保留换行

2.5 常用方法精讲

📌 截取
方法描述返回
slice(start, end)截取 [start, end),支持负索引新字符串
lets='JavaScript';s.slice(0,4);// 'Java's.slice(-6);// 'Script'(从倒数第6到末尾)
📌 查找与判断
方法描述返回
indexOf(sub)查找子串首次出现位置索引或 -1
includes(sub)判断是否包含子串boolean
startsWith(sub)是否以 sub 开头boolean
endsWith(sub)是否以 sub 结尾boolean
lets='hello world';s.indexOf('o');// 4s.includes('world');// trues.startsWith('he');// true
📌 修改(生成新串)
方法描述返回
replace(old, new)替换第一个匹配;可用正则全局替换新字符串
replaceAll(old, new)替换所有匹配新字符串
toLowerCase()全小写新字符串
toUpperCase()全大写新字符串
trim()去除两端空格新字符串
lets=' JS ';s.trim();// 'JS''apple, apple'.replaceAll('apple','orange');// 'orange, orange'
📌 分割与拼接
方法描述返回
split(分隔符)将字符串拆为数组数组
数组的join()将数组拼回字符串字符串
'2025-01-01'.split('-');// ['2025','01','01']['a','b','c'].join('');// 'abc'
📌 填充
方法描述返回
padStart(len, str)在前填充至指定长度新字符串
padEnd(len, str)在后填充至指定长度新字符串
'5'.padStart(3,'0');// '005''ab'.padEnd(5,'!');// 'ab!!!'

三、JavaScript 与 Java 核心差异对比

对比维度JavaScriptJava
数组类型元素可混合,无固定类型强类型,元素必须同一类型
数组长度动态伸缩,length属性可读写长度固定,length只读
越界访问返回undefined,不抛异常抛出ArrayIndexOutOfBoundsException
直接索引赋值扩容支持,索引≥length 时自动扩容不支持,只能修改现有索引
数组删除splicepopshift直接删除无内置直接删除,需用集合类
字符串不可变性是,所有操作返回新串是,String不可变
字符访问str[i]直接读(只读)必须charAt(i)
字符串比较===直接比值equals()比较内容,==比较引用
数组排序默认按字符串排序基本类型自然排序,对象需Comparator
内容相等数组内容比较不能直接用==Arrays.equals()深度比较

以上为个人学习总结,旨在梳理个人理解。如有疏漏或不当之处,欢迎指正与交流。