js数组简介
数组
@jarringslee
声明方式
// 字面量（最常用）
let a = [10, 20, 30];
let aaa = [] //（等后面添加）// Array 构造器（不常用，可读性差）
let b = new Array(10, 20, 30);// 静态方法：把“类数组”或迭代对象变成真数组
let c = Array.from('abc'); // ['a','b','c']
let d = Array.of(3); // [3] 而不是 new Array(3) 生成空数组
类型 & 特点
| 点 | 说明 |
|---|---|
| 动态长度 | arr.length 可读写，改大留空，改小截断 |
| 元素任意 | 数字、字符串、对象、函数、甚至数组套数组 |
| 索引 | 从 0 开始，最大索引 = length-1 |
取值 / 赋值
a[0]; // 10
a[2] = 99; // 改
a[5] = 77; // 自动扩容，中间留空位
数组的修改
想给字符串类型的元素前面或者后面加个什么东西，直接用加号+“拼接"即可。
arr[i] = arr[i] + ‘元’
数组的新增
-
数组.push() （常用） 将一个或多个元素加到数组末尾，并返回该数组的新长度。
arr.push(元素1, ..., 元素n) //将该函数直接输出，得到数组的新长度。 let arr = [1, '342r', 'adsa', 3333] document.write(arr.push('233', 23132,'d32')) //更新数组内容并输出“7” -
数组.unshift() 将一个或多个元素加到数组开头，并返回该数组的新长度。
arr.unshift(元素1, ..., 元素n) //使用方法和push相同
数组求最值 遍历数组、设置最值变量，不断比较并更新最值即可。
数组的筛选 新建一个数组，遍历原有数组，将符合条件的放入新的数组
数组的删除
-
数组.pop() 删除一个尾部元素，并返回被删除的元素
-
数组.shift() 删除一个头部元素，并返回被删除的元素
-
增删改万能工具 数组.splice() 删除指定的一段元素，并可在该位置添加一段新的元素。
arr.splice(起始位置index, 要删除几个元素（不删就是0）count(后面可以接新添加的元素1,2,...,n))- 要是只想添加，那就在第二个位置写0
- 如果只写了第一个数字，则会把该下标后面的元素全部删除
| 操作 | 方法 | 是否改变原数组 | 备注 |
|---|---|---|---|
| 增 | push(...items) | ✅ | 末尾追加，返回新长度 |
unshift(...items) | ✅ | 头部追加 | |
splice(index,0,...items) | ✅ | 任意位置插入 | |
| 删 | pop() | ✅ | 删末尾，返回被删元素 |
shift() | ✅ | 删头部 | |
splice(index,n) | ✅ | 删任意连续 n 个 | |
slice(start,end) | ❌ | 返回切片，左闭右开 | |
| 改 | fill(value,start,end) | ✅ | 批量改值 |
| 查 | indexOf/lastIndexOf | ❌ | 找不到返回 -1 |
includes(value) | ❌ | 布尔版查找 | |
| 排序 | sort((a,b)=>a-b) | ✅ | 默认字典序，需传比较器 |
| 反转 | reverse() | ✅ | 直接倒序 |
| 最值 | Math.max(...arr) / Math.min(...arr) | ❌ | 需配合展开运算符 |
高阶函数
let nums = [3, 1, 4];let doubled = nums.map(n => n * 2); // [6, 2, 8]
let total = nums.reduce((s, n) => s + n, 0); // 8
let evens = nums.filter(n => n % 2 === 0); // [4]
空位 & 稀疏数组
let arr = [1, , 3]; // 索引 1 是 empty
arr[5] = 6; // 长度 6，但 2~4 都是 empty
遍历时空位会被 for...of、forEach 跳过，但 map 会保留空位。
数组是“动态列表”，push/pop/splice 改长度，map/filter/reduce 玩数据。
简单排序方法 arr.sort()
默认按字符串字典序排序；想按数字大小排，必须给它一个“比较函数”。
默认行为
[3, 21, 7].sort(); // [21, 3, 7] —— 按字符串比较，'21'<'3'
比较数字：传比较函数
// 升序
arr.sort((a, b) => a - b);
//或者
arr.sort(function (a, b){return a - b})// 降序
arr.sort((a, b) => b - a);
//或者
arr.sort(function (a, b){return b - a})
- 返回值 < 0：a 排前面
- 返回值 = 0：顺序不动
- 返回值 > 0：b 排前面
复杂对象排序示例
const list = [{name:'Tom', age:20}, {name:'Bob', age:15}];
list.sort((x, y) => x.age - y.age); // 按年龄升序
原地修改 & 返回值
- 直接改原数组，同时返回排序后的同一数组（不是新数组）。
| 需求 | 写法示例 |
|---|---|
| 随机打乱 | arr.sort(() => Math.random() - 0.5) |
| 中文拼音 | arr.sort((a,b)=>a.localeCompare(b,'zh-CN')) |
无参字典序，数字记得传函数；升序减，降序反，对象排序取属性。
数组小练习：简单柱形图
通过让用户输入四个季度的数据来生成四个柱形图。
不过还是有很多可以优化的地方：
首先可以让用户输入柱形数量即数组大小，不过html也要灵活布局（比如用flex布局根据比例平均分配空间）。此外，输入高度固定在了html代码中（还没续对象操作传入数据），以后学习了对象可以再运用css知识创建柱形图增长的简单动画。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid lightskyblue;border-bottom: 1px solid lightskyblue;margin: 100px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: lightskyblue;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head><body><script>let arr = []for (let i = 1; i <= 4; i++) {arr.push(prompt(`请输入第${i}季度的数据`))}document.write(`<div class="box">`)for (let i = 1; i <= 4; i++) {document.write(`<div style="height:${arr[i - 1]}px"><span>${arr[i - 1]}</span><h4>第${i}季度</h4></div>`)}document.write(`</div>`)</script>
</body></html>