Array | Kuroda Kayn's Blog

1.创建数组

Javascript的Array是个Object 所以可以通过两个办法来创建Array

//非常正式的写法，创建一个Array对象
cosnt number = new Array(1,2,3,4,5);
//但众所周知，Javascript是编程语言中的老头乐，所以你当然可以写的很简单直接用[]
const number = ["apple","blueberry","orange"];


//当然你也可以创建新空的数组
const arr1 = [];

// 创建一个长度为 5 的数组（注意：元素是 empty slots，不是 undefined）
const arr2 = new Array(5);

关于empty Slot

尽管根据索引找到empty slot对应的内容为undefined，但内部其实是empty slot。这是因为根据索引访问元素这个放的如果访问一个不存在的属性（包括数组索引其实就是对象属性），返回的就是 undefined。更多关于empty slot的知识我放在了[[Empty Slot]]这里便不再赘述了

const array = new Array(5);
console.log(array[0]);//undefined
console.log(array);//[ <5 empty items> ]

const array = const array = [1,,3];
console.log(array);//[ 1, <1 empty item>, 3 ]

特性

Javascript的Array更像Python的list而非array. 它是动态数组可以随便放不同类型的元素，甚至还能放函数、对象。比如它可以这样

const arr = [1, "hello", 3.14, { name: "Tom" }];

2.访问/修改数组

const fruits = ["apple", "banana", "orange"];

// 通过索引访问
console.log(fruits[0]); // "apple"

// 修改
fruits[1] = "blueberry"; // ["apple", "blueberry", "orange"]

// 数组长度
console.log(fruits.length); // 3

3.常见的方法

3.1增删

const arr = [1, 2, 3];

// 末尾添加
arr.push(4); // [1,2,3,4]

// 末尾删除
arr.pop(); // [1,2,3]

// 开头添加
arr.unshift(0); // [0,1,2,3]

// 开头删除
arr.shift(); // [1,2,3]

// 指定位置增删改
arr.splice(1, 1, 99); // [1,99,3]   (从索引1删掉1个元素，再插入99)

3.2遍历

const arr = [10, 20, 30];

// forEach：逐个访问
arr.forEach((v) => console.log(v));

// map：返回新数组
const doubled = arr.map((v) => v * 2); // [20,40,60]

// filter：过滤
const filtered = arr.filter((v) => v > 15); // [20,30]

// reduce：累加器
const sum = arr.reduce((acc, v) => acc + v, 0); // 60

3.3搜索/查找

const arr = ["a", "b", "c", "b"];

// indexOf：找到索引（找不到返回 -1）
arr.indexOf("b"); // 1

// lastIndexOf：从后往前找
arr.lastIndexOf("b"); // 3

// includes：是否包含
arr.includes("c"); // true

// find / findIndex：更灵活条件查找
arr.find((el) => el === "b"); // "b"
arr.findIndex((el) => el === "b"); // 1

3.4 转换与合并

const arr = [1, 2, 3];

// join：转字符串
arr.join("-"); // "1-2-3"

// concat：合并数组
[1, 2].concat([3, 4]); // [1,2,3,4]

// slice：截取（不修改原数组）
arr.slice(1, 3); // [2,3]

// flat：拍平多维数组
[1, [2, [3]]].flat(2); // [1,2,3]

4. 特殊点 & 注意事项

稀疏数组：数组可以有空位

const arr = [1, , 3]; // 长度是 3，但索引 1 是 empty slot

数组本质是对象：typeof [] === "object"
length 可手动修改

const arr = [1, 2, 3, 4];
arr.length = 2; // [1,2]

5. 高级用法

数组解构

const [a, b] = [10, 20]; // a=10, b=20

展开运算符

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4]

与对象结合

const users = [
  { name: "Tom", age: 18 },
  { name: "Jerry", age: 20 },
];

const names = users.map((u) => u.name); // ["Tom","Jerry"]