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

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 删除元素

⚠️ 日常开发中，用splice、pop、shift执行真正删除，避免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 常用方法精讲

📌 添加元素

letarr=[2,3];arr.push(4);// arr 变成 [2,3,4]arr.unshift(1);// arr 变成 [1,2,3,4]

📌 截取与合并

letarr=[1,2,3,4];letsub=arr.slice(1,3);// 返回 [2, 3]，arr 不变arr.splice(1,2,'a');// arr 变成 [1, 'a', 4]

📌 查找元素

letarr=[10,20,30];arr.indexOf(20);// 1arr.includes(40);// falsearr.find(x=>x>15);// 20

📌 遍历

letarr=[1,2,3];arr.forEach((v,i)=>console.log(i,v));// 输出 0 1, 1 2, 2 3// arr 本身不变（除非在回调中赋值 arr[i]=...）

📌 排序与反转

letarr=[1,2,10];arr.sort();// [1, 10, 2]（字符串排序）arr.sort((a,b)=>a-b);// [1, 2, 10]（数字升序）arr.reverse();// [10, 2, 1]

📌 数组转字符串

[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 常用方法精讲

📌 截取

lets='JavaScript';s.slice(0,4);// 'Java's.slice(-6);// 'Script'（从倒数第6到末尾）

📌 查找与判断

lets='hello world';s.indexOf('o');// 4s.includes('world');// trues.startsWith('he');// true

📌 修改（生成新串）

lets=' JS ';s.trim();// 'JS''apple, apple'.replaceAll('apple','orange');// 'orange, orange'

📌 分割与拼接

'2025-01-01'.split('-');// ['2025','01','01']['a','b','c'].join('');// 'abc'

📌 填充

'5'.padStart(3,'0');// '005''ab'.padEnd(5,'!');// 'ab!!!'

三、JavaScript 与 Java 核心差异对比

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