JavaScript学习笔记—数组的方法

1. 非破坏性方法

（1）Array.isArray()：用来检查一个对象是否是数组

console.log(Array.isArray([1,2,3,4])); // true
console.log(Array.isArray({name: "孙悟空"})); // false

（2）at()：

• 根据索引获取数组中的指定元素
• at可以接收负索引作为参数（如arr.at(-1)就是倒数第一个元素）

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"];
console.log(arr.at(-2)); // 沙和尚
console.log(arr.at(0)); // 孙悟空

（3）concat()：

• 用来链接两个或多个数组
• 非破坏性方法，不会影响原数组，而是返回一个新的数组

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"];
const arr2 = ["蜘蛛精", "白骨精"];
let result = arr.concat(arr2); // ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚", "蜘蛛精", "白骨精"]
result = arr.concat(arr2, ["牛魔王", "铁扇公主"]); // ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚", "蜘蛛精", "白骨精", "牛魔王", "铁扇公主"]

（4）indexOf()：

• 获取元素在数组中第一次出现的索引
• 参数：要查询的元素；查询你的起始位置

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"];
let result = arr.indexOf("沙和尚"); // 2
result = arr.indexOf("沙和尚", 3); // 4

（5）lastIndexOf()：

• 获取元素在数组中最后一次出现的位置
• 参数：要查询的元素；查询你的起始位置

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"];
let result = arr.lastIndexOf("沙和尚"); // 4
result = arr.lastIndexOf("沙和尚", 3); // 2

indexOf()和lastIndexOf()返回值，找到了则返回元素的索引，没找到返回-1

（6）join()：

• 将一个数组中的元素链接为一个字符串
• 可以指定一个字符串作为连接符

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"];
let result = arr.join(); // 孙悟空,猪八戒,沙和尚,唐僧,沙和尚
result = arr.join("|"); // 孙悟空|猪八戒|沙和尚|唐僧|沙和尚

（7）slice()：

• 用来截取数组（非破坏性方法）
• 参数：
  （1）第1个参数为截取的起始位置（包括该位置）
  （2）第2个参数为截取的结束位置（不包括该位置）
  （3）第2个参数可以省略不写，如果省略则会一直截取到最后
  （4）参数可以为负值
  （5）两个参数都不写，则可以对数组进行浅拷贝（浅复制）

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
let result = arr.slice(0, 2); // ['孙悟空', '猪八戒']
result = arr.slice(1, 3); // ['猪八戒', '沙和尚']
result = arr.slice(2); // ['沙和尚', '唐僧']
result = arr.slice(1, -1); // ['猪八戒', '沙和尚']
result = arr.slice(); // ["孙悟空", "猪八戒", "沙和尚", "唐僧"]

（8）filter()

• 将数组中符合条件的元素保存到一个新数组中返回
• 需要一个回调函数作为参数，会为每一个元素去调用回调函数，并根据返回值来决定是否将元素添加到新数组中
• 非破坏性方法

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 获取数组中的所有偶数
let result = arr.filter(ele => ele % 2 === 0);
console.log(result); // [2,4,6,8]

（9）map()

• 根据当前数组生成一个新数组
• 需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素
• 非破坏性方法

let arr = [1, 2, 3, 4, 5, 6, 7, 8];
// 生成新数组，数组元素值为旧数组元素*2
let result = arr.map(ele => ele * 2);
console.log(result); // [2, 4, 6, 8, 10, 12, 14, 16]
arr = ["孙悟空", "猪八戒", "沙和尚"];
result = arr.map(ele => "<li>" + ele + "</li>");
console.log(result); // ["<li>孙悟空</li>", "<li>猪八戒</li>", "<li>沙和尚</li>"]

（10）reduce()

• 用来将一个数组中的所有元素整合为一个值
• 参数：
  （1）回调函数，通过回调函数来指定合并的规则
  （2）可选参数，初始值

// 1+2的和为a, 3为b, 3+3的和为a, 4为b, 以此类推
let arr = [1,2,3,4,5,6,7,8];
let result = arr.reduce((a, b) => a + b);
console.log(result); // 36 数组每个元素相加之和
result = arr.reduce((a, b) => a + b, 10); // 10 初始值
console.log(result); // 46

2. 破坏性方法

（1）push()

• 向数组的末尾添加一个或多个元素并返回新的长度

const arr =  ["孙悟空", "猪八戒", "沙和尚"];
arr.push("唐僧", "白骨精");
console.log(arr); // ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]

（2）pop()

• 删除并返回数组的最后一个元素

const arr =  ["孙悟空", "猪八戒", "沙和尚"];
let result = arr.pop();
console.log(result); // 沙和尚
console.log(arr); // ["孙悟空", "猪八戒"]

（3）unshift()

• 想数组的开头添加一个或多个元素，并返回新的长度

const arr =  ["孙悟空", "猪八戒", "沙和尚"];
let result = arr.unshift("牛魔王");
console.log(arr); // ["牛魔王", "孙悟空", "猪八戒", "沙和尚"]
console.log(result); // 4

（4）shift()

• 删除并返回数组的第一个元素

const arr =  ["孙悟空", "猪八戒", "沙和尚"];
let result = arr.shift();
console.log(arr); // ["猪八戒", "沙和尚"]
console.log(result); // 孙悟空

（5）splice()

• 可以删除、插入、替换数组中的元素
• 参数：
  （1）删除的起始位置
  （2）删除的数量
  （3）要插入的元素
• 返回值：被删除的元素

const arr = ["孙悟空", "猪八戒", "沙和尚", "牛魔王", "铁扇公主"];
// 删除
let result = arr.splice(1, 3);
console.log(result); //  ['猪八戒', '沙和尚', '牛魔王']
console.log(arr); // ['孙悟空', '铁扇公主']
// 替换
arr = ["孙悟空", "猪八戒", "沙和尚", "牛魔王", "铁扇公主"];
result = arr.splice(1, 3, "白骨精");
console.log(arr); // ['孙悟空', '白骨精', '铁扇公主']
// 插入
arr = ["孙悟空", "猪八戒", "沙和尚"];
result = arr.splice(1, 0, "牛魔王", "铁扇公主");
console.log(arr); // ["孙悟空", "牛魔王", "铁扇公主", "猪八戒", "沙和尚"]

（6）reverse()

• 反转数组

const arr = ["a", "b", "c", "d"];
arr.reverse();
console.log(arr); // ['d', 'c', 'b', 'a']

（7）sort()

• 用来对数组进行排序（会改变原数组）
• 默认将数组升序排列
• 默认按照Unicode编码进行排序，如果直接通过sort对数字进行排序，可能会得到一个不正确的结果
• 参数：可以传递一个回调函数作为参数，通过回调函数来指定数字数组的排序规则
  • (a, b) => a - b 升序排列
  • (a, b) => b - a 降序排列

let arr = ["a", "c", "e", "f", "d", "b"];
arr.sort();
console.log(arr); // ["a", "b", "c", "d", "e", "f"]
arr = [2, 3, 1, 9, 0, 4, 5, 7, 8, 6, 10];
arr.sort();
console.log(arr); // [0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
arr.sort((a, b) => a - b);
console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

3. 其他方法

（1）forEach()

• 遍历数组
• 需要一个回调函数作为参数，这个回调函数会被调用多次（元素几个，就会调用几次）
• 回调函数三个参数：
  （1）element 当前的元素
  （2）index 当前元素的索引
  （3）array 被遍历的数组

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"];
arr.forEach((elemet, index, array) => {
  console.log(index, element);
});